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.
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
13 Comments for CSS3 More Effects:
waaw,pertamax..
thnks den,info yg bermanpaat..
eh cepet amat lu fer.. baru aja ini masi ngedit2 postingan takut ada yang salah.. eh elu dah nongol..
kyanya yg pragraf terakhir kasus gw tuh..hhe..
yup...:D kdg pke round tpi g di semua browser :(
berarti di sini belum apdeit firefoxnya, soalnya nggak muncul tuh shadow textnya.. hiks...
wow..mas oblo tambah sip wae sharing tips2 gawe blogger blogspot..
@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..
masih belom mudeng2 jg nih ma CSS...hiks... ;(
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.
wauw simple dan keren ya hasilnya...
wah ternyata simple jg yah mas..ga ribet kode2nya..hehehhe
mantapp oom tutorialnya
sdh dicoba :) dan berhasil
trims
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 :)