Saturday, 23 March 2019

Membuat Efek Bayangan Menggunakan CSS Box-Shadow

March 23, 2019 Leave a Reply
Didalam bahasa pemograman CSS terdapat fitur box-shadow yang dapat memberikan efek bayangan pada suatu objek yang disematkan dengan sintak ini.


 sumber gambar: pluralsight.com

Untuk membuat Efek bayangan ini, perlu perpaduan dua bahasa pemograman yaitu HTML dan CSS.

Fitur box-shadow bisa diisi dengan berapa nilai sesuai ukurannya, paling tidak kita memerlukan 2 nilai utama yang menentukan jarak efek bayangannya.

 Sebagi contohnya :
<!DOCTYPE html>
<html>
<head>
<title>AREK BAKA</title>
<style>
   img {
     width: 200px;
     height: 200px;
     border: 2px solid red;
     background-color: blue;
     margin: 30px;
     box-shadow: 7px 7px;
   }
</style>
</head>
<body>
    <img></img>
</body>
</html>
Dan hasilnya:

box-shadow: 7px 7px; menandakan bahwa efek bayangan berada 7 pixel di sebelah bawah dan 7 pixel disebelah kanan objek. jika kita ingin memberikan efek bayangan berada di sebelah atas dan kiri, kita tinggal menambahkan tanda negatif (-) di depan angka tersebut.

<!DOCTYPE html>
<html>
<head>
<title>AREK BAKA</title>
<style>
   img {
     width: 200px;
     height: 200px;
     border: 2px solid red;
     background-color: blue;
     margin: 30px;
     box-shadow: -7px -7px;
   }
</style>
</head>
<body>
    <img></img>
</body>
</html>
Dan hasilnya :

 Selain memberikan efek bayangan, kita juga bisa mengatur blur pada efek bayangan yang kita berikan pada suatu objek. Sebagai contohnya :
<!DOCTYPE html>
<html>
<head>
<title>AREK BAKA</title>
<style>
   img {
     width: 200px;
     height: 200px;
     border: 2px solid red;
     background-color: blue;
     margin: 30px;
     box-shadow: 7px 7px 12px;
   }
</style>
</head>
<body>
    <img></img>
</body>
</html>
Dan hasilnya :
box-shadow: 7px 7px 12px; menandakan bahwa 7 pixel disebelah bawah objek, 7 pixel disebelah kanan objek dan 12 pixel untuk memberikan efek blur pada efek bayangan tersebut.

 jika kita ingin mengatur besar efek bayangan pada suatu objek, kita bisa menambahkan nilai pada box-shadow yang disebut dengan spread. Spread akan menentukan besar dan kecilnya efek bayangan. sebagai contohnya:
<!DOCTYPE html>
<html>
<head>
<title>AREK BAKA</title>
<style>
   img {
     width: 200px;
     height: 200px;
     border: 2px solid red;
     background-color: blue;
     margin: 30px;
     box-shadow: 7px 7px 12px 15px;
   }
</style>
</head>
<body>
    <img></img>
</body>
</html>
Dan hasilnya:
box-shadow: 7px 7px 12px 15px; angka 15 px menunjukkan ketebalan dari efek bayangan pada objek tersebut.

 Selain itu kita juga bisa memberikan warna pada efek bayangan tersebut. Dengan cara sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>AREK BAKA</title>
<style>
   img {
     width: 200px;
     height: 200px;
     border: 2px solid red;
     background-color: blue;
     margin: 30px;
     box-shadow: 7px 7px 7px 2px yellow ;
   }
</style>
</head>
<body>
    <img></img>
</body>
</html>
Dan hasilnya akan seperti ini:


Daftar Pustaka : Duniailkom
Tags:
Previous Post
Next Post

0 comments: