Cara Membuat Shadow dengan CSS

pembuatan halaman / page website kita dapat membuat sebuah shadow dengan bantuan CSS agar halaman menjadi lebih bagus, memiliki nilai estetika keindahan. Dengan CSS kita dapat mengatur tampilan antarmuka aplikasi berbasis web, agar interaksi antara pengguna dan aplikasi menjadi lebih baik. Termasuk dalam membuat shadow atau bayangan pada teks maupun box juga dapat menggunakan CSS. Pada artikel kali ini, mimin akan membahas mengenai Cara Membuat Shadow dengan CSS.

untuk membuat bayangan dengan CSS, menggunakan text-shadow, sedangkan pada box menggunakan box-shadow. kedua property ini memiliki beberapa nilai dengan urutan

1. h-offset, jarak bayangan secara horizontal.
2. v-offset, jarak bayangan secara vertikal.
3. blur, tingkat blur bayangan, semakin tinggi nilainya semakin blur.
4. spread, jarak penyebaran bayangan, semakin tinggi nilainya semakin menyebar jauh.
5. color, warna bayangan.
6. inset, untu membuat bayangan kedalam jika nilai dicantumkan.

dari property di atas. Property nomer 1 dan 2 wajib dicantumkan, sedangkan nomer 3 dan seterusnya opsional bebas, dapat dimasukkan ataupun tidak.

Text atau Box dapat memiliki bayangan lebih dari satu, dengan dipisahkan menggunakan koma.

contoh :

<style>
        .text1{
          text-shadow: 20px 10px red;
        }

        .text2{
          text-shadow: 20px 10px 5px red;
        }

        .text3{
          text-shadow: 0px 0px 3px magenta;
        }

        .text4{
          text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
        }

        .box1{
          background-color: #FF0000;
          box-shadow: 10px 10px 5px green;
        }
        .box2{
          background-color: #FF0000;
          box-shadow: 10px 10px 5px green, 20px 20px 5px blue,30px 30px 5px magenta,40px 90px 5px black;
        }
      </style>
      <h1 class="text1">Text Shadow</h1>
      <h2 class="text2">Text Shadow</h2>
      <p class="text3">Text Shadow</p>
      <p class="text4">Text Shadow</p>
      <div class="box1">Box Shadow<br><br><br><br></div>
      <br><br>
      <div class="box2">Box Shadow Berlapis<br><br><br><br></div>

style text1 hanya mencantumkan H-offset dan V-Offset dibandingkan dengan style text2 yang ditambahkan blur, bayangan terlihat ngeblur dan terlihat realistis. jika mengingnkan lebih dari 1 bayangan dapat menambahkan tanda koma pada proverty seperti contoh di atas, dan hasilnya seperti berikut

hasil:

Untuk CSS sendiri jika klaian ingin tidak ribet dalam pembuatan script, kalian dapat menggunakan framework. Framework CSS yang populer digunakan yatu bootstrap.

kalian bisa mendapatkan bootstraps di website resminya https://getbootstrap.com/

sampai sini artikel mengenai cara membuat bayangan menggunakan CSS, semoga bermanfaat sampai jumpa pada artikel berikutnya.