Cara Penggunaan Efek Shadow CSS

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 :)

6 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat