Ini Dia Rahasia CSS yang Mungkin Belum Anda Tahu
Beberapa trik sederhana ini, barangkali akan membuat Anda bergumam: “Edan, kok bisa ya aku nggak tau rahasia ini sebelumnya?” 
Rahasia #1: !important
Tahukah Anda bahwa IE 6 (*swt*) mengabaikan property !important pada setiap rule CSS yang Anda buat? Oleh karena itu, trik !important ini bisa kita pakai untuk mengakali IE 6 (*swt* lagi) dalam merender website Anda. Jadi misalkan Anda memiliki rule sebagai berikut:
body {
background: #CCCCCC !important;
background: #000;
}
Maka setiap browser selain IE 6 (*swt* 3x) akan menggunakan warna background #CCCCCC.
Rahasia #2: border
Tahukah Anda bagaimana sifat dasar si border ini? Tada…….
Ketebalan border secara default adalah ‘medium’: sekitar 3-4px, dan warnanya akan mengikuti warna content di dalam elemen yang memiliki attribut border ini. Jadi jika Anda ingin menggunakan border solid setebal 3 pixel dengan warna sesuai dengan isi di dalamnya, maka Anda hanya perlu menambahkan:
border: solid;
Conto:
#container {
background: #f0f0f0;
color: #333333;
border: solid;
}
maka border yang muncul akan berlaku sama dengan misalnya Anda menuliskan:
border: solid 3px #333333
Rahasia #3: vertical-align
Atribut ini sudah tidak mungkin lagi kita pakai dalam CSS, karena memang sudah deprecated, sudah usang. 
Tapi bagaimana caranya jika kita ingin membuat teks, gambar, atau elemen lainnya berada di tengah parent element-nya secara vertikal. Cekidot:
1. Pertama, kita wajib memberikan atribut height pada parent element-nya.
2. Line-height. Yap, triknya di sini, dan aturannya sebagai berikut (matematis dikit sih):
- Jika Anda ingin teks berada tepat di tengah secara vertikal, maka line-height harus sama dengan height parent element-nya.
- Jika Anda ingin teks berada pada bottom, maka line-height harus memiliki besar sama dengan 95% dari dua kali height parent element-nya.
Halah, ribet? Enggak kok, contoh:
Ini vertically aligned:
#container {
height: 500px;
line-height: 500px;
}
Ini bottom aligned:
#container {
height:500px;
line-height:950px /*95% x 2 x 500 */
}
Rahasia #4: Overflow
Ini dia trik yang saya yakin akan membantu kebanyakan para web designer. Mujarab deh untuk sekedar menghilangkan stres, hehe
Trik ini digunakan untuk menyembunyikan scrollbar pada browser. Overflow-x untuk menyembunyikan horizontal scrollbar. Dan overflow-y untuk menyembunyikan vertical scrollbar. Paling efektif jika atribut ini dipakai untuk elemen body. Saya sudah mencobanya di sini dengan menggunakan atribut overflow-x:
body {
overflow-x: hidden;
}
Apakah anda sudah mengetahui hal ini sebelumnya? Ada yang kurang jelas? Silahkan berbagi disini.
picture is courtesy of dezzain.com
Web designer dan front-end developer muda yang belum terlalu jelas dari spesies mana dia berasal. Pada sebuah eksperimen, dia mampu bertahan di dalam air selama 323,007645 detik, dan bisa melayang di udara dengan ketinggian mencapai 15,23 meter. Karena sering berpindah habitat, kini ia memutuskan untuk berada di darat dan menekuni dunia Web Design, HTML5, CSS, dan jQuery.
[...] Ini Dia Rahasia CSS yang Mungkin Belum Anda Tahu [...]
saya benar2 belum tahu tentang ini! anda membuka mata saya
Mas makasih turtornya y, sy mau tanya gmn caranya buat menu sprti yg diatas itu yg sharing is caring yg ada gbrnya itu, kl di arahkan pke mouse bs naik turun ajarin donk ,gmn kodenya ?
makasih….
@nocturnal bisa pake plugin namanya sexy bookmark
simple, tapi sangat membuka mata tentang CSS. terima kasih tutorialnya.
Edan, kok bisa ya aku nggak tau rahasia ini sebelumnya?
Overflow mau di coba dulu nih