Letra capital al principio de un párrafo con CSS

Por Toni | Comentarios ( 4 ) | Trackbacks ( 0 )

odemos crear una letra capital —si interesa en algún tipo de trabajo— me refiero a la primera letra de un párrafo que destaca al ser más grande, de una manera muy sencilla, con el pseudo elemento incluido en CSS 1, por lo que los navegadores lo soportan bien.

Lamentablemente sólo se puede aplicar una cantidad limitada de propiedades a ese efecto, según w3schools (tipo de letra, color, fondo, margen, el relleno, etc.) y alguna que otras propiedades más.

Otra manera es realizar esa letra capital de modo gráfico, colocando una imagen sin más al principio, a la izquierda, tal y como he colocado en el post.

Pero podemos conseguir ese efecto, también colocando un gráfico, pero con más control, utilizando CSS tal y como lo muestran en ONYX DESIGN, con el siguiente código:

p:first-letter {
display:block;
float:left;
border:1px solid black;
padding:5px;
margin:4px 5px;
background:url(firstletter1.png);
font-size:73px;
}

Puedes ver en este enlace un ejemplo del resultado que se puede conseguir.

Puedes dejar un comentario, o suscribirte al feed.