Iklan bawah header

Belajar CSS 3 : Membuat Efek Bayangan dengan CSS

membuat efek bayangan

Ada berbagai macam efek sederhana yang bisa kita buat dengan memanfaatkan properti pada CSS, salah satunya yang bisa kita buat adalah efek bayangan (shadow). Properti untuk membuat efek bayangan(shadow) mulai dikenalkan pada CSS3.

Ada dua properti shadow yang digunakan untuk membuat efek terhadap objek yaitu text-shadow dan box-shadow. Properti text-shadow digunakan untuk membuat bayangan pada teks, Sedangkan properti box-shadow digunakan untuk membuat bayangan untuk kotak atau elemen kontainer.

Membuat Efek Bayangan (shadow) Pada Teks

Tak perlu basa-basi lagi, langsung saja ke contoh dan silahkan kalian buat style CSS-nya seperti ini.


h2 {
text-shadow: 3px 2px 1px grey;
font-size: 40px;
}

Kemudian buat HTML-nya:


<!DOCTYPE html>
<html>
<head>
<title>Membuat Shadow</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h2>Shadow!</h2>
</body>
</html>

Hasilnya:

text-shadow

Membuat Efek Bayangan (Shadow) Pada Box

Selanjutnya mari kita coba untuk membuat bayangan pada kota atau kontainer.

style.css


.kotak {
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
padding: 10px;
border: 1px solid grey;
}

shadow.html


<!DOCTYPE html>
<html>
<head>
<title>Membuat Shadow Pada Box</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="kotak">bayangan pada kotak atau kontainer</div>
</body>
</html>

Hasilnya:

box-shadow

Penjelasan Nilai Pada Properti Bayangan

Bagaimana, mudah bukan untuk membuat bayangan pada teks dan box?

Untuk membuat efek shadow, ada empat nilai yang dimiliki properti bayangan yang harus diberikan:


box-shadow: x y z warna;
  1. nilai x pada properti bayangan digunakan untuk menentukan arah horizontal
  2. nilai y untuk menentukan arah vertikal
  3. nilai z untuk mengatur keburaman (blur) bayangan
  4. nilai warna, bisa menggunakan kode warna, nama warna, rgb(), rgba(), dan sebagainya.

Jika kita memberikan nilai negatif pada nilai x dan y, maka efek bayangannya akan mengarah ke atas. Sedangkan untuk nilai z tidak boleh negatif.

Contoh:


.kotak {
box-shadow: -4px -4px 3px rgba(0,0,0,0.4);
padding: 10px;
border: 1px solid grey;
}

Hasilnya akan seperti ini:

membuat efek bayangan dengan css

Membuat Bayangan Masuk ke Dalam

Jika kita ingin membuat efek bayangan berada di dalam kotak, kita hanya perlu menambahkan kata kunci inset.

Contoh:


.kotak {
box-shadow: inset 4px 4px 5px rgba(0,0,0,0.4);
padding: 10px;
border: 1px solid grey;
}

Hasilnya:

membuat efek bayangan ke dalam kotak

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel