Mengenal CSS Dasar Box Shadow

Mengenal CSS Dasar Box Shadow - BOX berarti border atau sisi garis yang berbentuk persegi jika dalam sebuah kanvas, sedangkan SHADOW merupakan efek bayangan yang dihasilkan dari box default atau awal box, yang jika kita ilustrasikan dalam sebuah gambar tampilannya kurang lebih seperti ini

Tidak jauh berbeda dengan artikel saya sebelumnya tentang Pembahasan TEXT SHADOW pada dasarnya fungsi kedua efek ini sama, yaitu untuk membuat efek bayangan pada sebuah obyek, jika Anda ingin membuat efek bayangan untuk tulisan, maka kode penerapan menggunakan CSS text-shadow, begitu pula pada sebuah box dengan menggunakan kode CSS box-shadow
Intinya terletak pada offset sumbu (x) + (y) = ? (n), sehingga Anda akan lebih mudah untuk menciptakan efek bayangan (Shadow) pada sebuah obyek seperti CSS Dasar Box Shadow seperti contoh berikut

Pengenalan kode box shadow

1. Tahap Dasar
2. Box Shadow Bayangan
3. Multi Box Shadow

Box Shadow Tahap Dasar

css, .div {
  -webkit-box-shadow:2px 2px 5px black;
  -moz-box-shadow:2px 2px 5px black;
  box-shadow:2px 2px 5px black;

// atau seperti ini:

  -webkit-box-shadow:2px 2px 5px rgb (68, 68, 68);
  -moz-box-shadow:2px 2px 5px rgb (68, 68, 68);
  box-shadow:2px 2px 5px  rgb (68, 68, 68);
}

KETERANGAN

Nilai 2px yang pertama adalah offset sumbu (x), 2px yang ke dua adalah offset sumbu (y), 7px adalah tingkat blur bayangan (n), black dan rgb (68, 68, 68) adalah warna efek bayangan

Hasilnya-

Tuliskan Sesuatu Disini....

Box Shadow Bayangan

div {
  -webkit-box-shadow:0px 0px 5px 10px #727;
  -moz-box-shadow:0px 0px 5px 10px #727;
  box-shadow:0px 0px 5px 10px #727;
}

Hasilnya-

Tuliskan Sesuatu Disini....

Multi Box Shadow

Penerapan efek bayangan box shadow berikut sama seperti cara pertama, hanya saja kita membuat lebih dari satu baris deklarasi bayangan dengan nilai akhir (n) menggunakan ragam warna. Dan jangan lupa untuk setiap satu bayangan Anda pisahkan dengan tanda koma (,)

div {
  -webkit-box-shadow:
    5px 5px 0px red,
    10px 10px 0px green,
    15px 15px 0px blue,
    20px 20px 0px yellow,
    20px 20px 3px black;
  -moz-box-shadow:
    5px 5px 0px red,
    10px 10px 0px green,
    15px 15px 0px blue,
    20px 20px 0px yellow,
    20px 20px 3px black;
  box-shadow:
    5px 5px 0px red,
    10px 10px 0px green,
    15px 15px 0px blue,
    20px 20px 0px yellow,
    20px 20px 3px black;
}

Hasilnya

Tuliskan Sesuatu Disini....

Bagaimana? cukup mudah bukan..!!, Intinya adalah kode perhitungan offset sumbu pada obyek tersebut, jika kita memahami obyek mana yang akan kita beri efek bayangan, maka deklarasi kode css box shadow diatas dapat kita bentuk dengan model yang berbeda, tentunya dengan menggabungkan beberapa kode css seperti border-radius. Dan hasilnya..

...SELAMAT MENCOBA...

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mengenal CSS Dasar Box Shadow
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/03/mengenal-css-dasar-box-shadow.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77