24 noviembre 2010

Poner fondo gradiente en el título de la columna lateral en las nuevas plantillas

Ahora que estuve trabajando en el diseño de la plantilla Atheros, use fondos gradientes en los títulos de las columnas, usando una propiedad CSS3.

Es muy fácil de aplicarlo y no necesitarás usar una imagen, ahora es posible usarlos sin ningún inconveniente, ya que pueden ser visualizados en todos lo navegadores, gracias a un filtro disponible para Internet Explorer.

Así se veí la pantilla de prueba, antes de aplicar los gradienes:



Ventajas de esto:

  • No necesitas ingresar al código de tu plantilla y volverte loca(o) con tantos códigos
  • No necesitaras crear una imagen 
  • Destacarás el titulo de cada elemento de la columna(s) lateral(es) 
  • Podrás modificarlos cada vez que se te antoje, siguiendo los mismos pasos 
  • Verás los resultados mientras estés agregando los estilos 
  • Lo aplicarás de una manera rápida, sencilla y con bonitos resultados
    ¿Te gusta?,  entonces ¡manos a la obra! Para lograrlo vamos a aprovechar la existencia de este generador de gradientes, del cual ya estoy perdidamente enamorada, (que le vamos a hacer) y luego teniendo el código,  lo colocarás dentro de los estilos, las características o las propiedades (como lo quieras llamar) del título de la(s) columna(s).

    Nota: te recomemiendo eliminar las medidas de ancho y alto del gradiente en el generador.

    Cómo aplicarlo en las nuevas plantillas de Blogger


    Estuve inspeccionando el código de las plantillas nuevas, y en casi todas, no tienen estilos
    definidos específicamente para los títulos de las columnas laterales. Solamente los tienen en las etiquetas de título en general, y excepto en una que otra plantilla, donde los asignan como: .main-inner .widget h2 sin embargo han sido muy pocos los estilos añadidos, así que aprovecharemos para crear los propios a nuestro antojo.

    Veamos como lograrlo:

    Paso 1. Ve a este generador de gradientes y crea tu gradiente, puedes usar las bases que ya existen o crear el propio.


    Paso 2. Copia el código de tu gradiente (donde dice CSS) en el porta papeles.

    Paso 3. Ve Diseño►Diseñador de plantillas y luego selecciona la opción avanzado, después añadir CSS



    Paso 4. Agrega en el campo de añadir CSS, los estilos para los títulos de las columnas:

    .sidebar h2 {
    height: 32px; /* puedes cambiar el alto qu abarcará el fondo */
    line-height: 190%;  /* para centrar el texto con respecto al fondo*/
    padding-left: 5px; /* para separar un poco el texto desde la izquierda */
    }




    Ahí mismo, pega el código para agregar el gradiente, que obtuviste con el generador, quedaría parecido a esto:
    .sidebar h2 {
    height: 32px;
    line-height: 200%;
    padding-left: 5px;
    background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );
    }

    Aprovechando que estamos ahí, y que es muy sencillo crear texto hundido en los gradientes, agreagremos esto:
    text-shadow: 1px 1px 1px #eee; 


    Paso 5. Guarda los cambios, haciendo click en  APLICAR AL BLOG.

    Cómo aplicarlo a otras plantillas (viejitas de Blogger, de terceros, etc.)

    Harás lo mismo, con la diferencia de que tendrás que averiguar cómo está definido o identificado, el título de la(s) columna(s).

    Generalmente lo encuentras como:

    .sidebar h2, #ads_wrapper h2, siempre llevará la etiqueta h2.

    Artículos recomendados:

    Gracias por compartir tu comentario y hacernos saber tu opinión.