Rabu, 26 Mei 2010

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.

Buzz It

Artikel Menarik Lainnya



10 komentar:

Manchester United Tech mengatakan...

wah lengkap nih sob infonya...btw blog anda sudah saya follow, follow balik yah!!!!

qiqi mengatakan...

mantap infonya... mesti coba nih

katir mengatakan...

lha yang kayak ini impo yang aku perlukan...
makasih ya gan infonya....
yang jelas menambah khasanah dalam otak saya..
makasih gan sekali lagi makasih.........

endar mengatakan...

mantap sekali infonya.
terima kasih mas

JUN mengatakan...

masih bingung saia :(

btw, met ultah ya :) [dapat dari sobat blogger yg lain]

Zaiful Anwar mengatakan...

Wah kebetulan ne saya lagi senang otak atik template. Yang menarik poin terakhir multi kolom.
btw bagaimana caranya ngecek valid css3?

PuSen Culler mengatakan...

Saya lagi suka bergerilya cari template yang sip...

Koje mengatakan...

mantap banget Mas... thanks yaa...
http://ekos06.student.ipb.ac.id

nuedges mengatakan...

emang mantab css3 neh...
kereeeennnn

poker mengatakan...

poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.