Membuat Border Gradasi dengan CSS 3

CSS 3 menyediakan fitur dalam membuat border dengan warna gradasi. Fitur ini merupakan bagian dari properti border pada CSS 3. Dengan begitu desain web yang kita buat akan terlihat lebih elegan dan menarik. Warna yang dihasilkan berupa warna yang memudar (gradient) baik gradasi gelap ke terang maupun dari terang ke gelap. Langkah yang digunakan yaitu dengan memberikan beberapa nilai warna untuk menciptakan efek gradasi. Efek ini hanya bisa dilihat pada web browser mozilla firefox.

Lihat Contoh berikut ini!

Berikut ini merupakan script CSS yang digunakan untuk membuat border gradasi.

border: 10px solid;
-moz-border-bottom-colors: #030 #060 #080 #0A0 #0B0 #0C0 #0d0 #0e0 #0f0 #0f2 #0f4 #0f6;
-moz-border-top-colors: #030 #060 #080 #0A0 #0B0 #0C0 #0d0 #0e0 #0f0 #0f2 #0f4 #0f6;
-moz-border-left-colors: #030 #060 #080 #0A0 #0B0 #0C0 #0d0 #0e0 #0f0 #0f2 #0f4 #0f6;
-moz-border-right-colors: #030 #060 #080 #0A0 #0B0 #0C0 #0d0 #0e0 #0f0 #0f2 #0f4 #0f6;
height: 200px;
width: 400px; 

Selamat Mencoba Kawan!!!
Ingat!!, efek gradasi tersebut hanya bisa digunakan pada browser mozilla firefox. Silahkan tuliskan komentar bila tutorial di atas kurang jelas dan berikanlah saran yang membangun.
Ayo belajar bersama kawan...

Artikel Terkait