Tutorial Belajar CSS 3 Part 1 – Mengenal CSS 3

Selamat datang teman – teman, bertemu lagi dengan warung belajar, dalam tutorial ini kita akan membahas hal yang bisa dikatakan baru, meskipun memiliki konsep yang sama..

Kita akan belajar mengenai CSS3, Sebenarnya apa sih CSS 3 itu ?? Kelebihannya ?? Apakah syntaxnya berbeda dengan CSS yang kita pelajari sebelumnya ??

Waduh banyak sekali ya pertanyaannya hehe…

Jadi CSS3 ini adalah perkembangan dari CSS Sebelumnya, yang memiliki konsep yang sama dengan CSS sebelumnya, teknologi CSS ini dikembangkan di versi 3 ini untuk mengikuti perkembangan teknologi web yang saat ini semakin pesat.

Secara garis besar di CSS3 dikenalkan beberapa fitur baru yang belum ada di versi CSS Sebelumnya, beberapa fitur yang ada di CSS3 antara lain :

• Rouded Corner
• Border Image
• Gradient Color
• Text Effects
• 2D/3D Transformations
• Animations

yang mencolok adalah adanya fitur animasi 2D ataupun 3D sehingga anda bisa membuat animasi sederhana dengan bantuan CSS, tanpa harus selalu menggunakan Flash, sehingga web dapat lebih enteng untuk diakses.. jadi dari segi performa web dapat terbantu dengan adanya CSS3 ini.

Mengenal CSS Vendor Prefix

Vendor prefix adalah penambahan beberapa karakter yang diletakkan diawal penulisan property, terutama untuk property CSS3, jadi karena CSS3 terus berkembang sehingga ketika kita menggunakan fitur CSS3 dan diimplementasikan di beberapa browser, kita diharuskan menambahkan beberapa karakter khusus pada bagian property.

Penulisan CSS Vendor Prefix

CSS Vendor Prefix dituliskan diawal dari property, untuk karakternya disesuaikan dengan inisial dari web browser.

Berikut ini adalah awalan vendor prefix pada web browser populer:

• -moz- (Mozilla Firefox)
• -webkit- (Google Chrome, dan versi terbaru dari Opera)
• -o- (Opera versi lama)
• -ms- (Internet Explorer)

Jadi contoh penulisannya adalah seperti berikut ini, kita ambil contoh dengan menggunakan property border-radius dengan berbagai vendor prefix :

Sebenarnya teman – teman bisa langsung menggunakan property border-radius saja, tanpa menggunakan vendor prefix.

tetapi nanti jika teman – teman menemui fitur css3 yang ternyata tidak berfungsi ketika diload di sebuah browser semisal opera versi lama maka teman – teman bisa menambahkan vendor prefix untuk browser opera.

jadi bisa disesuaikan dengan browser yang digunakan untuk load halaman website nantinya.

Baik itu dulu teman – teman saya sulit kalau menjelaskan hal kenal – kenalan di teknologi baru, jadi langsung aja kita praktek untuk belajar CSS3 di tutorial selanjutnya, oke sekian dulu sampai jumpa di tutorial selanjutnya