Como Hacer un Degradado con CSS
En la web existen miles de paginas que utilizan imagenes degradadas en su sitio, que crean con algun software de diseño.Ahora con este simple codigo aprenderemos a degradar una imagen con CSS,para esto necesitamos hacer una imagen en fireworks (de preferencia) con degradado alfa, y guardada con extencion .PNG (pondre un par de imagenes en descarga, si gustas solo seria cosa de que cambies el tamaño y la utilices)Bueno ahora si manos a la obra
HTML:
Nota: Puedes usar los divs que gustes pero no se te olvide llamara a la clase CSS
Y ahora el archivo CSS:
CSS:
-
.degradado {
-
width: 980px; height: 100px;
-
background-position:center;
-
-
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='degradado.png');
-
-
}
-
-
.degradado[class] {
-
background-image:url(degradado.png);
-
}
-
.degradado2{
-
width: 650px; height: 300px;
-
background-position:center;
-
-
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='degradado2.png');
-
}
-
-
.degradado2[class] {
-
background-image:url(degradado2.png);
-
}
width y height:Aqui es donde modificaremos el tamaño, para adaptarlo a nuestra imagen
Vota esta entrada:
There are 1 comment. Leave a comment!
¬ EduLopez
#2286 June 23rd, 2009 at 2:56 pm
Otra opción es solicitar los servicios de maquetadores y programadores web que conviertan los diseños psd, freehand, illustrator, etc en codigo xhtml/css, como es mi caso.
Y viceversa, los que nos dedicamos a maquetar y programar solicitar los servicios de diseñadores profesionales. Y así lo hago yo.
¡¡ Con la crisis hay que fomentar el empleo!!!