ccc

CSS3: Hacer degradado

background: -webkit-gradient(linear, 0 0, 0 100%, from(#c13a3d), to(#2c2c2c))
-----------------------------------------------
.degradVertical {
    height: 100px;
    background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, blue); /* Standard syntax (must be last) */
}
.degradHorizontal {
    height: 100px;
    background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red , blue); /* Standard syntax (must be last) */
}
.degradDiagonal {
    height: 200px;
    background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, red , blue); /* Standard syntax (must be last) */
}
.degradTransparente { /* con el 4º parámetro de rgba */
    height: 200px;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}

En el degradado se pueden poner tantos colores como se quiera, Ej:
-webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet)
-----------------------------------------------------
Más información en: http://www.w3schools.com/css/css3_gradients.asp

No hay comentarios:

Publicar un comentario