Hacer un efecto de capitular el uso de CSS

aprender: Cómo hacer efecto class desplegable con CSS ? Este artículo contiene tutorial detallado para hacer efecto case desplegable con CSS.

Durante la lectura de libros que debe haber notado la primera letra es diferente de otro párrafo en términos de tamaño o diseño. Esta es una tradición que se está siguiendo en los últimos años. Esto hace que la mirada el texto bastante y le da un comienzo negrita.

He aquí un ejemplo del efecto de capitular:

Make a drop-cap effect using CSS - 4

Programa:

Pues bien, este tipo de estilo es mucho más fácil de lo que parece. Vamos a utilizar CSS pseudo-selectores saber : la primera de tipo y : first-letter .

Nos concentraremos en el párrafo, ya que representan el texto de un artículo o un libro.

p:first-of-type:first-letter {
font-size: 32px;
font-weight: 700;
}

El p es el selector de elemento de párrafo y que se aplicará los pseudo selectores a ella. Ahora, si aplicamos solamente : first-letter a ella, todos los párrafos tendrían su primera letra comenzando estilo como efecto de capitular .

Para evitar esto, utilizaremos : la primera de tipo que seleccionará sólo la primera de su tipo. A continuación, le damos propiedades que lo hacen más grande y más audaz que el resto del texto.

DEMO

código HTML con CSS:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Drop-cap Effect</title>
<style>
p:first-of-type:first-letter {
font-size: 32px;
font-weight: 700;
}
</style>
</head>
<body>
<p>This is a simple paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ullam fugiat accusamus tempore sapiente voluptate, asperiores tenetur ea odio architecto!</p>
<p>What's up Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, enim?</p>
</body>
</html>

Hay que ir! ¡Bonito y fácil!


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *