5 Teknik CSS 3 dengan JQuery

CSS 3 semakin berkembang dengan tambahan-tambahan fitur untuk membuat bagus tampilan website kita, disini saya menyajikan teknik baru dari CSS 3 ini dengan bantuan JQuery Framework yang merupakan kebutuhan wajib dari para web designer.

1. Create rounded corners

#box {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;
}

Code diatas akan menhasilkan rounded corner pada bagian atas kiri dan bawah kanan.

Code JQuery-nya : http://www.atblabs.com/jquery.corners.html

2. Border Image

Anda bisa lihat properti CSS 3 disini ->Border Images

Cara ini akan berhasil di implementasikan di FIrefox 3.1 dan rilis terakhir dari Opera dan Chrome, Tapi dengan menggunakan JQuery.borderImages.js akan bisa di baca di Firefox 2.*, Firefox 3, Firefox 3.1, Safari 3.*, Chrome 1.0, Opera 9.*, Opera 10 and IE7.

Code JQuery-nya : http://www.lrbabe.com/sdoms/borderImage/index.html

3. Multiple Background
CSS 3 mengijinkan untuk menempatkan beberapa gambar dalam satu elemen.

#kotak {
Background: url(atas.gif) top left no-repeat,
url(bawah.gif) bottom left no-repeat,
url(tengah.gif) left repeat-y;
}

Code JQuery-nya : Multiple Images with JQuery

4. Box Shadow and Text Shadow
Untuk menampilkan shadow yaitu dengan cara berikut

h3 { text-shadow: 2px 2px 2px #333; }

Code JQuery-nya : Box Shadow and Text Shadow

5. Transparency and Opacity

div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }

Untuk JQuery : Gradient