JMiur [E]

El pseudo-elemento :first-letter permite establecer las propiedades de la primera letra de un párrafo. Es algo simple pero, debe tenerse muy en cuenta que ese párrafo debe comenzar con un texto y no funcionará si es precedido por una imagen, un salto de línea o cualquier otro tipo de contenido.

Un par de ejemplos:

Suspendisse lacinia erat ut ipsum tristique at pretium nunc bibendum! Mauris non neque a odio ultrices volutpat.
Suspendisse lacinia erat ut ipsum tristique at pretium nunc bibendum! Mauris non neque a odio ultrices volutpat.

.ejemplo-1:first-letter {
  color: aquamarine;
  font-family: Garamond;
  font-size: 50px;
  line-height: 0.5;
  vertical-align: baseline;
}

.ejemplo-2:first-letter {
  color: salmon;
  float: left;
  font-family: monospace;
  font-size: 117px;
  font-style: italic;
  padding-right: 10px;
  text-shadow: 2px 0 1px #FFF;
}
Hay que tener muy pero muy en cuenta que, como estamos trabajando con fuentes, los resultados podrán variar sustantivamente en los distintos navegadores así que hay que mirar bien y tratar de encontrar alguna clase de equilibrio.

El otro pseudo-elemento similar es :first-lineque hace algo similar pero se aplica a la primer línea de un párrafo.

En este caso, hay que tener en cuenta que la primera línea no se refiere a lo que se separa por saltos de línea sino a la primera línea que muestra el navegador así que en estos ejemplos, la regla de estilo tiene resultados distintos aún cuando el texto sea el mismo porque lo que varía es el ancho:

Mauris non neque a odio ultrices volutpat. Aliquam orci lectus; consequat at ultrices ac, luctus sed erat. Duis in pretium orci. Phasellus metus leo, hendrerit at volutpat.

Mauris non neque a odio ultrices volutpat. Aliquam orci lectus; consequat at ultrices ac, luctus sed erat. Duis in pretium orci. Phasellus metus leo, hendrerit at volutpat.

ejemplo3:first-line {
  color: red;
}
ejemplo4:first-line {
  color: yellowgreen;
  font-style: italic;
  font-variant: small-caps;
}
Como siempre, podemos combinar ambas cosas y, en ese caso, hay que saber que "quien mande" será :first-letter, sin importar el orden en que lo hayamos escrito:

Mauris non neque a odio ultrices volutpat. Aliquam orci lectus; consequat at ultrices ac, luctus sed erat. Duis in pretium orci. Phasellus metus leo, hendrerit at volutpat.

2 comentarios:

Graciela de Palomas  

Lo pruebo Jmiur, buen día :)

JMiur  

Buenos dias/tardes :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR