CSS3 More Effects


CSS3 More Effects. Sebagai seorang blogger kita tentu banyak bermain di code-code untuk memperindah blog atau web kita. Namun terkadang kita melupakan tentang kegunaan CSS karena terlalu asik dengan widget dan javascripts. Beberapa blogger sudah bermain dengan CSS untuk memberikan efek dalam blognya, namun hanya sebagian saja yang mengerti secara penuh tentang penggunaan CSS. Saya termasuk yang masih belajar tentang bagaimana menggunakan CSS2 sesuai dengan standard yang sudah di tentukan oleh W3C, namun tidak ada salahnya kita sedikit menengok ke CSS3 dengan segala kelebihan dan kekurangannya.

css3
Efek bayangan pada text
Jika dulu kita perlu menambahkan javascript sejenis cufon untuk memberi shadow pada text, di CSS3 kita hanya perlu menambahkan sedikit style.
text-shadow: 2px 2px 2px #000;
#000 merupakan warna shaddow yang akan di gunakan dan 2px adalah radius untuk bayangan.

Contoh Text Shadow

Untuk efek bayangan ini juga bisa mengesankan text menjadi timbul dengan sedikit permainan radius dan pemilihan warna yang sesuai. Bagaimana tertarik menggunakan CSS3, kelebihannya adalah pada beban html/css yang tentunya berkurang jika kita tidak memakai .javascripts. Namun ada kekurangan pada efek shadow ini dan pada CSS3 pada umumnya, karena dia tidak bisa terbaca di beberapa browser lama. Bagi pengguna Firefox silakan anda berbangga hati karena dengan update yang baru efek ini bisa berjalan dengan lancar.

Efek Lengkung pada Box
Terkadang kita menjumpai template yang menggunakan box dengan sudut lengkung, itu adalah salah satu fungsi yang bisa di gunakan pada CSS3. Namun seperti pada sebelumnya, tidak semua browser bisa membacanya.
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Untuk mendapatkan hasil yang maksimal, kita bisa mengeditnya sehingga box kita terkesan seperti gambar.

Contoh penerapan efek lengkung pada box dengan CSS3

Bagaimana? tertarik untuk menggunakan CSS3 yang lebih bervariasi, sehingga anda lebih bisa mengoptimalkan tampilan blog atau web anda. Sebelum membuat template sebaiknya diperhatikan bahwa template yang kita buat berjalan di semua web browser, karena tidak semua orang menggunakan browser yang sama dengan kita. Bagi yang tertarik memepelajari lebih lanjut tentang CSS3 silakan mencari everything you need in CSS3


Info tambahan: blogger team membuat sedikit perbahan pada comments box, permasalahan muncul ketika kita mau menggunakan Name/Url. Code verifikasi yang ditampilkan terpotong setengah dan tidak ada tombol submitnya karena tertutup oleh box commentar.

Tips: pada edit html centang expand widget lalu search pada tab dibawah ini
<iframe allowtransparency='true'
ganti srolling menjadi 'auto' atau kalo tidak kita bisa bermain pada height, rubah tingginya menjadi > 400px sehingga posisis kata kunci tidak terpotong ataupun tertutup.

happy blogging

14 Comments for CSS3 More Effects:

f3hry write.. 25 Juli, 2009 Delete

waaw,pertamax..
thnks den,info yg bermanpaat..

Denny write.. 25 Juli, 2009 Delete

eh cepet amat lu fer.. baru aja ini masi ngedit2 postingan takut ada yang salah.. eh elu dah nongol..

f3hry write.. 25 Juli, 2009 Delete

kyanya yg pragraf terakhir kasus gw tuh..hhe..

Kombes.Com write.. 26 Juli, 2009 Delete

Submit tulisan anda di Kombes.Com Bookmarking, Agar member kami vote tulisan anda. Silakan submit/publish disini : http://bookmarking.kombes.com Semoga bisa lebih mempopulerkan blog/tulisan anda!

Kami akan sangat berterima kasih jika teman blogger memberikan sedikit review/tulisan tentang Kombes.Com Bookmarking pada blog ini.

Salam hormat
http://kombes.Com

cebong ipiet write.. 26 Juli, 2009 Delete

yup...:D kdg pke round tpi g di semua browser :(

ndop write.. 27 Juli, 2009 Delete

berarti di sini belum apdeit firefoxnya, soalnya nggak muncul tuh shadow textnya.. hiks...

aditya permana write.. 27 Juli, 2009 Delete

wow..mas oblo tambah sip wae sharing tips2 gawe blogger blogspot..

Denny write.. 28 Juli, 2009 Delete

@f3hry .: iyo kae masalahmu sek paragraph akhir.. dan masalah beberapa blogger lainnya..

@mbong .: CSS3 HTML5 lebih sederhana tapi mumetke.. melintir kalo kata si *choen*

@ndopz .: coba deh bro.. tapi lu kan tukang gambar, pasti lebih seneng bikin efek pake gambar ya.. hehehe

@aditya .: masih kursus pak tentor.. ditunggu petunyuknya..

Brandal Surga write.. 28 Juli, 2009 Delete

masih belom mudeng2 jg nih ma CSS...hiks... ;(

biyan write.. 26 Februari, 2010 Delete

Benar yang dibilang ciebong. Masalah selalu di IE. Memang IE itu browser kampungan. Masakan efek seperti ini tidak didukung walaupun di IE8. ckckck. "Best View In Non IE Browser" dah.

oelil write.. 25 Maret, 2010 Delete

wauw simple dan keren ya hasilnya...

RENO-Planet Ultraman™ write.. 04 Juni, 2011 Delete

wah ternyata simple jg yah mas..ga ribet kode2nya..hehehhe

volt stabilizer motor write.. 05 September, 2014 Delete

mantapp oom tutorialnya
sdh dicoba :) dan berhasil
trims

peluang usaha makanan write.. 18 Mei, 2016 Delete

I really like this website, Thanks for sharing this information. Keep posting more. [:))] zell v phytogreen

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck! zell v

OK good to see- interesting blogs are always sweet! Peace. sabun herbal hawa

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck! makanan ringan melinjo

Posting Komentar

Spam is not Good for your Body :)

 
© 2010 Blogger Tutorial | Powered by Blogger | Valid X/HTML (Home Page)
Framework: Choen Design: Denny
Back To Top