Inilah Kehebatan CSS3

CSS3

Inilah Kehebatan

Saya terperanga ketika pertama kali melihat fitur baru CSS3 pada beberapa artikel yang berhasil saya kumpulkan. Bagaimana tidak, lha wong fitur baru itu sangat membantu sekali untuk para web designer dalam mengerjakan projectnya. Inilah contohnya:

Eits, update dulu Browser Anda ke versi yang terbaru. Dan ingat, jangan pernah menggunakan Internet Explorer!

1. Polaroid dengan Rotate, Scale, & Box Shadow

Keterangan:

Untuk membuat efek bayangan saya menggunakan -moz-box-shadow. Efek memutar menggunakan -moz-transform ditambah dengan rotate(0deg). Dimana (0deg) adalah besar sudut.

Dan untuk perbesaran saat di hover, juga menggunakan -moz-transform, tapi ditambah scale(1.25) yang merupakan besar nilai perbesaran.


.box {
   z-index: 1;
   position: relative;
   padding: 3px;
   width: 230px;
   height: 200px;
   /* Kode yang digunakan */
   -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
   -moz-transform: rotate(-15deg);
   -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
   -webkit-transform: rotate(-15deg);
}


.box:hover {
   z-index: 2;
   position: relative;
   /* Kode yang digunakan */
   -moz-transform: rotate(0deg);
   -moz-transform: scale(1.25);
   -webkit-transform: rotate(0deg);
   -webkit-transform:  scale(1.25);
}

2. Glossy dengan Gradient & Rounded Corner

ENTER

Keterangan:

Untuk menghasilkan efek glossy seperti contoh di atas, saya menggunakan -moz-border-radius untuk rounded corner dan -moz-linear-gradient untuk gradasinya.

Kode disamping kanan adalah kode yang saya gunakan untuk contoh efek glossy yang berwarna biru. Dan untuk tutorial lengkap pembuatan efek glossy, bisa dibaca disini.


.tombol {
   width: 600px;
   height: 200px;
   margin: -30px auto;
   border: 2px solid #4F93CA;
   background-color: rgba(60, 132, 198, 0.8);
   /* Kode yang digunakan */
   -moz-border-radius: 100px;
   -moz-box-shadow:0 20px 20px rgba(66, 140, 240, 0.3);
   background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);
   -webkit-border-radius: 100px;
   -webkit-box-shadow:0 20px 20px rgba(66, 140, 240, 0.3);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
}


.kilau {
   top:1px;
   left:50px;
   position: relative;
   height: 110px;
   width: 500px;
   /* Kode yang digunakan */
   -moz-border-radius: 100px;
   background-color: rgba(255, 255, 255, 0.2);
   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 80%);
   -webkit-border-radius: 100px;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}


.tombol span {
   text-shadow: 0px 1px 8px #2867A5;
   font-family: arial black;
   color: #fefefe;
   font-size: 80px;
   position: relative;
   top: -20px;
   left: 150px;
}

3. Efek transparan dengan Opacity dan RGBA

Lorem ipsum katok kolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Keterangan:

Jika class p.trans2 diberi kode opacity:0.8 teks yang tertulis akan ikut menjadi transparan. Berbeda jika kita menggunakan kode rgba(255, 255, 255, 0.8); dimana nilai 0.8 adalah nilai opacity, maka teks tidak ikut menjadi transparan. Dengan menggunakan opacity dan warna RGBA, maka kita tidak perlu lagi menggunakan gambar dengan format *png untuk membuat efek transparan


p.trans2 {
   padding: 15px;
   left: 0px;
   top: -421px;
   position:relative;
   z-index:2;
   width: 400px;
   height: 410px;
   /* Kode yang digunakan */
   background-color:rgba(255, 255, 255, 0.8);
   -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
}

4. Kubus 3 dimensi dengan Skew & Rotate

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1

2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2

Keterangan:

Efek 3 dimensi ini masih menggunakan -moz-transform tapi ditambah dengan skewY(0deg). Dimana (0deg) adalah besar sudut pada koordinat Y.

