04/01/10

Titulos de entradas con efecto sombra por detras

Hoy les traigo un muy buen efecto que podemos lograr con un simple código, pero antes una aclaración este efecto solo puede visualizarse desde un navegador Mozilla Firefox, Safari, Chrome pero en IE no se puede visualizar, algo que todavía no podemos saber a que se debe, pero aun así nos sirve para dar efecto y visualizarlo desde los navegadores que si lo acepte.

Dejamos un ejemplo en 'imagen' para que los que utilizan el navegador IE puedan visualizar el efecto también:




Para crear este efecto 'Sombra' detrás de los títulos de una entrada solo debemos tener primero que nada, debemos posicionarnos en el Panel de Blogger --- Diseño --- Edición HTML ---- Expandir artilugios y buscamos (CTRL+F) el código ]]> y antes de esa etiqueta pegar el siguiente código:


.post-title {

text-shadow: #6374AB 10px -10px 3px;

}


Ahora ya podemos elegir el texto que queremos que salga con efecto 'Sombra', ya sea en un titulo de entrada como en un texto de nuestra entrada con el siguiente código:


<span style="text-shadow: #6374AB 10px -10px 3px;">Aquí va tu texto</span>


Los códigos para personalizan son de la siguiente manera:
  • 'Rojo' es para la eleccion de color de la sombra que veremos detrás del texto.
  • 'Naranja' es para elegir la distancia entre la primera letra del texto de la sombra.
  • 'Verde' es para elegir la distancia entre el texto y la lejanía hacia arriba de la sombra.
  • 'Azul' es para darle mayor densidad al efecto 'sombra' cuanto mas alto sea el valor mas se difuminara la sombra.
  • 'Bordo/Violeta' es el espacio donde debemos colocar el texto que deseamos contenga el efecto de sombra.
Para que el efecto se pueda visualizar correctamente se debe configurar en los dos códigos, en el que colocamos en el código HTML de nuestra plantilla y el del texto de titulo o entrada, de modo que sean igual, de la forma contraria el efecto no se podrá realizar correctamente.


  • rss
  • Del.icio.us
  • Digg
  • Twitter
  • StumbleUpon
  • Reddit
  • Share this on Technorati
  • Post this to Myspace
  • Share this on Blinklist
  • Submit this to DesignFloat
 
Design by pedro el escamoso