Belajar CSS3 membuat efek bayangan pada elemen

belajar css

Fitur baru shadow pada CSS3

Pada CSS3 terdapat fitur baru yaitu shadow, yang berarti bayangan. Sesuai dengan namanya shadow digunakan untuk membuat bayangan pada elemen. Shadow sendiri terdapat dua jenis, yaitu:

  • box-shadow
  • text-shadow

CSS box-shadow

Dengan property box-shadow Anda bisa menggunakannya untuk membuat efek bayangan pada box seperti elemen <div> atau elemen yang lainnya. Dalam box-shadow Anda bisa menentukan arah horizontal, vertikal, blur, spread dan warna.

Sebagai contoh: box-shadow: 10px 20px 5px 15px blue;

Yang berarti Anda memberikan nilai:

  • 10px – menentukan arah horizontal dari kiri ke kanan
  • 20px – menentukan arah vertikal dari atas ke bawah
  • 5px – menentukan tingkat transparansi atau blur
  • 15px – menentukan penyebaran ukuran box shadow
  • blue – memberikan warna pada box seperti blue atau biru

Anda bisa menentukan arah sebaliknya dengan memberikannya nilai negatif. Akan tetapi nilai negatif tidak didukung pada sebagian besar browser lama. Dalam penggunaan yang paling sederhana, Anda bisa menentukan arah horizontal dan arah vertikal tanpa memberikan nilai blur dan warna.

Berikut contoh box-shadow hanya menentukan arah horizontal dan vertikal:

Contoh:

Editor Online
  1. #box {
  2. box-shadow: 10px 20px;
  3. }

Jika Anda tidak memberikan warna pada box-shadow, secara default akan diberi warna black atau hitam

Berikut contoh box-shadow ditambah warna:

Contoh:

Editor Online
  1. #box {
  2. box-shadow: 10px 20px blue;
  3. }

Berikut contoh box-shadow ditambah blur:

Contoh:

Editor Online
  1. #box {
  2. box-shadow: 10px 20px 5px blue;
  3. }

Berikut contoh box-shadow ditambah spread:

Contoh:

Editor Online
  1. #box {
  2. box-shadow: 10px 20px 5px 15px blue;
  3. }

CSS text-shadow

Dengan property text-shadow Anda bisa menggunakannya untuk membuat efek bayangan pada text atau tulisan. Dalam text-shadow Anda bisa menentukan arah horizontalvertikalblur dan warna.

Sebagai contoh: text-shadow: 2px 3px 5px yellow;

Yang berarti Anda memberikan nilai:

  • 2px – menentukan arah horizontal dari kiri ke kanan
  • 3px – menentukan arah vertikal dari atas ke bawah
  • 5px – menentukan tingkat transparansi atau blur
  • yellow – memberikan warna pada text seperti yellow atau kuning

Anda bisa menentukan arah sebaliknya dengan memberikannya nilai negatif. Akan tetapi nilai negatif tidak didukung pada sebagian besar browser lama. Dalam penggunaan yang paling sederhana, Anda bisa menentukan arah horizontal dan arah vertikal tanpa memberikan nilai blur dan warna.

Berikut contoh text-shadow hanya menentukan arah horizontal dan vertikal:

Contoh:

Editor Online
  1. h2 {
  2. box-shadow: 1px 2px;
  3. }

Jika Anda tidak memberikan warna pada text-shadow, secara default akan diberi warna black atau hitam

Berikut contoh text-shadow ditambah warna:

Contoh:

Editor Online
  1. h2 {
  2. box-shadow: 2px 3px yellow;
  3. }

Berikut contoh text-shadow ditambah blur:

Contoh:

Editor Online
  1. h2 {
  2. box-shadow: 2px 3px 5px blue;
  3. }

Multiple shadow

Anda juga bisa menambahkan multi shadow atau menambahkan beberapa bayangan pada text atau elemen. Untuk memisahkan satu sama lain menggunakan koma.

Contoh:

Editor Online
  1. #box {
  2. box-shadow: 10px 10px 2px red, 20px 20px 2px blue;
  3. }
  4. h2 {
  5. text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  6. }

Daftar property CSS3 shadow

PropertyKegunaanya
box-shadowDigunakan untuk memberikan bayangan pada box atau elemen
text-shadowDigunakan untuk memberikan bayangan pada text atau tulisan

Leave a Reply

Your email address will not be published. Required fields are marked *