Sunday, 10 November 2013
Sebelum ada teknologi CSS3, untuk membuat efek gradasi warna para desainer web menambahkan gambar pada website tersebut untuk mendapatkan efek tersebut. Karena harus menambahkan file berupa gambar maka performa website saat dimuat browser menjadi lebih berat. Akan tetapi seiring berjalannya waktu sekarang dengan adanya teknik CSS3 terbaru, sobat bisa membuat efek warna gradasi hanya dengan sedikit menambahkan kode pada CSS yang cukup satu baris saja. Berikut syntax CSSnya.
background:-webkit-linear-gradient(arah, warna awal, warna akhir);Warna gradient ini berupa blok warna maka dari itu teknik ini diterapkan pada property background. Karena teknik gradient pada CSS versi yang ketiga ini masih termasuk baru dan bersifat eksperimental maka untuk memakai teknik ini pada browser chrome versi 22 yang penulis pakai harus menggunakan prefix atau awalan -webkit- pada nilai linear gradient. Prefix webkit juga diaplikasikan pada browser. Untuk melihat teknik Gradient ini dapat dlihat juga dari browser dengan berbagai prefix berikut keterangan prefix untuk setiap browser.
- Untuk browser Mozila Firefox tambahkan awalan -moz-
- Browser Opera menggunakan prefix -o-
- Sedangkan untuk Internet Explorer versi 10 menggunakan prefix -ms-
Sedikit penjelasan, untuk arah adalah arah dari gradient tersebut, apakah dari atas ke bawah atau top, dari samping kiri ke kanan atau left, dan juga dapat diisi dengan angka sudut dari 0 derajat sampai dengan 360 derajat.
Warna awal yaitu warna permulaan gradient dibuat dan warna akhir adalah warna ujung untuk gradient.
Berikut Contoh CSS3 Gradient
Contoh Gradient 1
Contoh Gradient 2
Contoh Gradient 3
Contoh Gradient 4
Contoh Gradient 5
Sobat bisa lihat contoh diatas jika beberapa efek gradient tidak terlihat berarti versi chrome sobat masih versi lama. Agar efek CSS3 ini dapat dilihat sobat perlu Chrome versi terbaru untuk mendapatkan chrome versi terbaru sobat bisa masuk https://www.google.com/intl/en/chrome/
Berikut Penerapan CSS3 Gradient
CSS
- Gradient 1
.gradient1{
background:-webkit-linear-gradient(top, black, white);
background:-moz-linear-gradient(top, black, white);
background:-o-linear-gradient(top, black, white);
background:-ms-linear-gradient(top, black, white);}
- Gradient 2
.gradient2{
background:-webkit-linear-gradient(bottom, black, white);
background:-moz-linear-gradient(bottom, black, white);
background:-o-linear-gradient(bottom, black, white);
background:-ms-linear-gradient(bottom, black, white);}
- Gradient 3
.gradient3{
background:-webkit-linear-gradient(left, black, white);
background:-moz-linear-gradient(left, black, white);
background:-o-linear-gradient(left, black, white);
background:-ms-linear-gradient(left, black, white);}
- Gradient 4
.gradient4{
background:-webkit-linear-gradient(right, black, white);
background:-moz-linear-gradient(right, black, white);
background:-o-linear-gradient(right, black, white);
background:-ms-linear-gradient(right, black, white);}
- Gradient 5
.gradient5{
background:-webkit-linear-gradient(60deg, black, white);
background:-moz-linear-gradient(60deg, black, white);
background:-o-linear-gradient(60deg, black, white);
background:-ms-linear-gradient(60deg, black, white);}
HTML
- Gradient 1
<div class="gradient1">
Contoh Gradient 1</div>
- Gradient 2
<div class="gradient2">
Contoh Gradient 2</div>
- Gradient 3
<div class="gradient3">
Contoh Gradient 3</div>
- Gradient 4
<div class="gradient4">
Contoh Gradient 4</div>
- Gradient 5
<div class="gradient5">
Contoh Gradient 5</div>
Untuk mencobanya saya sarankan menggunakan Notepad++ untuk download sobat bisa menuju http://notepad-plus-plus.org/
Sekian artikel yang dapat saya sampaikan hari ini semoga bermanfaat bagi sobat ^_^ selamat berkarya dan mencoba, Semoga Sukses.
Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
Konvert KodeMember AktifJoin This Blog