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
css polaroid
css polaroid
css polaroid
css polaroid
css polaroid
css polaroid

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);
   -webkit-transition: 0.3s ease-in-out; 
   -moz-transition: 0.3s ease-in-out;
}


.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

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
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
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
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
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 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 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 pada contoh di atas menggunakan -moz-transition dan -webkit-transition sehingga efek animasinya akan terlihat Di browser Mozilla, Chrome, dan Safari.

Pada contoh disamping menggunakan kode transisi 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; 
   -moz-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.

BagiBagiBlog

14 December 11 - Link    

Bussheeet… Efek dari CSS3 emang bener2 HEBAAT.. Mengagumkan BGT Om!!!
jadi leabih semakin tampak Luar biasa!!!
Hmm,,, kayaknya emang layak dcoba tuh… ijin Bookmark dulu Om!!!
MAKASI BGT atas INfonya!!!

Mbah Qopet

14 December 11 - Link    

iya bang udah ane coba semua , keren-keren. buat @font-face nambah berat loading T.T

Cory Senjaya

14 December 11 - Link    

Uihhhhhh….. HEBAT!
keren ya… wah artikel yang sangat sangat sangat berguna, membantu dan menolong dan helping para blogger terutama yang masih tahap belajar seperti sayah… hehehe… MANTAB ^_^’d

dhanz

27 December 11 - Link    

makasi uda share :)
berguna banget buat saya sebagai seorang newbie di dunia web desainer..
makasi banyak poko.nya mahh :)

Imam

13 January 12 - Link    

Keren, siap2 belajar CSS3 deh..

azis aby mahmud

23 February 12 - Link    

Wah keren…makasih..makasih….ini yang saya butuhkan saat ini untuk membuat web…hmmmmm thanks mas broo….

hengs

14 March 12 - Link    

NIce post, terimakasih.

nurjalih

30 April 12 - Link    

gan ane belum bisa akses blog n’t,,gmn ya?

Rafiqus Racticultus

03 June 12 - Link    

wiiihhh keren abisss…. sedot ilmunyaaaa…..

al-ste

03 June 12 - Link    

berguna banget nieh.. buat desain blogazine..

Totto

10 June 12 - Link    

wah… hebat, keren, bagus, enteng, salut deh.

bisa menjadi inspirasi dalam desain nih. makasih sebelumnya.

ijin bookmark ya…hehe

kopi kothok

03 July 12 - Link    

wow tampilannya bagus sekali Om Ipit, mari kita ngopi dulu di To Grind kapan2 untuk membahas website ini, hihhii

widodo

31 July 12 - Link    

full css smua nih hebat mas

[...] pengenalan CSS3 yang saya tulis dua tahun lalu, kali ini saya mencoba sedikit bereksperimen tentang bagaimana [...]

omipit

02 August 12 - Link    

terima kasih telah berkomentar :D