sábado, 10 de mayo de 2014

Textos con sombra



1. Los valores de la propiedad

La nueva propiedad CSS3 text-shadow permite aplicar una sombra a un texto. Esta propiedad puede usar diversos valores:

  • el primer valor es el desplazamiento horizontal de la sombra. 
  • el segundo valor es el desplazamiento vertical de la sombra. 
  • el tercer valor es el tamaño del difuminado de la sombra. 
  • el cuarto valor es el color de la sombra. 
  • el quinto valor es la dirección de la sombra: inset, hacia el interior (por defecto, la sombra será exterior).

Veamos un ejemplo sencillo:

h1 {
text-shadow: 8px 8px 5px rgb(100,50,200);


  • desplazamiento horizontal de 8 píxeles, 
  • desplazamiento vertical de 8 píxeles, 
  • difuminado de 5 píxeles,
  • color violeta.


Este es el resultado visual:


2. Las herramientas en línea

Una vez más, disponemos de multitud de soluciones en línea para generar texto con sombras.

El sitio web WestCIV (http://www.westciv.com/) pone a su disposición completas herramientas para generar estilos CSS3. La herramienta Text Properties (http://www.westciv.com/tools/text-properties/index.html) presenta una completa interfaz en la que podrá dar formato a su texto con las propiedades CSS3. En la zona Text and Font Properties, encontrará las propiedades clásicas que permiten cambiar el formato del texto. En la zona Text Columns, podrá organizar su caja en columnas y, en la zona shadow, podrá aplicar una sombra a su texto.


El sitio web CSS3Gen (http://css3gen.com/text-shadow/) pone a su disposición una sencilla interfaz donde podrá generar el código CSS3 que necesite.


El sitio web WordPressThemeShock también le propone un generador de texto sombreado (http://www.wordpressthemeshock.com/css-text-shadow/).



3. Algunos ejemplos de diseño

Estos son algunos ejemplos sacados del sitio web http://webexpedition18.com

Un efecto retro mediante la aplicación de dos sombras:

@font-face {
font-family: "Hobo";
src: url("HoboStd.otf");
}
h1 {
border: solid 1px #ccc;
padding: 5px;
width: 300px;
background-color: #fff;
font-family: "Hobo";
color: rgb(158,17,10);
text-shadow: 1px 1px 0px white, 2px 2px 0px grey;
text-align: center;
}

El resultado visual:


Un efecto 3D con multitud de sombras desplazadas para simular el efecto 3D:

Los estilos CSS:

@font-face {
font-family: "Hobo";
src: url("HoboStd.otf");
}
h1 {
background-color: #fce;
width: 300px;
padding: 5px;
font-family: "Hobo";
color: rgb(158,17,10);
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
text-align: center;
}

El resultado obtenido:


Un efecto de desplazamiento negativo:

@font-face {
font-family: "Hobo";
src: url("HoboStd.otf");
}
h1 {
border: solid 1px #ccc;
padding: 5px;
width: 300px;
background-color: #ddd;
font-family: "Hobo";
color: rgb(158,17,10);
text-shadow:-2px -1px 0 #fff;
text-align: center;
}

El resultado visual:


Una sombra clara sobre un fondo oscuro:

@font-face {
font-family: "Hobo";
src: url("HoboStd.otf");
}
h1 {
border: solid 1px #ccc;
padding: 5px;
width: 300px;
background-color: #474747;
font-family: "Hobo";
color:#222;
text-shadow: 0px 1px 2px #eee;
text-align: center;
}

El resultado obtenido:



Espero haber ayudado en algo. Hasta la próxima oportunidad!








No hay comentarios:

Publicar un comentario en la entrada