Membuat Efek Bayangan (Box Shadow) Dengan CSS

Apa Itu CSS?

CSS merupakan kependekan atau singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website sehingga akan lebih terstruktur dan seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

Sebelum memasuki dunia CSS, anda harus mampu menguasai dasar-dasar HTML

CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Cara Sederhana Membuat CSS Box Shadow

CSS Box Shadow sering digunakan untuk menampilkan bayangan pada elemen level-blok ( seperti div ). Dalam CSS menggunakan properti box-shadow menempel satu atau lebih bayangan yang muncul pada sebuah box. Properti box-shadow dapat diterapkan pada browser Firefox, Chrome, IE, Safari dan Opera. Mari kita lihat contoh CSS di bawah dengan melihat gambar diatas :

Box :”A”

.shadow {

  -moz-box-shadow:    3px 3px 5px 6px #ccc;

  -webkit-box-shadow: 3px 3px 5px 6px #ccc;

  box-shadow:         3px 3px 5px 6px #ccc;

}

Beberapa istilah properti yang dipakai pada CSS Box Shadow

1. Bayangan offset horisontal, untuk offset positif berarti bayangan akan berada di sebelah kanan boxsedangkan untuk offset negatif akan menempatkan bayangan pada sebelah kiri box.

2. Bayangan offset vertikal, untuk offset negatif berarti bayangan akan berada di atas box sedangkan offset positif berarti bayangan akan berada di bawah box.

3. Radius blur (opsional), jika diatur pada posisi 0 bayangan akan menjadi tajam, pemberian angka yang lebih tinggi, bayangan pada box akan menjadi lebih blur (buram).

4. Radius penyebaran (opsional), untuk nilai positif akan menambah ukuran bayangan dan untuk nilai negatif  akan mengurangi ukuran. Standar yang digunakan adalah 0 (bayangan adalah ukuran yang sama seperti blur)

5. Warna, default warna bayangan box adalah warna hitam, namun bisa diatur dengan warna yang lain.

SHADOW INNER ( Bayangan di dalam box )

Box “B”

.shadow {

   -moz-box-shadow:    inset 0 0 10px #000000;

   -webkit-box-shadow: inset 0 0 10px #000000;

   box-shadow:         inset 0 0 10px #000000;

}

Bayangan di Satu-Sisi

Box “C”

.one-edge-shadow {

            -webkit-box-shadow: 0 8px 6px -6px black;

               -moz-box-shadow: 0 8px 6px -6px black;

                    box-shadow: 0 8px 6px -6px black;

}

Catatan : Anda tidak langsung mencopas kode "ELEMENT" langsung sama persis seperti diatas,karena element yang akan anda modifikasi pada template blog tentu berbeda, bisa jadi yang ingin anda rubah adalah box pada element body content,post-body atau element pada side bar.

Selamat Mencoba & Semoga Bermanfaat.

Jika Anda memiliki masalah dengan penempatan kode seperti diatas, silahkan kontak admin