CSS3 Linear Gradients
Dalam FireFox 3.6, gradien saat ini hanya dapat diterapkan untuk suatu elemen "background-image".
Berikut ini Syntax untuk CSS3 Gradien Linear (Ada sedikit perbedaan antara Firefox dan Safari / versi Chrome).
-moz-linear-gradient(<point> || <angle>, color-stops) /*Firefox Linear gradients*/-webkit-gradient(linear, <point>, color-stops) /*Safari, Chrome Linear gradients*/Keterangan:
- Point or angle: ini digunakan untuk menentukan titik awal dari gradien. Nilainya bisa persentase (%), dalam pixel, atau " left "," center ", atau" right "untuk horizontal dan" top "," center ", atau" bottom "untuk penentuan posisi vertikal. Jika posisi horizontal atau vertikal tidak ditentukan, nilai defaultnya adalah " center ", atau 50%. Di Firefox, nilai-nilai sudut juga diterima, seperti 45deg.
- Color-stops: Warna yang menentukan di mana gradien harus transisi "ke dan dari". Jika lebih dari dua warna yang ditentukan dengan tidak ada nilai berhenti untuk setiap warna, gradien akan transisi dari satu ke yang berikutnya merata sampai warna menghentikannya dititik akhir.
.:Dalam Safari, Color-stops sintaks:
color-stop(value, color). Nilai Stop baik persentase (0 sampai 100%) atau nilai panjang (0 sampai 1,0), atau from(color) dan to(color). Keduanya adalah merupakan fungsi singkat setara dengan color-stop(0, color) dan color-stop(1.0, color).Perbedaan besar antara Firefox dan Safari adalah bahwa Firefox menggunakan system "titik dan sudut", sementara Safari menggunakan system "titik ke titik" dalam menerapkan gradien.
Contoh adalah cara terbaik untuk belajar, berikut ini contoh CSS3 Linear Gradients:
1. Left to Right Gradient
background: -moz-linear-gradient(left, #00abeb, #fff);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));
2. Right to Left Gradient
background: -moz-linear-gradient(right, #00abeb, #fff);
background: -webkit-gradient(linear, right center, left center, from(#00abeb), to(#fff));
background: -webkit-gradient(linear, right center, left center, from(#00abeb), to(#fff));
3. Top to Bottom Gradient
background: -moz-linear-gradient(top, #00abeb, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));
background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));
4. Bottom to Top Gradient
background: -moz-linear-gradient(bottom, #00abeb, #fff);
background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff));
background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff));
5. Upper-Left to Lower-Right Gradient
background: -moz-linear-gradient(left top 315deg, #00abeb, #fff);
background: -webkit-gradient(linear, left top, right bottom, from(#00abeb), to(#fff));
background: -webkit-gradient(linear, left top, right bottom, from(#00abeb), to(#fff));
6. Upper-Right to Lower-Left Gradient
background: -moz-linear-gradient(right top 225deg, #00abeb, #fff);
background: -webkit-gradient(linear, right top, left bottom, from(#00abeb), to(#fff));
background: -webkit-gradient(linear, right top, left bottom, from(#00abeb), to(#fff));
7. Left to Right Stopping Short Gradient
Blue runs from 0 thru 45% of DIV. Remainder is White Gradient.background: -moz-linear-gradient(left, #00abeb, #fff 45%);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), color-stop(45%, #fff));
background: -webkit-gradient(linear, left center, right center, from(#00abeb), color-stop(45%, #fff));
8. Upper-Left to Lower-Right Sunshine Gradient
Orange runs from 0 thru 30% of DIV. Yellow from 30% to 40%. Remainder is White Gradient.background: -moz-linear-gradient(left top 315deg, orange, yellow 30%, white 40%);
background: -webkit-gradient(linear, left top, right bottom, from(orange), color-stop(30%, yellow), color-stop(40%, white));
background: -webkit-gradient(linear, left top, right bottom, from(orange), color-stop(30%, yellow), color-stop(40%, white));
9. Top to Bottom Plateau Gradient.
Fades evenly from Light Blue to Medium Blue to Dark Blue, then Medium Blue and finally Light Blue.background: -moz-linear-gradient(center top, #b8d8f2, #92bde0 25%, #3282c2 50%, #92bde0 75%, #b8d8f2);
background: -webkit-gradient(linear, center top, center bottom, from(#b8d8f2), color-stop(25%, #92bde0), color-stop(50%, #3282c2), color-stop(75%, #92bde0), to(#b8d8f2));
background: -webkit-gradient(linear, center top, center bottom, from(#b8d8f2), color-stop(25%, #92bde0), color-stop(50%, #3282c2), color-stop(75%, #92bde0), to(#b8d8f2));
10. Left to Right Rainbow Gradient
Fades evenly between the 7 colors of the rainbow.background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet));
background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet));
Mengintegrasikan CSS3 gradients dengan halaman yang ada
Jangan hanya karena CSS3 gradients belum didukung secara luas, bukan berarti anda tidak bisa mulai mengambil manfaat dari ini semua. Browser yang tidak mendukung CSS gradients akan default dengan gambarnya, sementara mereka juga dapat menggunakan versi CSS, yang lebih ringan dan efisien:
.gradient{
background: url(gradient.gif) top left repeat-y; /*fall back gradient image*/
background: -moz-linear-gradient(left, #00abeb, #fff) ;
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));
}
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon