Con la llegada de CSS3, la nueva y última versión de las hojas estilo cascada CSS, también llegaron novedades muy útiles como una serie de efectos visuales que antes solo podíamos realizarlos por medio del montaje de imágenes del tipo mapa de bits (JPG, GIF, PNG)
En este artículo te enseño un poderoso y muy atractivo Efecto de Hundido para aplicarle a las tipográficas de un documento web por medio de los efectos CSS3.
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
La sintaxis simple para 1 sombra, seria la siguiente:
text-shadow: #ffffff -1px -2px 1px;
El primer parámetro es el color de la sombra, en modo RGB.
El segundo parámetro es el desplazamiento de la sombra en el eje horizontal. (negativo hacia la izquierda y posittivo hacia la derecha)
El terecer parámetro es el desplazamiento en el eje vertical. (negativo hacia arriba y posittivo hacia abajo)
El cuarto parámetro es el desenfocado o blur de la sombra.
Y para aplicar varias sombras, solamente colocamos una coma y luego la serie de 4 parámetros de la siguiente sombra:
text-shadow: #ffffff -1px -2px 1px, #ffdd66 -3px 0px 2px;
Veamos un ejemplo
Primero crearemos un DIV llamado «fondo» donde incluiremos un texto con la etiqueta de texto H1, y le aplicaremos la clase «efecto» que luego crearemos:
<div id="fondo"> <h1>Tipografia Hundida</h1> </div>
Luego, definiremos los estilos CSS del DIV y de la clase «efecto» del texto:
#fondo {
width: 550px;
height: 100px;
background-color: #448CCB;
}
Le especificamos un ancho de 550px, un alto de 100px y un color de fondo #448CCB.
Ahora pasemos a la clase «efecto» que le aplicaremos al texto y donde estarán las sombras:
.efecto {
padding-left: 30px;
padding-top: 17px;
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
color: #0D4383;
text-shadow: #000000 -1px 0, #000000 0 -1px, #ffffff 0 1px 1px, #000000 -1px -2px 1px;
}
Aquí aplicamos unos padding (separaciones) del borde para alejar el texto del borde del DIV.
Luego especificamos que utilice la familia tipográfica Rockwell o sus variantes.
Le aplicamos un tamaño de texto de 50px, y un color azul #0D4383.
Y por ultimo utilizamos el atributo «text-shadow» con 4 sombras en este orden:
#000000 -1px 0 (color negro desplazdo hacia la izquierda 1 px)
#000000 0 -1px (color negro desplazdo hacia la arriba 1 px)
#ffffff 0 1px (color blanco desplazdo hacia abajo 1 px)
#000000 -1px -2px (color negro desplazdo hacia la izquierda 1 px y hacia arriba 2px)
NOTA: en este caso omití el cuarto parámetro perteneciente al desenfocado de la sombra. Por defecto si se omite, es igual a 0. (sin desenfocar)
El resultado es el siguiente:
Aquí el código completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efecto de tipografias con CSS3</title>
<style type="text/css">
#fondo {
width: 550px;
height: 100px;
background-color: #448CCB;
}
.efecto {
padding-left: 30px;
padding-top: 17px;
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
color: #0D4383;
text-shadow: #000000 -1px 0, #000000 0 -1px, #ffffff 0 1px, #000000 -1px -2px 1px;
}
</style>
</head>
<body>
<div id="fondo">
<h1>Tipografia Hundida</h1>
</div>
</body>
</html>
Aquí puedes ver y descargar el ejemplo:
CSS3 HOY…
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.
Esto significaba un tiempo de trabajo mucho mayor, y la poca flexibilidad ya que si luego queríamos realizar un cambio, debíamos editar toda la imagen de la sombra.
Por otro lado, el peso del documento final era bastante mayor.
Hoy, gracias a CSS3, podemos lograrlo en 1 sola línea de código.
Es realmente impresionante el poder que tiene esta nueva tecnología CSS3 y el tiempo que nos ahorra en el desarrollo y estilizacion de nuestros documentos web.
Muy bueno, pero NO funciona en Internet Explorer
…y el 60% de la navegación aún remite por este navegador!
Yanina tenes razón.
Lamentablemente IE se está quedando «demasiado» afuera de las nuevas tecnologias.
Habrá que esperar a que se actualicen o mueran en el intento.
Saludos!
Muy buena la explicación, pero IE 8 no lo soporta aun jajaja … ya q css avanza podriamos dar un salto importante y matar a IE, en todas sus versiones no? Saludos,
Si Melisa, desde IE8 hacia atras no lo soporta.
Es un tema bastante complicado lo de IE, hasta que no ofrezcan compatibilidad full para CSS3, quedarán un paso atras.
Llamentablemente es el navegador que se instala por defecto con cualquier version de Windows.
En fin, hay que esperar, jeje.
Saludos!
Cristian
Gracias Cristian por los tutoriales, son todos interesantes, y muy bien explicados, saludos!!!
Por nada Danny.
Saludos!
Saludos Cristian:
No habia visita tu página (lamentablemente para mi) está muy buena, principal,emte los ejemplos que haz colocado de css estan celestiales, los voy a corre en una una página que le estoy haciendo al consejo comunal del Barrio la Toma, aquí en Ciudad Bolivar , Venezuela y despues te comento.
http://omaraqui2000.blogspot.com
Gracias Omar.
Despues me cuentas como te fue.
🙂
Saludos!
Cristian