Teknik-teknik CSS3 yang Anda Harus Tahu

Maunya sih ngeblog seminggu sekali, tetapi semangat ngeblog lagi menggebu-gebu jadi ya KEEP BLOGGING!!!

Akhir-akhir ini banyak orang yang membicarakan tentang CSS3. Seperti kang Beben misalnya. CSS3 diyakini akan memperindah halaman web. Tetapi, sayang seribu sayang, kau sudah ada yang memiliki... Ada yang marah... Lah kok jadi nyambung-nyambung ke lagunya Matta Band? Hehehe... maksudnya tidak semua browser mendukung CSS3. Internet Explorer belum mendukungnya. Tetapi akhir-akhir ini pengguna Internet Explorer semakin berkurang jadi ya tidak masalah jika anda menggunakan CSS3.

Untuk menggunakannya anda harus menggunakan ekstensi -moz- untuk Mozilla Firefox dan -webkit- untuk Safari.

1. Bayangan

Jadi inget lagunya Sembilan Band "ada bayangmu... ada bayangmu... disetiap mimpiku yang indah, bayanganmu selalu datang..." Lah kok jadi nyanyi? Untuk bayangan, nih kodenya.

-moz-box-shadow:#555 5px 5px 6px;
-webkit-box-shadow:#555 5px 5px 6px;

Kode #555 adalah warna bayangan. 5px yang pertama adalah jarak bayangan dengan batas kiri dari objek tersebut. Sedangak n 5px yang kedua adalah jarak bayangan dengan batas atas gambar. Sedangakn yang 6px adalah tingkat blur dari bayangan. Silahkan anda otak-atik sendiri untuk mengetahui lebih lanjut. Nih contohnya.

Lihat! Ada bayangannya kan???

2. Gradasi

Gradasi maksudnya adalah pencampuran warna. Ini dia kodenya:

background: -moz-linear-gradient(-90deg,green,blue); -webkit-gradient(linear, left top, left bottom, from(green), to(blue));

green adalah warna awal, sedangkan blue adalah warna akhir. Contohnya:

Lihat! Warnanya bercampur!
Keren...

3. RGBA

RGBA maksudnya adalah nilai RGB ditambah nilai terakhir untuk opacity/kepekatan. Kodenya:

background:rgba(0,144,23,0.8);

0, 144, dan 23 adalah nilai RGB biasa, sedangkan 0.8 adalah nilai kepekatan (80 persen). Contohnya:

Backgroudnya transparan ya?

4. HSL

Kalau anda biasa menggunakan Adobe Photoshop atau Corel Draw, papsti tak asing lagi dengan HSL (Hue, Saturation, Lightness). Hue adalah derajat dalam roda warna (itu loh yang biasa ada di aplikasi grafis), saturation adalah nilai saturasi (kegelapan/kejenuhan warna), sedangkan lightness adalah nilai pencahayaan. Kodenya:

background:hsl(47,24.3%,75.3%)

47 adalah nilai hue, 24.3% adalah nilai saturasi, dan 75.3% adalah nilai lightness. Nih contohnya:

Nilai background dengan HSL (Hue, Saturation, Lightness).

5. Warna Border Multipel

Maksudnya ada bisa memasukkan lebih dari satu warna sekaligus pada border. Cara pengetikkannya begini:

border-width:6px;
border-style:solid;
-moz-border-top-colors:red orange yellow green blue purple;
-moz-border-right-colors:red orange yellow green blue purple;
-moz-border-bottom-colors:red orange yellow green blue purple;
-moz-border-left-colors:red orange yellow green blue purple;

Banyak warna border harus sama dengan lebar border. Dan warna diurut dari bagian terluar hingga bagian paling dalam. Nih contohnya:

Warna bordernya banyak yaa???

6. Gaya Pemblokan Teks

Maksudnya adalah gaya/style teks ketika diseleksi. Penulisannya begini:

namaselector::selection{/*nama selector boleh berupa ID atau class atau tag*/
background:black;/*Warna latar belakang*/
color:white;/*Warna teks*/
}
namaselector::-moz-selection{
background:black;
color:white;
}

Contoh:

#seleksi::selection{
background:blue;
color:yellow;
}
#seleksi::-moz-selection{
background:blue;
color:yellow;
}

Hasilnya:

Coba seleksi teks ini. Dan lihat apa yang terjadi! Latar akan berwarna biru dan teks akan berwarna kuning.

7. Transformasi

Dengan transformasi anda bisa membuat suatu objek membesar. Seperti pada postingan Efek Pembesaran Gambar. Biasanya trik ini digunakan untuk efek hover. Kodenya begini.

#transformasi:hover{
-moz-transform:scale(1.25);
-webkit-transform:scale(1.25);
}

Angka 1.25 adalah nilai perbesaran. Nih tak kasih contohnya:

Coba arahkan mouse ke sini. Dan kotak ini akan membesar.

8. Multi Kolom

Anda bisa membuat gaya teks berkolom di blog/website anda. Anda hanya perlu menjejalkan kode berikut.

-moz-column-count:2;
-moz-column-rule:1px solid red;
-moz-column-gap:10px;

Angka 2 diatas adalah jumlah kolom. Angka 1px yaitu lebar garis pembatas (border), lalu solid adalah gaya border, dan red adalah warna border. 10px adalah jarak antara border dengan teks supaya tidak tertabrak. Nih contohnya:

Kini, handphone seolah-olah telah menjadi kebutuhan primer setiap orang. Dari anak-anak sampai orang tua punya handphone. Nah, kini anda bisa mengakses blog ini lewat handphone. Jika anda bepergian, atau jika anda malas ke warnet untuk membuka blog ini, anda bisa mengakses blog ini lewat handphone dengan alamat: www.mippin.com/mrfblog. Sekian pengumuman ini. Saya ucapkan terima kasih.

Ya itu dia beberapa teknik-teknik CSS3. Semoga bermanfaat.

Sumber:
http://sixrevisions.com/css/css3-techniques-you-should-know/ dengan penerjemahan dan beberapa pengubahan.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya