Article preview

dabblet.css

/**
 * Article preview
 */

/* Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Dosis);
 
p {
    font-family: 'Dosis', sans-serif;
    padding: 0px 40px 20px 40px;
    position: relative;
    top: -20px;
    z-index: 4;
    color: white;
}
 
img {
    display: block;
}

.content {
    width: 455px;
    z-index: 1;
    background: #404040;
    position: relative;
    top: -20px;
}

.content:after {
    content: '';
    display: block;
    z-index: 20;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #404040;
    border-left: 30px solid #404040;
    position: absolute;
    top: -60px;
    left: 395px;
}

.content:before {
    content: '';
    display: block;
    width: 395px;
    height: 60px;
    background: #404040;
    z-index: 2;
    position: absolute;
    top: -60px;bsolute

dabblet.html

​<div class="article"​​​​​​​​​​​​​​​​>
    <img src="http://img.scoop.it/gJt1_YDJsqClCoXteCQiZTl72eJkfbmt4t8yenImKBVaiQDB_Rd1H6kmuBWtceBJ" />
    
    <div class="content">
    	<p>Ice cream wafer sweet roll oat cake jelly beans cookie. Caramels liquorice wypas danish gummi bears. Donut sesame snaps wypas powder lollipop marzipan gingerbread sesame snaps. Pudding cupcake chocolate tootsie roll danish fruitcake. Sweet roll ice cream sweet roll tootsie roll danish icing carrot cake. Soufflé toffee lemon drops chocolate cake halvah cookie halvah.</p>
    </div>
</div>
​

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}