Tutorial de Drop Cap en CSS | Diseño Tipográfico

Introducción

En este laboratorio, aprenderemos sobre la técnica de Drop Cap en CSS. Drop Cap es una técnica tipográfica utilizada para agregar atractivo visual a la primera letra del primer párrafo. A través de este laboratorio, entenderás cómo utilizar el selector :first-child y el pseudo-elemento ::first-letter para dar estilo a la primera letra de un párrafo de manera única y llamativa.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35193{{"Técnica de Drop Cap Elegante"}} css/colors -.-> lab-35193{{"Técnica de Drop Cap Elegante"}} css/fonts -.-> lab-35193{{"Técnica de Drop Cap Elegante"}} css/margin_and_padding -.-> lab-35193{{"Técnica de Drop Cap Elegante"}} css/width_and_height -.-> lab-35193{{"Técnica de Drop Cap Elegante"}} css/pseudo_classes -.-> lab-35193{{"Técnica de Drop Cap Elegante"}} css/pseudo_elements -.-> lab-35193{{"Técnica de Drop Cap Elegante"}} end

Drop Cap

Puedes escribir el código en index.html y style.css.

Hace que la primera letra del primer párrafo sea más grande que el resto del texto.

Utiliza el selector :first-child para seleccionar solo el primer párrafo.
Utiliza el pseudo-elemento ::first-letter para dar estilo al primer elemento del párrafo.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo
  ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit.
  Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis
  libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit
  amet congue erat sodales commodo.
</p>
<p>
  Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae
  orci lectus. Nullam consectetur orci at pellentesque efficitur.
</p>

p:first-child::first-letter {
  color: #5f79ff;
  float: left;
  margin: 0 8px 0 4px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

Resumen

¡Felicitaciones! Has completado el laboratorio de Drop Cap. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.