3 My favorite CSS3

Saya masih ingat benar tahun 2007-2008 banyak website yang menggunakan rounded-corner, saat itu CSS3 mungkin belom terdengar. para desainer menggunakan pendekatan rounded-corner image untuk menutupi sudut-sudut yang tidak melengkung.

It’s not as easy as writing 1 line of CSS, but now we can

Banyak yang sering terbatas dengan ukuran(width) yang terbatas karena image-nya statis, Untungnya para perancang standart di luar sana mengerti kebutuhan ini untuk kebutuhan desain yang lebih menarik dan juga lebih mudah. Sekarang kita dengan mudah menuliskan 1 line CSS seperti halnya mendefinisikan border sebuah elemen.

Internet explorer? ah you know who the villain isn’t

Bagaimana dengan Browser compatibility? Seperti biasa Internet Explorer selalu tertinggal. Tidak usah menyebutkan Internet Explorer6, bahkan 8 pun belum mensupport CSS3 ini, baru Internet Explorer mensupport CSS3. Sangat disayangkan semenjak Browser mobile seperti Dolphin(Android) dapat mensupportnya dengan baik. Sementara Mozilla Firefox, Webkit browser(Safari & Chrome), dan Opera sudah dapat menjalakan fasilitas ini dengan baik.

Mozilla firefox (untuk yang mempunyai versi < 4), didepan line CSS ditambahkan prefix “-moz-“, sementara untuk Chrome dan Safari untuk menanggulangi versi tua, dapat menggunakan prefix “-webkit-“.

Oke cukup penjelasannya, saya akan coba bahas beberapa modul CSS3 yang saya sukai untuk project keseharian saya:

1. border-radius

Border radius adalah yang saya bahas di atas, berfungsi untuk membuat rounded-corner. Syntaxnya sangat sederhana

/* for Mozila */
-moz-border-radius: [num]px;
/* for Webkit */
-webkit-border-radius: [num]px;

border-radius: [num]px;

Bagaimana apabila yang diinginkan sudut tertentu saja? There is another way

/* bottom-left radius */
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
/* bottom-right radius */
-moz-border-radius-bottomright : 5px;
border-bottom-right-radius: 5px;
/* top-left radius */
-moz-border-radius-topleft : 5px;
border-top-left-radius: 5px;

/* top-right radius */
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;

2. box-shadow

Sama dengan rounded border, syntax CSS3 ini akan membuat shadow disekeliling box

/* for mozilla */
-moz-box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]
/* for webkit */
-webkit-box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]

box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]

Example

3. Opacity

Agak jarang dipake tapi lumayan berguna dan mempermudah pekerjaan, berfungsi mengatur opacity sebuah element.

opacity:[0-1];

Derajat opacity antara 0 dan 1. Contoh:

<style>
.container_msg{
	background:url(wp-content/uploads/2012/01/css3-150x150.jpg);
	width:300px;
}
.the_box{
	background-color:#000;
	opacity:0.5;
	width:300px;
	padding:5px;
	border: solid 1px #000;
	color:#fff
}
</style>
<div class="container_msg">
	<div class="the_box">This is should be...</div>
</div>

Itulah 3 dari banyak CSS3 yang paling sering saya gunakan. Karena secara user yang menggunakan IE masih agak troublesome, tentinysa saya tidak menggunakan untuk bagian -bagian kritis, dan hanya sebagai kosmetik bukan seperti jaman CSS1 ke CSS2 yang ada sampai tata letak(Overflow, top, left, etc) yang membuat cukup kacaw layout apabila browser tidak mendukung seperti jaman sekitar 2006-an saat IE6 masih sebagian besar browser

Untuk mempelajari lebih jauh CSS3, Anda dapat belajar di CSS3.info, saya juga belajar dari web tersebut .

Popularity: 1% [?]