Ejemplo con First-Letter en CSS3

El uso de first-letter en CSS ya existía desde niveles anteriores. Pero en CSS3 hay una pequeña variante en la sintaxis con el uso de ::

A continuación veremos un ejemplo donde se combina el uso de la propiedad first-letter con la selección de el primer elemento dentro de una caja (en este caso un párrafo):first-letter


<!DOCTYPE html>
<html>
<head>
	<style>
		#box p:first-child::first-letter{font-size: 30px;float: left;background-color: black;color: white;display: block;margin-right:5px;font-weight: bold;text-align: center;padding: 5px;}
		#box p{font-family:Verdana,sans-serif;font-size: 20px;}
	</style>	
</head>
<body>	
	<div id="box">
		<p>Example: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga fugit itaque nobis dolore deserunt laborum eaque amet, facere, voluptatum culpa.</p>
		<p>Dolorem repellendus commodi tempore minima error qui temporibus deserunt eius reiciendis necessitatibus harum sed voluptates labore, nihil esse animi earum possimus nemo alias dicta in cupiditate ex!</p>
		<p>Nuibusdam, iure exercitationem eos sint necessitatibus consectetur fugiat id, vel dolor dicta deleniti? Inventore maiores iste iure, aut obcaecati. Impedit nesciunt nam veniam accusantium ea reprehenderit molestiae vitae quisquam, error amet. Debitis quam libero ab cumque nemo excepturi nulla neque veniam dignissimos facere, minima odio dolore reprehenderit.</p>
	</div>	
</body>
</html>

 

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

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

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.