Mengenal CSS3 Gradient

Hallo semua, hari ini saya akan berbagi ilmu lagi nih tentang CSS3 jika sobat belum tau apa itu CSS3 setelah ini saya akan post apa itu CSS3 manfaatnya dan apa kegunaannya. Singkat waktu, saya akan mengenalkan sobat CSS3 Gradient.

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.

Posted by Unknown on Jumat, 21 Agustus 2015 - Rating: 4.5

Title : Mengenal CSS3 Gradient
Description : Hallo semua, hari ini saya akan berbagi ilmu lagi nih tentang CSS3 jika sobat belum tau apa itu CSS3 setelah ini saya akan post apa itu CS...

Share to

Facebook Twitter