CSS Gradients and Reflection on text

dabblet.css

/**
 * CSS Gradients and Reflection on text
 * @girlie_mac
 */

section {
    position: relative;
    margin-top: -140px;
}

p, p:before {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-reflect: below -120px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0)50%,rgba(0,0,0,0.75))
}

p {
    font-size: 140px;
    text-shadow: 0 0 20px #02a2de;
    color: #009cff;
}

p:before {
    display: block;
    content: attr(title);
    
    color: #fff;
    -webkit-mask-image: -webkit-linear-gradient(-60deg,rgba(0,0,0,1), rgba(0,0,0,0.5) 49%, rgba(0,0,0,0.2) 50%,rgba(0,0,0,0));
}

dabblet.html

<!-- I should give the credit fo: http://d.hatena.ne.jp/kudakurage/20111113/1321170623 for the idea -->
<section>    
	<p title="☁">☁</p>
</section>

settings.json

{"page":"css","view":"split"}