Es bonito que varias letras se superpongan encima de otras. Si lo hacemos bien, podremos crear un bonito diseño, que puede ser el logo de nuestro sitio, por ejemplo.
Para crear una palabra con letras encima de otras, tenemos que crear varios divs que cada uno a un estilo distinto:
<div id="element-1" class="element">David</div> <div id="element-2" class="element">Walsh</div> <div id="element-3" class="element">Blog</div> <div id="element-4" class="element">Showing</div> <div id="element-5" class="element">CSS</div> <div id="element-6" class="element">Overlap</div>
Después, pegamos este código CSS en el documento HTML:
.element { font-size:75px; position:absolute; } #element-1 { color:lightblue; z-index:1; } #element-2 { color:lightgreen; margin:30px 0 0 30px; z-index:2; } #element-3 { color:pink; margin:60px 0 0 60px; z-index:3; } #element-4 { color:yellow; margin:90px 0 0 90px; z-index:4; } #element-5 { color:orange; margin:120px 0 0 120px; z-index:5; } #element-6 { color:gray; margin:150px 0 0 150px; z-index:6; }
Claro está, los colores pueden ser los que queramos nosotros.
Si lo hacemos correctamente, nos quedará una cosa parecida a este ejemplo.
Vía | DavidWalsh