Efecto de Texto con CSS3
Antes de que existiera el CSS3, es decir, en versiones anteriores,
esto solo era posible con la generación de sombras por medio de imágenes.
Uno de los efectos CSS3 más utilizados, es el efecto de sombra que se logra por medio del atributo “box-shadow“. Hoy te enseño una variante del efecto sombra, pero para aplicar en textos de tipografías HTML. Este efecto se logra por medio del atributo “text-shadow” de CSS3. El atrubito “text-shadow” se utiliza para lograr efectos de sombras pero en tipografias o fuentes de HTML. Este atributo nos permite además, agregar varias sombras a un mismo elemento.
Veamos el ejemplo practico:
ESTRUCTURA HTML ------------------------------------
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Formador TI</title>
</head>
<body>
<h1 class="efecto">Formador TI</h1>
</body>
</html>
CÓDIGO CSS -----------------------------------------------
.efecto { <body>
<h1 class="efecto">Formador TI</h1>
</body>
</html>
CÓDIGO CSS -----------------------------------------------
padding-left: 30px; padding-top: 17px;
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px; color:#714d4b;
text-shadow: #000000 -1px 0, #000000 0 -1px, #ffffff 0 1px, #000000 -1px -2px 1px;
}
4 sombras en este orden:
#000000 -1px 0 (color negro desplazado hacia la izquierda 1 px)
#000000 0 -1px (color negro desplazado hacia la arriba 1 px)
#ffffff 0 1px (color blanco desplazado hacia abajo 1 px)
#000000 -1px -2px (color negro desplazado hacia la izquierda 1 px y hacia arriba 2px).
Aquí puedes descargar el ejemplo y archivos base
No hay comentarios