Skip to content

Instantly share code, notes, and snippets.

@long-lazuli

long-lazuli/dabblet.css

Forked from anonymous/dabblet.css
Created June 16, 2013 22:00
Show Gist options
  • Save long-lazuli/5793600 to your computer and use it in GitHub Desktop.
Save long-lazuli/5793600 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Tooltip - within one element.
Raw
dabblet.css
/**
* CSS Tooltip - within one element.
*/
html { height: 100% }
body{ background-image: linear-gradient(to bottom left, grey, black);
text-align: center;
font-family: sans-serif;}
.tooltip hr {
margin: 0.1em 0 0.2em;
border-width: 0.1em;
border-radius: 0.5em;
border-color: inherit;
border-style: inherit;
box-shadow: 0 .2em 0.2em rgba(0, 0, 0, 0.25);
}
.tooltip {
background-image: linear-gradient(transparent, rgba(0, 0, 0, 1)) ;
background-color: rgba(0, 0, 0,0.5) ;
color: #CCC;
display: inline-block;
line-height: 2em;
padding: 0.25em 0.75em;
border-width: 0.2em;
border-style: solid;
border-color: #CCC;
border-radius: 0.5em;
position: relative;
text-shadow: 0 .3em 0.4em rgba(0, 0, 0, 0.5);
box-shadow: inset 0 .2em 0.2em rgba(0, 0, 0, 0.25),
0em 0.1em 0.2em black;
transition-property: color, border-color, background-color;
transition-duration: 200ms, 400ms, 800ms;
transition-timing-function: easein;
}
.tooltip:hover {
color: #69F;
border-color: #69F;
background-color: rgba(0, 0, 127,0.5) ;
}
.tooltip:before,
.tooltip:after {
content: "";
display: block;
border-top-color: transparent;
border-right-color: transparent;
border-style: solid;
overflow: hidden;
height: 0;
width: 0;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%,50%) rotate(-45deg);
border-bottom-left-radius: inherit;
transition: inherit;
}
.tooltip:before {
border-bottom-color: inherit;
border-left-color: inherit;
border-width: 0.95em;
margin-bottom: -0.2em;
box-shadow: -0.08em 0.08em 0.2em black;
}
.tooltip:after {
border-bottom-color: #000;
border-left-color: #000;
border-bottom-left-radius: 0.35em;
border-width: 0.9em;
}
.tooltip:hover {
box-shadow: inset 0 .2em 0.2em rgba(0, 0, 0, 0.25),
0em 0.2em 0.5em rgba(0, 0, 0, 0.9);}
.tooltip:hover:before {
box-shadow: -0.2em 0.2em 0.5em rgba(0, 0, 0, 0.9);}
.tooltip:active {
box-shadow: inset 0 .2em 0.2em rgba(0, 0, 0, 0.25),
0em 0.1em 1em rgba(0, 0, 0, 0.8);}
.tooltip:active:before {
box-shadow: -0.08em 0.08em 1em rgba(0, 0, 0, 0.8);}
.tooltip[draggable] {
user-select: none;
cursor: move;
}
.tooltip pre {
font-size: inherit;
font-family: inherit;
color: inherit;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="tooltip hidden" draggable="true">
<strong class="title">Une info bulle</strong>
<hr />
<pre contenteditable="true">avec un dégradé.
La taille est automatique; vous pouvez également édité ce texte!</pre>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment