Cara Penggunaan Efek Shadow CSS

06/10/2019    Risman Hakim    12     Website

Cara Penggunaan Efek Shadow CSS - Ada banyak sekali efek sederhana yang bisa kita buat dengan memanfaatkan properti properti pada CSS salah satu yang bisa kita buat adalah efek bayangan (shadow). Pada CSS ada dua properti shadow untuk membuat efek terhadap objek yaitu text-shadow dan box-shadow. Lalu bagaimana cara menggunakan properti text-shadow dan box-shadow ? simak selengkanya Cara Penggunaan Efek Shadow CSS berikut ini.

1. Text Shadow

Properti text-shadow adalah properti CSS yang khusus untuk menambahkan efek terhadap teks saja. Contoh penggunaan pada teks misalnya menambahkan bayangan secara horizontal atau secara vertikal. Berikut adalah cara penggunaan text-shadow pada teks :

<!-- CSS -->
<style>
    h3 {
        color: #2962ff;
        text-shadow: 2px 2px;
    }
</style>
<!-- HTML -->
<body>
    <h3>DUMET School.</h3>
</body>

Dan beberapa value yang bisa ditambahkan pada shadow, seperti warna bayangan, tingkat blur bayangan dan lain sebagainya. Seperti berikut :

<!-- CSS -->
<style>
    h3 {
        color: #2962ff;
        text-shadow: 2px 2px 3px black;
    }
</style>
<!-- HTML -->
<body>
    <h3>DUMET School.</h3>
</body>

2. Box Shadow

Satu lagi efek bayangan (shadow) CSS yaitu box-shadow, efek ini berlaku pada setiap elemen, misalnya pada gambar, elemen div dan yang lainnya. Berikut adalah cara penggunaan properti box-shadow pada elemen div : 

<!-- CSS -->
<style>
    div {
        color: white;
        width: 400px;
        padding: 10px;
        background: darkcyan;
        box-shadow: 2px 2px 3px red;
    }
</style>
<!-- HTML -->
<body>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</body>

Kedua properti ini memliki value yang sama hanya saja nama properti yang digunakan berbeda yaitu text-shadow digunakan untuk teks dan box-shadow digunakan untuk elemen.

Baik, cukup sekian pembahasan mengenai Cara Penggunaan Efek Shadow CSS, semoga bermanfaat selamat mencoba dan sampai jumpa ditutorial selanjutnya :)

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More