Cara Membuat Efek Bayangan dengan CSS

Cara Membuat Efek Bayangan dengan CSS Box Shadow, Pada kesempatan kali ini kami akan memberikan sebuah tutorial tentang cara membuat efek bayangan box shadow menggunakan CSS. Efek bayangan box shadow ini memang sangat menarik, membuat website atau blog semakin memiliki kesan grafis yang cukup memikat, apalagi jika dipadukan dengan drop down menu

Secara umum syntax dasar box-shadow untuk membuat efek bayangan dengan CSS adalah sebagai berikut:

box-shadow: …px …px …px …px color;

Dalam implementasinya terdapat 5 bagian / property yang terdapat dalam box shadow yaitu:

• Horizontal offset : Jika nilainya positif maka bayangan akan berada disebelah kanan kotak, dan jika negatif maka bayangan akan berada disebelah kiri kotak.
• Vertikal offset : Jika nilainya positif maka bayangan akan berada dibawah kotak, dan jika negatif maka bayangan akan berada diatas kotak.
• Blur radius : Jika nol maka akan seperti bayangan biasa, dan jika nilainya semakin besar maka bayangan akan tampak menjadi blur.
• Spread Radius (optional).
• Warna bayangan.

Cara Membuat Efek Bayangan dengan CSS

Untuk dapat membuat efek bayangan (box shadow) dengan CSS seperti pada gambar di atas, Anda dapat menyisipkan Script CSS berikut:

.css3-bayangan:after{
    content:"";
    position:absolute;
    z-index:-1;
    top:100%;
    bottom:0;
    width:120%;
    height:50px;
    left:-10%;
    right:-10%;
    background:-webkit-radial-gradient(50% -3%, ellipse cover, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 40%);
    background:radial-gradient(ellipse at 50% -3%, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 40%);
}

Demikian tutorial bagaimana cara membuat efek bayangan dengan css box shadow. Jika masih kurang memahami tutorial ini, Anda dapat memberikan pertanyaan melalui form komentar. Semoga dapat membantu

Bagikan Artikel ini