Inilah Kehebatan css3 |cloninggo.blog

Saya terperanga ketika pertama kali melihat fitur baru CSS3 pada beberapaartikel 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 denganrotate(0deg). Dimana(0deg) adalah besar sudut.

Dan untuk perbesaran saat di hover, juga menggunakan-moz-transform, tapi ditambahscale(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

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 dibacadisini.

 .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 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. 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.

Keterangan:

Jika classp.trans2 diberi kodeopacity:0.8 teks yang tertulis akan ikut menjadi transparan. Berbeda jika kita menggunakan kodergba(255, 255, 255, 0.8); dimana nilai0.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

 .trans2 {/* 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 denganskewY(0deg). Dimana(0deg) adalah besar sudut pada koordinatY.

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

/* 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.

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 artikelSejarah Wayang Kulit. Dan tutorial lengkapnya, bisa di bacadisini.

 .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 transisiall 0.6s ease-in-out dimana0.6s adalah waktu gerak danease-in-out adalah tipe efek yang digunakan.

Tutorial animasi ini bisa dibacadisini. Dan sekilas tentang attribute-selector bisa dibacadisini.

/* 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 tutorialnyadisini.
Setelah mengetes efek CSS3 ini di berbagai browser, maka browser yang menjadi pilihan saya adalahFIREFOX,SAFARI, danCRHOME. Dan sering – seringlah meng-update browser Anda ke versi yang terbaru agar bisa merasakan kehebatan CSS3.