Blog

CSS3 adalah generasi penerus CSS yang ada sekarang (ver 2.1). Kelebihan CSS3 adalah tambahan beberapa fungsi yang menarik seperti dibawah ini

Borders
border-color
border-image
border-radius
box-shadow

Backgrounds
background-origin and background-clip
background-size
multiple backgrounds

Color
HSL colors
HSLA colors
opacity
RGBA colors

Text effects
text-shadow
text-overflow
word-wrap

User-interface
box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left

Selectors
attribute selectors

Basic box model
overflow-x, overflow-y

Generated Content
content

Other modules
media queries
multi-column layout

Web fonts
speech

Walau mayoritas web designer di seluruh dunia sangat antusias dengan CSS3 ini, penting juga untuk diketahui, sekarang hanya beberapa browser saja yang sudah mensupport CSS3 yaitu browser dengan engine webkit (safari, chrome) dan mozilla (firefox, flock).
Internet explorer? Jangan harap deh, mungkin baru di support di IE9 atau IE10. Still long way to go for IE.

Dibawah ini daftar browser dan daftar feature-feature dari CSS3 yang sudah didukung browse tersebut. Check this out.

Oke bagi kalian yang suka bereksperimen yuk mari kita belajar sama – sama. Bagi teman-teman yang lebih mengerti silahkan share atau koreksi kalau ada yang salah atau kurang. Berhubung saya masih newbie, di sini saya hanya menekankan kepada beberapa fitur – fiturnya. Oh iya, kalo mau belajar dasar – dasar CSS3 langsung aja ke www.css3.info

Pertama saya akan mencoba membuat border-color. Sayangnya fitur ini baru berjalan di browser mozilla dan opera. Fitur ini akan membuat border memiliki efek gradient.

[css]
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
[/css]

Fitur lain yang tidak kalah menarik yaitu border-image. Dengan fitur ini kita bisa mengganti border dengan image.

[css]

border-width: 27px;

-moz-border-image: url(images/border.png) 27 repeat;

-webkit-border-image: url(images/border.png) 27 repeat;

border-image: url(images/border.png) 27 repeat;

[/css]

Di CSS3 ada fitur lain yang menarik yaitu box-shadow dan border-radius. box-shadow akan membuat elemen dari web seperti memiliki bayangan. Properti border-radius di CSS3 memungkinkan developer web untuk membuat sudut round dalam desain mereka, tanpa perlu menggunakan gambar. Sebenarnya fitur ini sudah ada di CSS versi sebelumnya tapi baru hanya untuk browser mozilla.

box-shadow memiliki beberapa atribut, yaitu:

1. offset bayangan horisontal, jika nilainya positif berarti bayangan akan berada di sebelah kanan kotak, offset negatif berarti bayangan berada pada bagian kiri kotak.
2. offset vertikal, jika nilainya negatif berarti bayangan kotak akan berada di atas kotak, jika positif berarti bayangan akan berada di bawah kotak.
3. blur radius, jika diatur ke 0, bayangan akan tajam, semakin tinggi angka, bayangan semakin akan kabur/blur.

 

[css]
background:#FFF;
border:1px solid #000;
width:500px;
text-align:center;
height: 100px;
-webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-moz-border-radius:15px 0px 15px 0px;
-webkit-border-radius:15px;
padding: 5px 5px 5px 5px;
[/css]
Dibawah ini contoh penggunaan CSS3 yang menggunakan fitur transform yang mungkin akan dibahas dalam artikel selanjutnya.
Here they are..

http://www.enterupload.com/7p0km4t147d6/polaroid.rar.html
Enough for this part. Semoga berguna dan teruslah berexperimen

(CMIIMW)