Saya mengalami kesulitan saat membuat kubus ini, karena saya harus meng-akurat-kan besar sudutnya supaya pas dengan sudut yang lain. Silakan baca tutorialnya disini.


/* Kode CSS untuk kubus No.1 */

.left, .right {
   top: 130px;
   float:left;
   padding: 15px;
   position:relative;
   width: 200px;
   height: 200px;
   color: #fff;
   font-size: 12px;
   right: 160px;
}

.top {
   font-size: 12px;
   color: #fff;
   z-index: 2;
   top:-51px;
   left: 185px;
   background: #7C8B2E;
   float:left;
   padding: 15px;
   position:relative;
   width: 200px;
   height: 200px;
   /* Kode yang digunakan */
   -moz-transform: rotate(60deg) skewY(-30deg) scaleY(1.15);
   -webkit-transform: rotate(60deg) skewY(-30deg) scaleY(1.15);
}

.left {
   background: #2867A5;
   /* Kode yang digunakan */
   -webkit-transform: skewY(30deg);
   -moz-transform: skewY(30deg);
}

.right {
   background: #EF5F30;
   /* Kode yang digunakan */
   -webkit-transform: skewY(-30deg);
   -moz-transform: skewY(-30deg);
}

5. Multi-Column dengan Column, Gap, & Rule

Lorem Ipsum Katok Kolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Keterangan:

-moz-column-count untuk menentukan jumlah kolom. -moz-column-gap untuk menentukan jarak antar kolom. -moz-column-rule untuk menambahkan sebuah garis antar kolom.

Saya juga memakai multi-column pada artikel Sejarah Wayang Kulit. Dan tutorial lengkapnya, bisa di baca disini.


.kolom {
   margin-top: -30px;
   margin-bottom: 10px;
   padding: 20px;
   background: #fff;
   /* Kode yang digunakan */
   -moz-column-count: 3;
   -moz-column-gap: 20px;
   -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
   -webkit-column-count: 3;
   -webkit-column-gap: 20px;
   -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
}

.kolom2 {
   text-align: justify;
   margin-top: -5px;
   padding: 20px;
   background: #fff;
   /* Kode yang digunakan */
   -moz-column-count: 2;
   -moz-column-gap: 20px;
   -moz-column-rule: 1px solid #BDC1C7;
   -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
   -webkit-column-count: 2;
   -webkit-column-gap: 20px;
   -webkit-column-rule: 1px solid #BDC1C7;
   -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
}

6. Animasi dengan CSS3 & Tentang Attribute Selector

Untuk melihat efek animasi ini, gunakan browser Safari atau Chrome!

Keterangan:

Efek animasi ini masih juga menggunakan -moz-transform yang sudah digunakan pada contoh diatas. Jika sebuah class menggunakan -moz-transform dan ditambah dengan -webkit-transition maka efek animasinya akan terlihat.

Pada kode disamping menggunakan -webkit-transition: all 0.6s ease-in-out dimana 0.6s adalah waktu gerak dan ease-in-out adalah tipe efek yang digunakan.

Tutorial animasi ini bisa dibaca disini. Dan sekilas tentang attribute-selector bisa dibaca disini.


/* Kode untuk contoh animasi pertama */

.kot {
   float:left;
   width: 180px;
   height: 130px;
   margin: 30px 0;
   /* Kode yang digunakan */
   -webkit-transition: all 0.6s ease-in-out;
}

.kot[title$="kot1"] {
   background: #2867A5;
}

.kot[title$="kot1"]:hover {
   -moz-transform:translate(3em, 0pt);
   -webkit-transform:translate(3em, 0pt);
}

.kot[title$="kot2"] {
   margin-left: 20px;
   background: #7C8B2E;
}

.kot[title$="kot2"]:hover {
   -moz-transform:rotate(30deg);
   -webkit-transform:rotate(30deg);
}

.kot[title$="kot3"] {
   margin-left: 20px;
   background: #EF5F30;
}

.kot[title$="kot3"]:hover {
   -moz-transform:translate(-3em, 1em);
   -webkit-transform:translate(-3em, 1em);
}

.kot[title$="kot4"] {
   margin-left: 20px;
   background: #EA2F22;
}

