Ejemplos de degradados en CSS3

 In 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

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Notice: Undefined index: quick_contact_gdpr_consent in /home/hcspmsoc/public_html/wp-content/themes/jupiter/views/footer/quick-contact.php on line 46

Notice: Undefined index: third_party_gdpr in /home/hcspmsoc/public_html/wp-content/themes/jupiter/framework/helpers/wp_footer.php on line 60