belakangan ini Mand4rt seperti tewas dari dunia perblogan, ya bagaimana tidak kalo posting terakhirnya hampir sebulan yang lalu hahaha ‘sorry ya konco, sedikit sibuk soalnya, selain urusan offline.
well, kali ini kita akan sharing tentang -moz-linear-gradient.
Apa itu ‘-moz-linear-gradient’?
-moz-linear-gradient adalah value untuk browser yang ber-engine layout Gecko(firefox), jadi untuk membaca tulisan ini sobat wajib menggunakan firefox, minimal versi 3.6 sedangkan fungsi dari -moz-linear-gradient adalah untuk membuat gradient linear, contohnya sepeti ini
Sintaks -moz-linear-gradient
sinyak ini adalah aturan baku yang tidak bisa diubah, kecuali value color dan posisi, untuk valuenya seperti ini
background: -moz-linear-gradient(posisi-memulai, warna, warna, warna-lagi, warna-lagi);
contoh
keterangan :
- Dimulai dengan
background: -moz-linear-gradient( - lalu posisi memulai, pilihanya antara lain :
top, right, bottom, left‘pilih satu’[beserta komanya] - setelah itu masukan warna gradient, misal
red, blue, black, white, kode hex. Disini kita bisa memasukan banyak warna, dan setiap warna dipisahkan dengan (,)[koma]. - terakhir ditutup dengan
)[tutup kurung] - selesai
keterangan tambahan :
kita juga bisa mengatur jarak warna gradient, misal seperti ini
background: -moz-linear-gradient(
left,
white 0%,/* dimulai dengan putih 100% */
red 50%,/* berhenti di 50% dengan warna red atau merah, dan memulai lagi dengan warna merah dari 50% */
black 100%) /* berhenti denga warna black hitam, bersaran % itu tergantung dari lebar elemant yang kita buat, */
dan jika disingkat seperti ini
background: -moz-linear-gradient(
left,
white ,
red 50%,
black )
Jadinya seperti ini
left,
white ,
red 50%,
black )
Contoh -moz-linear-gradient untuk belajar
silakan copy markup berikut lalu save dengan format *html, silakan diedit untuk belajar
<html>
<head>
<title>CSS3 : -moz-linear-gradient</title>
<meta content="indam url:http://haekalfiqri2.blogspot.com" name="author"/>
<meta http-equiv="refresh" content="320;url=http://haekalfiqri2.blogspot.com"/>
<style type="text/css">
body{
width:80%;
margin:30px auto;
}
.kotak-gradient1,
.kotak-gradient2,
.kotak-gradient3,
.kotak-gradient4,
.kotak-gradient5,
.kotak-gradient6,
.kotak-gradient7,
.kotak-gradient8,
.kotak-gradient9,
.kotak-gradient10{
color:white;
clear:both;
margin:10px auto;
font:normal 15px courier;
}
.kotak-gradient1{
min-height:50px;
min-width:500px;
background:-moz-linear-gradient(
top,
#eee,
#222
)
}
.kotak-gradient2{
min-height:50px;
min-width:500px;
background:-moz-linear-gradient(
left,
#eee,
#222
)
}
.kotak-gradient3{
min-height:50px;
min-width:500px;
background:-moz-linear-gradient(
right,
#eee,
#222
)
}
.kotak-gradient4{
min-height:50px;
min-width:500px;
background:-moz-linear-gradient(
bottom,
#eee,
#222
)
}
.kotak-gradient5{
height:100px;
width:250px;
background:-moz-linear-gradient(
/*bottom*/90deg,
red,
black
)
}
.kotak-gradient6{
height:100px;
width:250px;
background:-moz-linear-gradient(
/*left*/180deg,
red,
black
)
}
.kotak-gradient7{
height:100px;
width:250px;
background:-moz-linear-gradient(
/*top*/270deg,
red,
black
)
}
.kotak-gradient8{
height:100px;
width:250px;
background:-moz-linear-gradient(
/*left*//*0deg*/360deg,
red,
black
)
}
.kotak-gradient9{
height:50px;
width:450px;
background:-moz-linear-gradient(
top,
#ddd 0%,
#aaa 25%,
#444 50%,
#333 75%,
#222 100%
)
}
.kotak-gradient10{
height:250px;
width:450px;
background:-moz-linear-gradient(
left,
#fff 0%,
#aaa 5%,
#000 50%,
#aaa 95%,
#fff 100%
)
}
</style>
</head>
<body>
<div class='kotak-gradient1'>background:-moz-linear-gradient(
top,
#eee,
#222
)</div>
<div class='kotak-gradient2'>background:-moz-linear-gradient(
left,
#eee,
#222
)</div>
<div class='kotak-gradient3'>background:-moz-linear-gradient(
right,
#eee,
#222
)</div>
<div class='kotak-gradient4'>background:-moz-linear-gradient(
bottom,
#eee,
#222
)</div>
<div class='kotak-gradient5'>background:-moz-linear-gradient(
/*bottom*/90deg,
red,
black
)</div>
<div class='kotak-gradient6'>background:-moz-linear-gradient(
/*left*/180deg,
red,
black
)</div>
<div class='kotak-gradient7'>background:-moz-linear-gradient(
/*top*/270deg,
red,
black
)</div>
<div class='kotak-gradient8'>background:-moz-linear-gradient(
/*left*//*0deg*/360deg,
red,
black
)</div>
<div class='kotak-gradient9'>background:-moz-linear-gradient(
top,
#ddd 0%,
#aaa 25%,
#444 50%,
#333 75%,
#222 100%
)</div>
<div class='kotak-gradient10'>background:-moz-linear-gradient(
left,
#fff 0%,
#aaa 5%,
#000 50%,
#aaa 95%,
#fff 100%
)</div>
<span style='position:fixed;bottom:3%;right:3%;display:block:margin:0;font:italic bold 120% "comic sans ms";'>Original Source Code by <a style='text-decoration:none;color:red;' href='http://haekalfiqri2.blogspot.com' target='blank' title='Mand4rt'>Indam Site</a></span>
<!-- regards
http://haekalfiqri2.blogspot.com -->
</body>
</html>Catatan :
sebenarnya di webkit(chrome, safari) dan IE6, 7 dan 8 juga sudah didukung gradient ini hanya saja sintaksnya berbeda, jadi akan kita sambung dilain waktu. Jika ada yang ingin ditambahkan silakan tinggalkan komantar, semoga bermanfaat.
Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
8 Komentar