CSS3 : -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 gradien linear

It is better to stir up a question without deciding it, than to decide it without stirring it up. Joseph Joubert

-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 gradien linear

Last Modif at July 8th, 2011

Hay sobat blogger, aga kareba? ok ok aja kan?
belakangan ini indaam.net 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, saya juga harus nyelesaiin salah satu theme wordpress saya.
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

background:-moz-linear-gradient( top, #eee, #222 )
background:-moz-linear-gradient( left, #eee, #222 )
background:-moz-linear-gradient( right, #eee, #222 )
background:-moz-linear-gradient( bottom, #eee, #222 )
background:-moz-linear-gradient( /*bottom*/90deg, red, black )
background:-moz-linear-gradient( /*left*/180deg, red, black )
background:-moz-linear-gradient( /*top*/270deg, red, black )
background:-moz-linear-gradient( /*left*//*0deg*/360deg, red, black )
background:-moz-linear-gradient( top, #ddd 0%, #aaa 25%, #444 50%, #333 75%, #222 100% )
background:-moz-linear-gradient( left, #fff 0%, #aaa 5%, #000 50%, #aaa 95%, #fff 100% )

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

background: -moz-linear-gradient(left, red, blue, green, pink);

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

background: -moz-linear-gradient(
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://www.indaam.net" name="author"/>
<meta http-equiv="refresh" content="320;url=http://www.indaam.net"/>
<style type="text/css">
/*
CREATED BY :
name : Indam
website : http://www.indaam.net
facebook : http://facebook.com/indaam
twitter : http://twitter.com/indaam
email : indaam[at]gmail.com
*/
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://www.indaam.net' target='blank' title='Indam Site'>Indam Site</a></span>
<!-- regards
http://www.indaam.net -->
</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.

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

One thought on “CSS3 : -moz-linear-gradient”

  1. Rhian says:

    thanks man….

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-