.kot[title$="kot4"]:hover {
   -moz-transform:scale(1.3);
   -webkit-transform:scale(1.3);
}

.kot:hover {
   z-index: 2;
}

Akhirnya:

Sebenarnya masih banyak kehebatan CSS3 yang lain, seperti @font-face, berhubung saya pernah meng-embed font di server sendiri yang menyebabkan bandwidth 9GB habis dalam waktu 3 hari saja, maka sengaja tidak saya bahas. Tapi Anda bisa membaca tutorialnya disini.
Setelah mengetes efek CSS3 ini di berbagai browser, maka browser yang menjadi pilihan saya adalah FIREFOX, SAFARI, dan CRHOME. Dan sering - seringlah meng-update browser Anda ke versi yang terbaru agar bisa merasakan kehebatan CSS3.

35 Komentar

adechriz

01 March 10 - Link

waw…emang keren css3
walopun belum sempet dipraktekin siy..hehe

Denny

01 March 10 - Link

kegilaan CSS3 sayang masih harus update browser, tapi ini kemajuan besar yang menjadikan bikin web jadi makin mudah tanpa image. tapi yang perlu di perhatikan juga pembaca ya, walaupun udah canggih harus tetep bisa buka dengan wajar ( tidak amburadul ) di IE 6. jangan2 nanti ga keluar apa2 hanya kotak kosong. hehehe.. jadi waspadalah waspadalah..

huaaaaaaaaa.. jadi pengen edit template lagi.. racooonn racooonnn…

Om Ipit

01 March 10 - Link

@adechriz:
iya, sya jg terperanga dgn kehebatannya. :p

@Denny:
betul bgt. tp seiring dengan kemajuan teknologi, mudah2an pengunjung menyadari agar tidak menggunakan IE6. :p

zam.web.id

01 March 10 - Link

“2. Glossy dengan Gradient & Rounded Corner”
ditambah shadow makin mantab tuh

Fikri Rasyid

01 March 10 - Link

Wah, -moz-column-count itu kan yang digunakan oleh informationarchitecht.jp ya. Yang saya baru tahu disini efek box, gradasi dan rotate. edan tenan, great post cah!

Om Ipit

01 March 10 - Link

@zam.web.id:
udh dkasih shadow, tp warnanya kurang tajam bang

@Fikri Rasyid:
oiya, betul mas Fik. sebenarnya masih banyak efek2 lain yg blm sya praktekkan

A. Manaf

02 March 10 - Link

Emang oke CSS3, jadi pengen nyoba (tapi masih mesti blajar dulu, hehe…).

