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