TipsIM.com - Cara membuat efek bayangan (Box-Shadow) menggunakan CSS. Bagi anda yang sering merenovasi template blog atau anda yang sering bergelut di dunia pemrograman web, pasti tidak asing lagi dengan coding CSS untuk membuat efek box-shadow pada suatu object atau text.
Untuk membuat efek bayangan sebenarnya sangat mudah sob. Anda hanya perlu menambahkan property box-shadow pada CSS objek atau text yang akan diberi efek bayangan. Seperti apa dan bagaimana cara membuat efek bayangan pada object atau text?
Berikut ini contohnya.
box-shadow: 5px 7px 10pxKode CSS di atas berarti akan memberikan efek bayangan dengan jarak 5 pixel ke kanan, 7 pixel ke bawah, dan dengan efek blur sebesar 10 pixel.
Nah, pada cara yang saya bagikan ini anda tidak perlu berpusing-pusing memikirkan angka yang akan anda cantumkan pada property box-shadow tersebut sob. Pada tutorial ini anda hanya tinggal menggeser tombol untuk memunculkan kode dengan efek bayangan yang diinginkan. Efek bayangan ini merupakan efek bayangan standar yang berada di tengah ke bawah.
Cara Membuat Efek Bayangan
1. Silahkan anda buka tool box-shadow di sini Tools Shadow Visualization.2. Setelah anda membuka halaman tool tersebut, silahkan anda geser-geser saja tombol analog di bawah object persegi panjang tersebut.
3. Dan pada kolom di bawahnya akan menampilkan coding sesuai dengan besar kecilnya efek bayangan yang anda pilih menggunakan analog.
4. Lalu anda copy kode box-shadow tersebut dan pastekan/letakkan pada CSS objek yang akan diberi efek bayangan.
5. Berikut ini cara meletakkan script box-shadow di template blog.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
.kotakz {
width: 140px;
height: 140px;
border: 2px solid #444;
background: #EB9532;
margin: 25px auto;
box-shadow : 0 11px 32px rgba(0, 0, 0, 0.44) ;
}
</style>
</head>
<body>
<div class='kotakz'></div>
</body>
</html>
Dan Berikut ini hasil dari coding di atas.
Jika anda ingin menerapkan efek bayangan pada text, silahkan ganti property box-shadow dengan text-shadow.
Oke, seperti itulah cara membuat efek bayangan pada suatu object. Semoga postingan yang saya bagikan ini bisa bermanfaat. Terima kasih telah menyempatkan waktunya untuk berkunjung dan membaca. Salam Blogger.
Post a Comment:
Komentar, kritik dan saran dari anda adalah motivasi untuk berkembangnya blog ini. Mohon tidak berkomentar dengan kata yang mengandung unsur sara, kekerasan, dan porn. Terima kasih. :)