Assalamualaikum Wr. Wb.
Membuat Efek Shadow atau Bayangan dengan CSS | Para Pencari Ilmu kembali lagi setelah 4 hari tidak posting artikel karena kesibukan sekolah ^_^ kali ini kami akan share tentang Web Design, yaitu efek shadow atau bayangan dengan CSS.
Yap, Mari kita mulai dengan membuat file html, silahkan ketikkan script seperti di bawah (di tutorial ini mulai dari bagian intinya saja, silahkan ketikkan script utama <html> dan <link ... css telebih dahulu).
<p class="button1"><a href="http://www.parapencariilmu.com" title="Like" target="blank">Like Us</a></p>
Ya, ini hanyalah contoh, anda bisa isi dengan sesuai kebutuhan anda, code yang berwarna biru tersebut adalah nama class efek shadow nantinya. Setelah itu kita membuat file css nya, ketikkan script seperti di bawah.
.button1 {
text-align: center;
background-color: #333;
height: 50px;
width: 150px;
padding-top: 1.4em;
margin-left: 14.8em;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.button1:hover {
box-shadow: #333 0px 0px 15px;
-moz-box-shadow: #333 0px 0px 15px;
-webkit-box-shadow: #333 0px 0px 15px;
}
.button1 a {
color: #ADADAD;
}
.
button1 a:hover {
text-decoration: none;
color: #FFF;
Script di atas adalah contoh button like yang di lengkapi juga dengan efek border radius, code .button1:hover disitu berguna ketika mouse hover/menuju ke button tersebut, maka button itu akan mengeluarkan bayangan 15px di setiap sisi dengan warna #333 (hitam), maka hasilnya akan seperti ini :
Jika menurut anda bayangan kurang lebar, anda bisa merubah 15px sesuai keinginan anda.
Cukup mudah dipahami bukan ? Jika ada pertanyaan seputar script di atas silahkan berkomentar di bawah yaa ^_^
Anda juga bisa request artikel ke kami dengan mengirimkannya ke Twitter atau Fanspage kami.
Jika artikel ini dirasa bermanfaat silahkan share artikel ini ke orang yang membutuhkan dengan mencantumkan sumbernya yaa ^_^
Sekian artikel kali ini, mohon maaf jika ada kesalahan.
Posting Komentar
Pengunjung yang baik selalu meninggalkan komentar
Silahkan berikan komentar/kritik/saran tentang artikel ini untuk kemajuan blog ini
Mohon untuk tidak berkomentar berbau SARA, Pornografi dan Kata-kata kasar agar tidak terjadi kesalah pahaman disini...
Terima Kasih