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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqv9xUWhfqzoPfBhRSegyExsyerJzSfhhGy7zgHwGSPvW5c1vyEJpMJFgbOtm_I-7ux9hMi8q9IK8dCS0ASqFOXp6CavdMGBlPzYdkN2OUgjAH7kPKmcBBEqDaOl5ksmzMfZpMBPIvzeU/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>
.capa {position:relative;margin:0px auto;border:2px solid #000000;width:500px;height:440px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqv9xUWhfqzoPfBhRSegyExsyerJzSfhhGy7zgHwGSPvW5c1vyEJpMJFgbOtm_I-7ux9hMi8q9IK8dCS0ASqFOXp6CavdMGBlPzYdkN2OUgjAH7kPKmcBBEqDaOl5ksmzMfZpMBPIvzeU/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.
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.
Y muchos más artículos interesantes si nos sigues en...
Feliz navidad oloblogger
ResponderEliminarMuy bueno, gracias. Quizá lo estaré utilizando en uno de mis blogs.
ResponderEliminarpues feliz navidad, aunque no lo celebre ;)
ResponderEliminarFelices Fiestas Oloblogger y gracias por compartir este blog.
ResponderEliminaroye yo quisiera saber como poner la sombra blanca que justamente tienes tu en el nombre del post, en mi blogger.
ResponderEliminarPleasse!
gracias =D
Echa un vistazo aquí que se explica el text-shadow al completo. Si no puedes resolver lo que quieres, ya preguntas allí ¿ok?
EliminarA veces veo sombras...