ChugyGogog

Kali ini saya mencoba membuat tombol atau buttom dengan CSS3 dengan menggabungkan ronded corner, Gradient linear CSS3 dan Box shadow CSS3 agar lebih menarik tampilan dari button ini. Button ini bisa di aplikasikan pada link di postingan maupun pada bagian template yang anda inginkan. Contoh Button menggunakan CSS3 Untuk membuatnya silahkan ikuti langkahnya dibawah ini. Masuk pada Edit HTML masukan kode dibawah ini, diatas kode ]]></b:skin> .buttom { padding: 8px;padding-top:6px; padding-bottom:6px; margin-right:3px; -moz-border-radius:4px; -webkit-border-radius:4px; -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4); -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4); color:rgba(0,0,0,0.9); text-shadow:1px 1px 0px rgba(255,255,255,0.8); border:1px solid rgba(0,0,0,0.5); background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#cccccc)); background: -moz-linear-gradient(top, #f3f3f3, #cccccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#

Melanjutkan postingan seputar CSS3 yang di aplikasikan pada Teks Stroke , walaupun hanya sekelumit membahasnya karena memang saya juga masih belum begitu mendalami tentang CSS3. Dan kebetulan kemaren Bang Hendro komentat tentang Teks stroke ini yang bisa dimplementasikan dengan box Shadow. Thanks buat bang Hendro yang sudah memberikan tambahan untuk pengaplikasian CSS3 ini. dan sekarang saya coba mengaplikasikan CSS3 ini dengan membuat BOX SHADOW atau Kotak dengan tambahan bayangan menggunakan CSS3. Beberapa sample Box Shadow bisa dilihat di bawah ini: -moz-box-shadow: 1px 1px 10px #888; -webkit-box-shadow:1px 1px 10px #888; -moz-box-shadow: 0px 20px 10px -10px #888; -webkit-box-shadow:1px 1px 10px #888; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow:1px 1px 10px #888; -moz-box-shadow: inset 1px 1px 10px #888; -webkit-box-shadow:1px 1px 10px #888; Box Shadow di atas hanya beberapa saja mungkin untuk lebih berfariasi model,warna,tebal tipis bayangan-nya "Shadow" b

Untuk kali ini sya mencoba memberikan tips atau cara membuat teks shadow pada judul posting, mungkin blogger semua sudah mengenal atau mengetahui penggunaan teks shadow ini jadi saya cuma melengkapi saja. Langsung saja : Text shadow Pada Judul posting Langkah pertama masuk pada blog anda lanjukan pada Tata Letak - Edit HTML Cari kode seperti ini .post h3{ Lalu masukan kode text shadow di bawah ini di bawah kode .post h3{ text-shadow: 2px 1px 7px ; hasil Text nya akan seperti ini. Text shadow Pada Judul posting Di bawah ada beberapa jenis atau model dari text shadow yang bisa anda gunakan. text-shadow: 2px -2px 4px; hasil Text nya akan seperti ini. Text shadow pada Judul posting text-shadow: 2px 2px 0px; hasil Text nya akan seperti ini. Text shadow pada Judul posting text-shadow: -1px -1px white, 1px 1px #333; hasil Text nya akan seperti ini. Text shadow pada Judul posting Silahkan anda pilih beberapa jenis teks shadow yang ada di atas. Anda juga bisa Mengcustomize dari jenis text