Cara membuat paduan warna menggunakan CSS3 dengan Linear-gradients
Contoh berikut menunjukkan bagaimana cara membuat sebuah linear gradients atau paduan warna yang bisa menambah suatu keindahan pada halaman anda.
0deg
90deg
180deg
-90deg
code CSS-nya seperti dibawah ini dan kemudian anda bisa mengedit sendiri Note: Anda dapat memilih dan merubah 0deg,90deg dst sesuai selera anda untuk mengubah jenis paduan warna
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(0deg, red, blue);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(0deg, red, blue);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, red, blue);
/* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, red, blue);
/* Standard syntax (must be last) */
}
#grad2 {
height: 100px;
background: -webkit-linear-gradient(90deg, red, blue);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, red, blue);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, red, blue);
/* For Firefox 3.6 to 15 */
background: linear-gradient(90deg, red, blue);
/* Standard syntax (must be last) */
}
#grad3 {
height: 100px;
background: -webkit-linear-gradient(180deg, red, blue);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, blue);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue);
/* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue);
/* Standard syntax (must be last) */
}
#grad4 {
height: 100px;
background: -webkit-linear-gradient(-90deg, red, blue);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, red, blue);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, blue);
/* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, blue);
/* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad1" style="color: white; text-align: center;">
0deg
</div>
<div id="grad2" style="color: white; text-align: center;">
90deg
</div>
<div id="grad3" style="color: white; text-align: center;">
180deg
</div>
<div id="grad4" style="color: white; text-align: center;">
-90deg
</div>
eEe.School.com <br />
<strong>Note:</strong>
Anda dapat memilih dan merubah 0deg,90deg,180deg dst.
sesuai selera anda<br />
<strong>BY&
/strong>eEe.School.blogspot.com </strong><br />
</body>
</html>
0 komentar:
Post a Comment