Fondo degradado con CSS3
- Detalles
- Categoría: Programación
- Última actualización el Jueves, 26 Mayo 2011 00:33
- Escrito por cybnet
- Visto: 4935
Los navegadores que soportan css3 o aquellos con sus propias herramientas (como -webkit- de Opera o -moz- de Firefox) pueden generar un color en gradiente, útil por ejemplo para crear un fondo degradado.
La solución clásica era usar una imagen de fondo como explica en el post crear un fondo degradado con css. Con la instrucción de gradiente en css3 se puede seguir especificando la imagen de fondo para aquellos navegadores que no soportan css3 y, buenas noticias, los navegadores que soportan css3 no descargarán la imagen!! Lo que se traduce en menos solicitudes http, menos peso de descarga y, por tanto, la velocidad de carga de tu web será un poco más rápida.
Veamos unos ejemplos
#degradado1 {
height: 100px;
background-image: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7) !important; /* Firefox */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)) !important; /* Webkit: Chrome, Opera,... */
background-image: url(images/linear_bg_1.png); /* Navegadores sin CSS3 */
background-color: #1a82f7; /* Navegadores sin CSS3 */
background-image: linear-gradient(left , #1a82f7, #2F2727 ); /* CSS3 puro */
}
#degradado2 {
height: 100px;
background-color: #1a82f7; /* Navegadores sin CSS3 *
background-image: url(images/linear_bg_2.png); /* Navegadores sin CSS3 */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7); /* Firefox */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); /* Webkit: Chrome, Opera,... */
background-image: linear-gradient(top , #1a82f7, #2F2727 ); /* CSS3 puro */
}
#degradado-radial {
width: 100px;
height: 100px;
background-image: url(images/radial_bg.png); /* Navegadores sin CSS3 */
background-position: center center; /* Navegadores sin CSS3 */
background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #2F2727 0%, #1a82f7 100%); /* Firefox */
background-image: -webkit-gradient(radial, center center, 10, center center, 80, from(#1a82f7), to(#2F2727)); /* Webkit: Chrome, Opera,... */
background-image: radial-gradient(center center, circle closest-side, #1a82f7, #2F272); /* CSS3 puro */
}Os dejo herramientas en las que podéis elegir colores, posiciones, y todas las opciones para crear un fondo degradado con CSS3, tanto lineal como radial:
Nota: en el momento de escribir este post lineal-gradient y radial-gradient no están totalmente implementados en CSS3 y por ello es recomendable utilizar siempre las versiones moz y webkit para asegurar la compatibilidad.
RSS
NO me arrepiento de aver visto este post me sirvio de mucho 
Citando "mola" : degradao? jaja mola
SI
Jajajajaja!!! Soy andaluz y a veces se me escapan palabras escritas como las pronunciamos por aquí. Ahora sí pone DEGRADADO DE FONDO.Ya de paso he aprovechado para actualizar el post con algunos cambios en el código CSS y unos links muy interesantes a herramientas que generan el código CSS3 con las opciones que eligas para el degradado de fondo (colores, posición, etc).
degradao? jaja mola
Perfil
Artículos
RSS
Google +1