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

Box shadow image

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 Indriyani
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 >>
= TERIMA KASIH =

15 komentar

  1. saya blm ngerti sama sekali tentang box shadow mbak, jadi ijin mengawali belajar ya mbak, hehehe :D artikel di blog ini benar2 keren semuanya, makasih telah berbagi :)

    BalasHapus
    Balasan
    1. masih belajar kok mbak,justru mbak yang jauh lebih tahu daripada saya kok,,hehe

      Hapus
  2. kalo soal ccs gni saya nyerah ajalah mbak..

    BalasHapus
    Balasan
    1. belum bertanding sudah kalah dan nyerah sih,,hehe

      Hapus
    2. Kalau saya copy script yang dibawah itu kemudian saya pasang di blog saya nanti otomatis blog saya dapat backlink gtu

      Hapus
    3. maksudnya scriptnya dibawah yang mana ya mas.?

      Hapus
    4. yang di footer mbak.. jdulnya Free Backlink For You

      Hapus
  3. Keren kalau sudah pinter ya mbak..saya pengen belajar supaya bisa
    makasih

    BalasHapus
    Balasan
    1. bukannya pintar kok mbak, cuma menonjol dalam bidang tertentu saja, kita kan masih dalam tahap belajar mbak

      Hapus
  4. ini tips mempercantik tampilan web atau blog ya mbak Devy. terima kasih ilmunya

    BalasHapus
  5. boleh kenalan gak ya? hehe soalnya saya belum kenal sama si css, tapi susah juga ya untuk mengenalnya. terimakasih..

    www.bas-studio.com

    BalasHapus
  6. saya ngikut belajar dulu :)

    BalasHapus
  7. mau nyoba tapi blom ada waktu , disimpen dlu deh , nicepost

    BalasHapus
  8. JIka box-shadow nya tidak menggunakan webkit dan moz apa ada pengaruhnya mbak, soalnya saya hanya menerapkan kode box-shadownya saja tanpa kode webkit dan moz.

    BalasHapus
    Balasan
    1. sistem pembacaan bahasa kode oleh browser, karena tidak semua pengguna menggunakan browser mozilla, jika box-shadow mungkin bahasa ini terbaca olehnya,tetapi bagaimana dengan safari dan crhome.
      setahu saya sic begitu mas

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK