HASANONTA - Setelah sebelumnya kita belajar bagaimana cara membuat efek zoom hover pada gambar dengan CSS3, kali ini kita akan kembali bermain-main dengan CSS3 yaitu Bagaimana cara membuat gradient warna atau warna dengan efek gradasi.
Dalam CSS3 ada 2 jenis warna gradasi yang bisa dibuat yaitu, linear gradient dan radial gradient. Perbedaanya yaitu linear gradient merupakan campuran dua warna yang saling berdampingan dan mempunyai efek seolah-olah keduanya menyatu baik keatas, kebawar, ataupun kesamping. Sedangkan radial gradient Pencampurang dua warna yang memiliki pusat tengah, jadi mempunyai efek seperti melingkar. Untuk lebih jelasnya akan saya beri contoh :
index.html
<html>
<head>
<title>HasanOnta</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Membuat warna gradient dengan CSS3 | HasanOnta</h1>
<div class="ketengah">
<div class="kotak gradient1"></div>
<div class="kotak gradient2"></div>
<div class="kotak gradient3"></div>
<div class="kotak gradient4"></div>
</div>
</body>
</html>
style.css
body{
background: #35A9DB;
font-family: roboto;
text-align: center;
}
h1{
color: #fff;
}
.ketengah{
margin: 10px auto;
width: 1150px;
}
.kotak{
background: blue;
width: 500px;
float: left;
height: 250px;
margin: 30px;
}
.gradient1 {
background: linear-gradient(red, green); /* Standard syntax */
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
}
.gradient2 {
background: linear-gradient(to right, red , yellow, green); /* Standard syntax */
background: -webkit-linear-gradient(left, red , yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow, green); /* For Firefox 3.6 to 15 */
}
.gradient3 {
background: radial-gradient(red, yellow, green); /* Standard syntax */
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
}
.gradient4 {
background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
}
Output :
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar