Drop-Cap Cross Browser Test

dabblet.css

/**
 * Drop-Cap Cross Browser Test
 */

/* Baseline Grid */
body {
	background: linear-gradient(90deg, hsla(0,0%,55%,.5) 1px, transparent 1px);
	background-size: 24px 24px;
}

p {
	background-color: hsla(40,100%,50%,.3);
    margin: 3rem;
    font: 1em/1.5 Georgia, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", serif;
}

p:first-child:first-letter {
	background-color: hsla(100,100%,50%,.3);
    float: left;
    color: #444;
    font-size: 3.3em;
    padding: 0.1em 0.1em 0 0;
    line-height: 0.7;
    text-shadow: 2px 2px 0 #dadada;
}

dabblet.html

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet 
mi ut erat dapibus varius. Cras aliquet augue eget ipsum posuere a 
mattis quam gravida. Proin pretium rhoncus mi, nec dapibus odio iaculis 
id. Aenean mattis, nulla eu hendrerit fermentum, urna tellus tristique 
mauris, eu dignissim quam arcu ut nisi. Curabitur vel dui urna. Cras 
porta neque id enim facilisis dapibus. Maecenas molestie, lorem ut 
tristique ultricies, lorem eros viverra libero, et commodo nisi eros eu 
arcu. Nulla risus neque, lobortis eu rhoncus id, porta id elit. Sed 
rhoncus erat sit amet turpis convallis eget placerat sapien vehicula. 
Proin eget nisi leo, vitae ultrices nisl. Morbi metus eros, viverra sed 
elementum tristique, ornare quis erat. Praesent velit arcu, eleifend 
vitae viverra non, aliquam vitae lorem. In eu eros neque, at consequat 
mi. Nunc placerat semper sem ut dignissim. Aliquam ornare, lectus a 
lacinia condimentum, turpis arcu bibendum dolor, a fringilla sapien 
felis quis tortor.</p>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}