Skip to content

Instantly share code, notes, and snippets.

@TimGeronimoLam

TimGeronimoLam/dabblet.css

Created April 24, 2014 00:16
Show Gist options
  • Save TimGeronimoLam/11237061 to your computer and use it in GitHub Desktop.
Save TimGeronimoLam/11237061 to your computer and use it in GitHub Desktop.
Download ZIP
Fancy comment blocks CSS implementation (SO)
Raw
dabblet.css
/**
* Fancy comment blocks CSS implementation (SO)
* http://stackoverflow.com/questions/11573871/fancy-comment-blocks-css-implementation/11574287#11574287
*/
.comment {
width: 500px;
border-radius: 20px;
padding:20px;
margin: 5% auto;
position: relative;
background: #000;
color: #fff;
}
.a {
height: 90px;
}
.b:before, .b:after {
top: 130px;
left: 0;
width: 20px;
height: 20px;
display: block;
position: absolute;
content: '';
}
.b:before {
background: #fff;
}
.b:after {
border-radius: 100% 0 0 0;
background: #000;
}
.img-wrapper {
width: 130px;
height: 130px;
border-radius: 0 50% 50% 0;
margin: -20px 20px 20px -20px;
float: left;
background: #fff;
}
.img-wrapper img {
width: 120px;
height: 120px;
margin: 5px;
border-radius: 50%;
background: #000;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="comment a">
<a href="#" class="img-wrapper"><img src=""></a>
<div class="comment-content">
<p>Lemon drops cupcake cake wypas tart danish toffee. Halvah
cake chupa chups lemon drops danish marzipan
pudding.</p>
</div>
</div>
<div class="comment b">
<a href="#" class="img-wrapper"><img src=""></a>
<div class="comment-content">
<p>Lemon drops cupcake carrot cake wypas tart danish toffee. Halvah
carrot cake marshmallow chupa chups lemon drops danish marzipan
pudding gummies. Liquorice powder topping macaroon pudding lollipop
bear claw tart fruitcake.</p>
<p>Lemon drops cupcake carrot cake wypas tart danish toffee. Halvah
carrot cake marshmallow chupa chups lemon drops danish marzipan
pudding gummies. Liquorice powder topping macaroon pudding lollipop
bear claw tart fruitcake.</p>
<p>Lemon drops cupcake carrot cake wypas tart danish toffee. Halvah
carrot cake marshmallow chupa chups lemon drops danish marzipan
pudding gummies. Liquorice powder topping macaroon pudding lollipop
bear claw tart fruitcake.</p>
</div>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment