Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS

Belajar CSS - Cara Membuat Efek Bayangan Dengan CSS (css-shadow)

Oleh Wahyup 2 komentar
Selamat Datang kembali teman teman, Pada kesempatan ini kita akan membahas Cara membuat Efek Bayangan pada Teks dan Membuat Efek Bayangan pada Box dengan CSS Shadow.

Property yang akan kita gunakan untuk membuat bayangan (shadow) pada Sebuah Teks kita menggunakan properti text-shadow, sedangkan untuk membuat Efek Bayangan pada Box kita akan menggunakan properti box-shadow.

Efek Bayangan CSS
Membuat Efek Bayangan Dengan CSS
Kedua Properti diatas, sama-sama berfungsi untuk membuat sebuah efek bayangan.
Baik teman teman kita akan langsung mencoba yah!! 

Membuat Efek Bayangan Untuk Teks

Untuk membuat Efek bayangan pada Teks, kita akan menggunakan Properti text-shadow.
Pertama kita akan membuat style css terlebih dahulu.

style.css
h2 {
 font-size: 35px;
 text-shadow: 3px 2px 1px grey;
}asd
Kemudian kita akan membuat HTML nya
index.html
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <h2>Bayangan Mantan</h2>
  </body>
</html>

Hasilnya adalah seperti ini

Bayangan Mantan

Wah sudah jadi nih teks bayangan punya teman teman hehe,, jangan bayangin mantan tapi xixixi..

Membuat Efek Bayangan Untuk Box

Baik teman-teman untuk membuat efek bayangan pada box, kita akan menggunakan properti box-shadow. Oke langsung saja.
Kita buat Style CSS nya terlebih dahulu
style.css
.box {
 height: 100px;
 width: 100px;
 background: #bf3052;
 box-shadow: 5px 10px 5px 5px #920b2b;
}
Kemudian kita akan membuat HTML nya
index.html
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Hasil yang akan dihasilkan adalah seperti ini teman-teman



Kita coba Dengan Kreatifitas Lain yuk..

Selanjutnya kita akan mencoba untuk menggabungkan Text dan Box disini, mari kita lihat!

Kita buat Style CSS nya terlebih dahulu
style.css
.box {
 padding: 5px;
 border: 1px dashed blue;
 box-shadow: 2px 4px 2px 2px #28beea;
}
Kemudian kita akan membuat HTML nya
index.html
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">Pergilah Dari Ingatan</div>
  </body>
</html>
Jika kita perhatikan maka hasilnya adalah seperti ini

Pergilah Dari Ingatan

Baik teman teman, ingin mencoba lainnya lagi? hehe silahkan teman teman untuk berkreasi untuk melatih yang sudah kita pelajari :)

Sekilas Penjelasan

Pada Property text-shadow, ataupun box-shadow kita menggunakan 4 digit angka yang berisi ukuran efek bayangan, berikut adalah penjelasan nya

 box-shadow: horizontal vertikal blur spread #28beea;

Maksudnya dari syntak diatas yaitu

horizontal, adalah besar bayangan kanan dan kiri.
vertikal, adalah besar volume bayangan dibawah box ataupun teks. 
blur, besar kecilnya nilai blur dari efek bayangan.
spread, yang berarti adalah besar atau kecil nya nilai penyebaran efek bayangan pada teks ataupun box
Kita coba satu-satu untuk melihat apa perbedaan yang dihasilkan dari perubahan yang kita lakukan,

Percobaan pada value horizontal 

Pergilah Dari Ingatan

Nah pada bagian horizontal saya merubah nilai dari 2px menjadi 10px, dan itulah hasilnya

Percobaan pada value vertikal

Pergilah Dari Ingatan

Nah pada bagian vertikal saya merubah nilai dari 4px menjadi 14px, dan itulah hasilnya

Percobaan pada value blur

Pergilah Dari Ingatan

Nah pada bagian blur saya merubah nilai dari 2px menjadi 10px, dan itulah hasilnya

Percobaan pada value spread

Pergilah Dari Ingatan


Nah pada bagian spread saya merubah nilai dari 2px menjadi 10px, dan itulah hasilnya

Baik teman teman, begitulah hasil perbedaan dari yang kita coba.

Kesimpulan

Kegunaan dari masing masing properti tersebut adalah sama, hanya tergantung kita bagaimana menggunakan nya.
dan jangan lupa untuk selalu mencoba, agar kita tahu hasilnya.

Baik mungkin cukup sekian teman-teman, terimakasih sudah berkunjung.

Salam Semangat!!

2 komentar untuk "Belajar CSS - Cara Membuat Efek Bayangan Dengan CSS (css-shadow)"