Btw, WDN (http://note.cahcepu.com/) masuk ke sini: http://speckyboy.com/2010/02/25/50-amazing-personal-blog-web-designs/

Om Ipit

03 March 10 - Link

@A. Manaf
Monggo mas, klo mw bljr, sya sdh mngumpulkan linknya disini:
http://cahcepu.com/tutorial/35-website-untuk-belajar-css
wah, makasih infonya mas Manaf. sgera meluncur…..

choen

03 March 10 - Link

Orang2 sekarang terus mengembangkan teknik CSS3 dan lama-lama CSS3 semakin mengurangi fungsi dari image dan javascript yah.

asli gw suka banget kemasan postingan om ipit, salut bro.

sugeng

03 March 10 - Link

Om ipit, salam kenal serta jabat erat selalu dari Tabanan. aku tertarik dengan foto2 nya dengan efek bayangan aja pak. kalo diperbesar jadi 2-3 kali atpa juga bisa om

choen

03 March 10 - Link

oh.. untuk embed font-face enak sekarang bisa pake generator n bisa tampil bagus disemua browser.

generatornya disini:
http://www.fontsquirrel.com/fontface/generator

biyan

03 March 10 - Link

ah ah ah…kreatif deh bro. dulunya CSS3 yang saya tau hanya moz dan text-shadow ntu. Sekarang sudah nambah dikit2.

Tinggal minta daftarnya gan.

Om Ipit

04 March 10 - Link

@Choen:
thank. iya mas, kemajuan teknologi memang selalu memudahkan kita.
wah dengan @font-face generator, kita bisa upload font juga. nais inpo gan.

@Sugeng:
Salam kenal juga pak.
Bisa kok, tinggal mengganti nilai pada kode ini :
-moz-transform: scale(1.25)
tinggal ubah nilai (1.25) menjadi (2) atau (3)

@Biyan:
makasih mas. mksudnya daftar apa mas?
sya biasanya belajar CSS3 di sini: http://css3.info

Graha Nurdian

05 March 10 - Link

Baru tahu web sampeyan, wiihhh keren simple awesome!!
btw nice article bro emang CSS3 keren dengan fitur RGB, opacity dll. Patut dicoba di web klien

Internet explorer emang suck, developernya (Microsoft) emang gak niat buat ngembangin tuh browser mendingan pake Google Chrome

Arya

06 March 10 - Link

Bener-bener “the art and science of CSS”
btw, ga cape mas tiap bikin artikel stylenya beda2 ?

Om Ipit

06 March 10 - Link

@Graha Nurdian
Thank bro, tp brhubung CSS3 masih beta, jd hrs dipertimbangkan dlu jika digunakan utk web klien
Die IE6 die

@Arya
The Art and Science of CSS = kyk judul buku di Sitepoint
Capek, tp sya bwt 1 bulan 1 artikel. Jd agak ringan.

Arya

07 March 10 - Link

@Om Ipit
Emang judul buku sitepoint :D, tapi kan ga ngebahas sampe sini. Kenapa ga bikin buku aja Mas hehe
Laku ga ya buku CSS di Indonesia ?

Om Ipit

08 March 10 - Link

@Arya
hehehe, masih belum smpai ke situ om
menurut sya, laku om krna CSS adalah dasar dari web design. yg wajib dipelajari

dani

09 March 10 - Link

Mantap Mas.
CSS3 makin mampu mengadopsi fitur yang dulu cuman bisa dipake dengan SVG. Katanya, CSS3 ini akan mengubur SVG lebih dalam.

Om Ipit

10 March 10 - Link

@Dani
Mkasih mas.
Wah betul mas, klo sya liat dr contoh ini trnyata, SVG jg bisa beraksi kyk CSS3. Saya mendukung CSS3 saja

dani

10 March 10 - Link

Setelah saya lihat-lihat lagi, CSS3 lebih fleksibel untuk layout. SVG untuk konten plus bisa ditambah fitur CSS3. Tapi kayaknya, dukungan peramban akan lebih cepat mengadopsinya untuk CSS3 dibanding SVG.

Thanks for the usability note.

Yogi

14 March 10 - Link

CSS3 memang keren

sqa indonesia

15 March 10 - Link

Jadi pengen belajar CSS 3

Juansah

15 March 10 - Link

Mantab bener dah CSS3 sayangnya saya belum terlalu bisa karena baru newbie hihihihii…

jujur saya kagum bgt sama CSS3, 4 jempol dech buat CSS3 dan Om Ipit.

salam kenal y dari Tangerang ^_^

ardianzzz

18 March 10 - Link

wah keren nih gaya blogazine nya

heheh sangat frontal, lebih ke kampanye anti IE

uberVU - social comments

19 March 10 - Link

Social comments and analytics for this post…

This post was mentioned on Twitter by deni_k77: gila bener nih http://cahcepu.com/tutorial/css3hebat...

AnggaRifandi

21 March 10 - Link

sedang mencoba menyelami dalamnya CSS3
info yang menarik, terima kasih

ardianzzz

23 March 10 - Link

kalau layanan @font-face, konon sih yang menjadi masalah adalah legalitas penggunaan font tertentu (font komersil) gitu..

Yang jelas penerapan CSS3 sangat bermanfaat unutk membuat web dengan performa tinggi tetapi tetap ringan di koneksi rakyat jelata

nice blogazine

Realodix

28 March 10 - Link

Memang manteb bgt css 3…

Berkenalan Dengan Blogazine | Tantan Media

30 March 10 - Link

[...] lagi ketika saya melihat beberapa contoh blog dengan gaya Blogazine, terutama blogger lokal Cahcepu.com (Wordpress) dan Ardianzzz.blogspot.com [...]

tantan