Advertise

Tampilkan posting dengan label Shadow. Tampilkan semua posting
Tampilkan posting dengan label Shadow. Tampilkan semua posting

Membuat Tombol Dengan CSS3 "Button CSS3 Style"

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='#f3f3f3', endColorstr='#cccccc');
color: #940f04;
background-color:#fff;
}

.buttom a, .buttom:hover {
padding: 8px;padding-top:6px; padding-bottom:6px;
-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(#cccccc), to(#f3f3f3));
background: -moz-linear-gradient(top, #cccccc, #f3f3f3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3');
text-decoration: none;
color:#000;
}

Silahkan dismpan terlebih dahulu.

Kode diatas merupakan pengaturan untuk Button dengan CSS3, untuk mengaplikasikannya kita tinggal memanggil selector button diatas yaitu dengan menambahkan class="buttom pada link yang akan dipasang

Contoh kode link sebelum menggunakan class="buttom, seperti ini :
<a href="linkanda.blogspot.com">Judul link anda</a>

Contoh link yang telah dipasangkan class="buttom, seperti ini.
<a href='linkanda.blogspot.com' class="buttom">Judul link anda</a>

Sekarang coba anda buat link pada postingan atau sidebar, tambahkan kode class="buttom seperti contoh diatas, dan lihat hasilnya. Selamat mencoba

NB :: Pembuatan Button ini mungkin hanya sebagai contoh sederhana, untuk pengembangannya silahkan dipelajari lebih lanjut. Sukses selalu.

Buat Box Shadow dengan CSS3

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" bisa di custom sesuai selera masing masing.

Box shadow ini bisa digunakan untuk membuat Teks area atau juga bisa dipasang pada background tamplate Blogger dll. Selamat mencoba.

Mengganti Judul posting Dengan Text Shadow

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 :

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 shadow sesuai keinginan anda. Trima kasaih