Ejemplos de degradados en CSS3
[include slug="includes/ad1"]
Aqui te traigo algunos ejemplos de degredados en CSS3 que te ayudarán a entenderlos y crear los tuyos propios, pero si no tienes mucho tiempo para entenderlos;tambien te traigo esta herramienta que te ayudará a crearlos de forma rapida http://www.colorzilla.com/gradient-editor/
HTML base
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Colores</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="box"></div> </body> </html>
Ejemplo N° 01
#box{
width:500px;
height:500px;
background: -webkit-linear-gradient(red,yellow);
background: -moz-linear-gradient(red,yellow);
background: -ms-linear-gradient(red,yellow);
background: -o-linear-gradient(red,yellow);
}
Ejemplo N° 02
#box{
width:500px;
height:500px;
background: -webkit-linear-gradient(left,red,yellow,red);
background: -moz-linear-gradient(left,red,yellow,red);
background: -ms-linear-gradient(left,red,yellow,red);
background: -o-linear-gradient(left,red,yellow,red);
}
Resultado
Escala de grises
#box{
width:500px;
height:500px;
background: -webkit-linear-gradient(#000,#fff);
background: -moz-linear-gradient(#000,#fff);
background: -ms-linear-gradient(#000,#fff);
background: -o-linear-gradient(#000,#fff);
}
Recent Posts
