12.10.13

Efecto sombra para títulos de las entradas Blogger


Para darle un efecto de sombra a los títulos de las entradas vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

  1. Localizamos la siguiente etiqueta, poniéndola dentro del rectángulo de búsqueda (search):

    2. ]]></b:skin>

  2. Inmediatamente antes pegamos el siguiente código:

    3. .post-title {
      text-shadow: #58acfa 6px 6px 2px;
    }

  3. Vista previa ► Guardar plantilla

Análisis del código:

  • 58acfa: es el código hexadecimal correspondiente al color asignado a la sombra. Le ponemos el nuéstro (códigos hexadecimales aquí).
  • 6px: asigna un margen vertical entre la sombra y el texto; a mayor número de pixeles más distancia entre la sombra y el texto. Anteponiéndole signo menos la sombra se proyectará a la izquierda del texto, sin signo, a la derecha.
  • 6px: asigna un margen horizontal entre la sombra y el texto; a mayor número de pixeles más distancia entre la sombra y el texto. Anteponiéndole signo menos la sombra se proyectará encima del texto, sin signo, debajo.
  • 2px: le asigna un aspecto difuminado (diluído, desvanecido, desdibujado) a la sombra; a mayor número de pixeles más difuminado (menos nitidez).

Con el anterior código los títulos de las entradas se verán así:


Otras formas de implementar el efecto sombra

Algunas plantillas, como la Simple, tienen integradas, en un mismo código CSS, las propiedades de los títulos de las entradas y los títulos de los comentarios; de ahí que si agregamos a ese código las propiedades que asignan el efecto sombra, adquirirán ese efecto tanto los unos como los otros. Veamos:

Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

Localizamos el código antes mencionado poniendo, en el cuadro de búsqueda (search), una línea del mismo:

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

...y le agregamos la línea con las propiedades que asignan el efecto sombra, debiendo al código quedar así:

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
  text-shadow: #58acfa 6px 6px 2px;
}

Otras plantillas, como la Awesome inc., también tienen integradas, en un mismo código CSS, las propiedades de los títulos de las entradas y los títulos de los comentarios, con la diferencia que la etiqueta h4, asignada a los títulos de los comentarios puede ser usada para poner el efecto sombra a cualquier texto que queramos poner, con ese efecto, en cualquier entrada (en el editor HTML) o en gadgets HTML/JavaScript, teniendo en cuenta que los caracteres de esos textos tendrán el mismo tamaño que los de los títulos. Ese código es el siguiente:

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

Para poner el efecto sombra le agregamos la misma línea que agregamos al código anterior.

Y para darles efecto sombra a textos en una entrada o en un gadget HTML/JavaScript, utilizando la etiqueta h4, debemos encerrar esos textos entre las etiquetas, así:

<h4>Aquí el texto</h4>


Efecto sombra para textos con etiquetas <h>

Las etiquetas <h> son: <h1>...</h1>, <h2>...</h2>, <h3>...</h3>, <h4>...</h4>, <h5>...</h5> y <h6>...</h6>. A mayor número menor es el tamaño de los acracteres correspondientes al texto que encierran.

Habilitando en la plantilla el efecto sombra para las etiquetas <h> podemos poner, en entradas o en gadgets HTML/JavaScript, textos con ese efecto. Esa habilitación la hacemos así:

Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

Localizamos, poniéndola en el rectángulo de búsqueda, la siguiente etiqueta.

]]></b:skin>

...e inmediatamente antes pegamos el siguiete código:

h1, h2, h3, h4, h5, h6 {
  text-shadow: #58acfa 6px 6px 2px;
}

(Para modificar el formato del efecto sombra tenemos en cuenta el "Análisis del código" hecho al principio del tutorial).

Con el anterior código en la plantilla, cualquier texto en una entrada o en un gadget HTML/JavaScritp puesto dentro de una de las etiquetas <h>, adquirirá el efecto sombra.

Debemos tener en cuenta lo siguiente:

  • algunas etiquetas <h> asignan, dentro de la plantilla, formato a los diferentes títulos (de las entradas, de gadgets, de la sidebar, de los comentarios, etc.).
  • Habilitando el código con el efecto sombra para las etiquetas <h> ese efecto también lo adquirirán esos títulos.
  • También dentro de la plantilla algunas etiquetas <h> pueden tener un tamaño predeterminado diferente al que estas etiquetas asignan por defecto.

Los tamaños que las etiquetas <h> asignan por defecto son los siguientes:

<h1>Texto con efecto sombra</h1>:
<h2>Texto con efecto sombra</h2>:
<h3>Texto con efecto sombra</h3>:
<h4>Texto con efecto sombra</h4>:
<h5>Texto con efecto sombra</h5>:
<h6>Texto con efecto sombra</h6>:
Etiquetas: , , ,

2 comentarios :

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.

Suscribirse a: Enviar comentarios ( Atom )