Tips dan Trik CSS3 Beserta contohnya

Pendahuluan

CSS (Cascading Style Sheet) merupakan salah satu bahasa pemrograman web yang berguna untuk mengendalikan beberapa elemen dalam sebuah web sehingga lebih terstruktur dan seragam. Pada umumnya, CSS digunakan untuk memformat tampilan halaman web yang dibuat dengan menggunakan HTML. Mungkin sebagian dari anda sudah mengetahui tentang CSS3 ini. Yups .. CSS3 merupakan update versi terbaru dari CSS versi sebelumnya yakni CSS2.

Keunggulan Penggunaan CSS3 :

Tampilan website lebih dinamis dan lebih ringan (lebih cepat aksesnya), dengan CSS3 anda dapat mengurangi penggunaan gambar dalam mendesain tampilan website anda.

Kelemahan Penggunaan CSS3 :

Sampai sekarang belum semua browser kompetibel dengan properti CSS3, khususnya browser versi lama. Hal ini tentunya menyulitkan kita, karena kita tidak dapat mengetahui browser yang dipakai pengunjung website kita.
Berikut tabel untuk mengetahui browser support terhadap terhadap properti CSS3 :

Properti	IE	Firefox	Chrome	Safari	Opera
Border-radius	No	-moz-	-webkit-	-webkit-	Yes
Box-shadow	No	-moz-	-webkit-	-webkit-	Yes
Border-image	No	-moz-	-webkit-	-webkit-	Yes
Bacground-size	No	-moz-	Yes	Yes	Yes
Bacground-origin	No	No	Yes	Yes	Yes
Text-shadow	Yes	Yes	Yes	Yes	Yes
Word-wrap	Yes	Yes	Yes	Yes	Yes
@font-face	Yes	Yes	Yes	Yes	Yes
2D transform: translate(), rotate(), scale(),skew(), matrix()	No	-moz-	-webkit-	-webkit-	-o-
3D transform: rotateX(), rotateY()	No	No	-webkit-	-webkit-	No
Transition	No	No	-webkit-	-webkit-	-o-
@keyframes	No	No	-webkit-	-webkit-	No
Animation	No	No	-webkit-	-webkit-	No
Coloumn-count	No	-moz-	-webkit-	-webkit-	No
Coloumn-gap	No	-moz-	-webkit-	-webkit-	No
Coloumn-rule	No	-moz-	-webkit-	-webkit-	No
Resize	No	No	Yes	Yes	No
Box-sizing	Yes	-moz-	-webkit-	-webkit-	Yes
Outline-offset	No	Yes	Yes	Yes	Yes

Untuk keterangan “yes” berarti browser support, jika keterangan “no” berarti browser tidak support, keterangan “–moz-“ pada awal properti. Misal anda menggunakan box-shadow:0px 0px 5px; agar properti disamping dapat diakses dalam browser Firefox, maka anda perlu menambahkannya menjadi –moz-box-shadow:0px 0px 5px; degitu pula dengan opera, safari dan chrome. Jadi, jika anda menginginkan menghasilkan tampilan terbaik pada semua browser, maka penulis menyarankan untuk mencantumkan pengulangan properti seperti contoh berikut:

box-shadow:0px 0px 5px; // properti dasar
–moz-box-shadow:0px 0px 5px; // agar support browser Firefox
–webkit-box-shadow:0px 0px 5px; // agar support Chrome dan Safari
–o-box-shadow:0px 0px 5px;  // agar support Opera

Contoh Penerapan CSS3 :
1.    Properti border-radius
2.    Properti gradient (panding)
3.    Properti box-shadow (panding)
4.    Properti text-shadow

Tweet