Text-shadow y el brillo de la Navidad | Oloblogger El protocolo navideño es una cosa que todavía no tengo muy bien desarrollada. Comidas, felicitacione...

24 de diciembre de 2011

Text-shadow y el brillo de la Navidad

El protocolo navideño es una cosa que todavía no tengo muy bien desarrollada. Comidas, felicitaciones, espumosos, espirituosos, compras, regalos, árbol, adornos, pesebre... Mucho ajetreo para mí. Pero hoy toca lo que toca y aquí no podemos dejar que penséis que somos ajenos al buen rollo que circula entre todos por estas fechas. Todos tenemos nuestro corazoncito aunque no lo parezca.

Así que hoy vamos a hacer un dos en uno y vamos a cumplir con la tradición sin dejar de hacer lo que por aquí acostumbramos, aprender cosillas de código y en esta ocasión, a costa de la propiedad text-shadow. También usaremos un poquito de posicionamiento.

Las sombras con CSS3 se pueden acumular, esto es, situar distintas sombras a distintas distancias del objeto principal, cada una con un color distinto. Si a eso le añadimos un desenfoque (blur), podemos conseguir un efecto halo, neón, brillo o cómo prefiráis llamarlo.

Un ejemplo sería el siguiente:

text-shadow: -1px -1px 0px #ffffff, 1px 1px 0px #00000;

El primer dígito es el desplazamiento vertical, el segundo el horizontal, el tercero la imprecisión o amplitud del desenfoque y el último el color a utilizar (arriba-izquierda, preciso, color blanco). Con una coma es como se pueden ir añadiendo más sombras. En el ejemplo, la segunda sombra se ha proyectado abajo-derecha, sin blur y con color negro.

Ahora bien, si todas las sombras las fijamos en 0,0 -bajo el caracter- y lo que vamos cambiando es el color y la amplitud del desenfoque, podemos obtener cosas como las que hemos hecho con estas letras -que no dibujos- superpuestas sobre una imagen.



FELIZ


<style type="text/css">
.capa {position:relative;margin:0px auto;border:2px solid #000000;width:500px;height:440px;background:url(http://2.bp.blogspot.com/-Jtatmjd-hFA/TvYBCVAwrCI/AAAAAAAABY8/DYojnCQPusg/s500/arboldenavidad.jpg);}
.feliz {position:absolute;top:30px;left:30px;}
.navidad {position:absolute;bottom:30px;right:30px;}
.letra {
color:#ffffff;
font-family:arial;
font-size:60px;
letter-spacing: 5px;
text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #6898ED, 0 0 10px #6898ED, 0 0 15px #152C8A, 0 0 20px #eeeeee, 0 0 25px #ffffff;
}
</style>

<div class="capa">
<div class="feliz">
<span class="letra">FELIZ</span>
</div>
<div class="navidad">
<span class="letra">NAVIDAD</span>
</div>
</div>



Para vosotros,
con mis mejores deseos.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

6 comentarios :

  1. Muy bueno, gracias. Quizá lo estaré utilizando en uno de mis blogs.

    ResponderEliminar
  2. pues feliz navidad, aunque no lo celebre ;)

    ResponderEliminar
  3. Felices Fiestas Oloblogger y gracias por compartir este blog.

    ResponderEliminar
  4. oye yo quisiera saber como poner la sombra blanca que justamente tienes tu en el nombre del post, en mi blogger.
    Pleasse!
    gracias =D

    ResponderEliminar
    Respuestas
    1. Echa un vistazo aquí que se explica el text-shadow al completo. Si no puedes resolver lo que quieres, ya preguntas allí ¿ok?
      A veces veo sombras...

      Eliminar