Hacktime

Que seria de la web sin este blog

Crear degradado con CSS

Posted by yaju en junio 4, 2007

Lo que aprende uno leyendo otros blogs ¿no?, pues si la verdad se aprende mucho principalmente de parte de Francisco y su blog Recursos Blog y Web (aunque mas chido suena “Blogyweb”). Leyendo algunos de sus pasados posts encuentro esta utilidad que me pareció estupenda y no me he resistido a contárselas: Degradado con CSS

Esta técnica se consigue utilizando un color de fondo y una imagen con degradado blanco a transparente, y a continuación te explicamos:

  • Creamos una clase que con el color de fondo que deseamos y una imagen con degradado de la siguiente forma (colocamos esto antes de ]]></b:skin> )

#degradado { /*ponemos las dimensiones del área de degradado*/
width:150px;
height:150px; /*Nos resuelve el problema de visualización del degradado en internet explorer, solo tienes que cambiar la ruta de tu imagen*/ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’degradado.png‘); /* Esta clase la creamos para que firefox ignore la corección de visualizacion del IE. */
}

.degradado[class] { /*Sigue la parte importante, seleccionamos la ubicación de nuestra imagen, su posición y como queremos se repita.*/
background:url(degradado.png) top left repeat-x;

}

  • Ahora sólo otorgas la clase “degradado” y selecciona el color de fondo, por ejemplo:

<div class=”degradado” style=”background-color: #33CCFF;” >
<p>Este texto tendra un degradado de fondo</p>
</div>

Nos quedaria algo como esto:

Este texto tendra un degradado de fondo

Este texto tendra un degradado de fondo

El resultado sera de acuerdo al degradado del fondo de la imagen, en un ZIP se encuentran 2 diferentes degradados y el ejemplo que te acabamos de presentar. Recuerda que de acuerdo al tamaño del fondo que necesites será la imagen. Espero que te sirva. CLICK AQUÍ PARA DESCARGAR.

Una respuesta to “Crear degradado con CSS”

  1. Luiz said

    Bastante interesante, yo lo hacia de otra forma, pero siempre es bueno conocer otras tecnicas. THx

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: