Párrafo Dropcap con elementos de primera línea y primera letra de CSS

Hay algunos selectores o propiedades de CSS que creo que rara vez se utilizan en la naturaleza, pero en realidad han existido desde los días de CSS1; algunos de ellos incluyen el :primera linea y :primera letra elementos de pesudo.

Cómo utilizar?

Estos pseudo-elementos funcionan básicamente de manera similar a sus hermanos: antes y después, y creo que también son bastante sencillos. los :primera letra apuntará a la primera letra o carácter de un elemento seleccionado, este pseudo-elemento Se utiliza comúnmente para crear un efecto tipográfico como una tapa de caída. Así es como se hace..

 p: primera letra font-size: 50px;  

Este código da como resultado la siguiente presentación..

Sin embargo, se deben tener en cuenta algunas cosas; este efecto solo se aplicará cuando el primer carácter no esté precedido por otro elemento, por ejemplo, una imagen. Además, cuando tenemos algunos de los mismos elementos específicos en una fila, todos ellos también se verán afectados.

Además, en términos de la :primera linea, esta pseudo-elemento apuntará a la primera línea del elemento apuntado, este ejemplo a continuación muestra cómo resaltamos la primera línea del párrafo.

 p: primera línea font-weight: negrita;  

Como el código anterior de :primera letra, esto también afectará a todas las primeras líneas en los elementos de párrafo que hay en la página.

Entonces, en casos reales, cuando generalmente deseamos agregar un límite de caída o alterar la primera línea solamente en el primer párrafo debemos ser más específicos, ya sea agregando un atributo de clase adicional o aplicando estos pseudo-elementos junto con :primer hijo o : primero en tipo selector, como asi.

 p: primer hijo: primera letra font-size: 50px;  p: first-child: first-line font-weight: bold;  

Ahí vamos, el párrafo afectado es ahora solo el primero..

Pseudo-elementos en el trabajo

De acuerdo, ahora intentemos diseñar un mejor aspecto de un párrafo utilizando pseudo-elementos. Pero antes de comenzar, necesitamos una fuente especial para nuestra tapa y aquí está mi elección: Hominis de Paul Lloyd. Luego definimos una nueva familia de fuentes en la hoja de estilos, como sigue.

 @ font-face font-family: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') formato ('embedded-opentype'), url ('fonts / HOMINIS-webfont.woff') formato ('woff'), url ('fonts / HOMINIS-webfont.ttf ') formato (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') formato (' svg '); fuente-peso: normal; estilo de letra: normal;  

A continuación, configuramos la familia de fuentes predeterminada para los párrafos..

 p color: # 555; Familia tipográfica: 'Georgia', Times, serif; altura de línea: 24px;  

En este ejemplo, estaremos usando el :primer hijo Selector para orientar el primer párrafo y aplicar estilos decorativos para que se vea más prominente:

 p: primer hijo padding: 30px; borde izquierdo: 5px sólido # 7f7664; color de fondo: # f5f4f2; línea de altura: 32px; caja de sombra: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); posición: relativa;  

Luego, agregamos una tapa de caída usando :primera letra, amplíe el tamaño de la fuente y asígnele una nueva familia de fuentes;

 p: primer hijo: primera letra font-size: 72px; flotador izquierdo; relleno: 10px; altura: 64px; font-family: 'HominisNormal'; color de fondo: # 7F7664; margen derecho: 10px; color blanco; radio del borde: 5px; línea de altura: 70px;  

También haremos hincapié en la primera línea con :primera linea, al igual que.

 p: primer hijo: primera línea font-weight: negrita; tamaño de fuente: 24px; color: # 7f7664;  

Por último, queremos agregar un atributo decorativo al primer párrafo con un clip utilizando :después pseudo-elemento.

 p: primer hijo: después de background: url ("… /images/paper-clip.png") no-repetir scroll 0 0 transparente; contenido: " "; pantalla: bloque en línea; altura: 100px; posición: absoluta; derecha: -5px; arriba: -35px; ancho: 100px;  

Ese es todo el código que necesitamos, ahora nuestro párrafo debería verse mucho mejor;

También puede ver la demostración en vivo de los siguientes enlaces:

• Ver demostración
• Descargar fuente

Pensamiento final

Como mencionamos anteriormente en este post, estos pseudo-elementos, específicamente los :primera letra y :primera linea se ha incluido desde CSS1, por lo que también son compatibles incluso en Internet Explorer 8 anteriormente.

Sin embargo, que yo sepa, no se implementan en gran medida en la naturaleza. Por lo tanto, esperamos que este tutorial pueda inspirarte de alguna manera a probar estas funciones CSS en tu sitio web..