Skip to content

Instantly share code, notes, and snippets.

@nielsdoorn

nielsdoorn/dabblet.css

Created February 17, 2012 07:48
Show Gist options
  • Save nielsdoorn/1851649 to your computer and use it in GitHub Desktop.
Save nielsdoorn/1851649 to your computer and use it in GitHub Desktop.
Download ZIP
chat bubbles test
Raw
dabblet.css
/** chat bubbles test */
.chat-bubble {
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
margin:40px auto;
padding:10px;
position:relative;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.chat-bubble-arrow-border {
border-color: transparent #666666 transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:30px;
left:-22px;
}
.chat-bubble-arrow {
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:30px;
left:-19px;
}
@keyframes fadein {
0% { opacity:0}
100% { opacity:1}
}
.chat-bubble:nth-child(1) {
animation-name: fadein;
animation-iteration-count: once;
animation-timing-function: linear;
animation-duration: 2s;
animation-fill-mode: forwards;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="chat-bubble"> first!
<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>
</div>
<div class="chat-bubble"> Buongiorno!
<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>
</div>
<div class="chat-bubble"> Buongiorno!
<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>
</div>
<div class="chat-bubble"> last!
<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>
</div>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment