Membuat Efek Shadow atau Bayangan dengan CSS

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 :

Membuat Efek Shadow atau Bayangan dengan CSS

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.

Wassalamualaikum Wr. Wb.


Poskan Komentar

  1. Teman - teman kesulitan untuk Belajar Komputer karena kesibukan? kini kami memfasilitasi kursus komputer jarak jauh via online, silahkan kunjungi website kami di asianbrilliant.com, Master Komputer, Kursus Online

    Ayah, Bunda..butuh guru untuk mengajar anak-anak dirumah ? kami memfasilitasi 1000 guru untuk anak-anak ayah dan bunda datang kerumah, silahkan kunjungi website kami di smartsukses.com, Bimbingan Belajar, Les Private

    BalasHapus

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

 
Top