Daftar Lengkap Kode CSS Shadow atau Bayangan

Efek Shadow merupakan sebuah efek tampilan suatu objek yang memiliki bayangan di belakang objek tersebut.  dengan menambahkan efek ini di blog anda, mungkin bisa membuat tampilan blog anda lebih terlihat indah dan semarak. Membuat shadow effect ini, dibuat dengan menggunakan kode CSS. Oleh karena itu, Yang perlu anda pahami dalam membuat efek bayangan ini adalah beberapa kode CSS.

            Pada intinya, kode CSS untuk efek shadow sederhana sekali. Ada tiga property CSS yang digunakan dalam membuat Efek bayangan ini, yaitu :

-webkit-box-shadow: 5px 5px 10px #FF0000;          ( untuk browser safari)

-moz-box-shadow :5px 5px 10px #FF0000;              (untuk browser mozilla)

box-shadow: 5px 5px 10px #FF0000;

keterangannya, pada nilai 5px pertama itu adalah ukuran offset sumbu-X, 5px kedua ukuran offset sumbu-Y, dan 10px untuk mengatur tingkat blur shadow. Secara default, kode diatas membuat efek shadow diluar objek. tapi Anda juga bisa menambahkan value “inset” untuk membuat efek bayangan didalam objek.

-webkit-box-shadow: inset 10px 5px 7px #FF0000;
-moz-box-shadow:inset 10px 5px 7px #FF0000;
box-shadow:inset 10px 5px 7px #FF0000;

ketiga properti tersebut digunakan karena tidak semua orang menggunakan browser yang sama. Hal itu bermaksud agar tampilan nya di setiap browser akan tetap sama. Nah, dibawah ini adalah beberapa macam Tampilan Shadow beserta kode-kode CSS nya yang mungkin bisa anda terapkan di blog anda untuk mempercantik blog anda.

-webkit-box-shadow: 10px 5px 7px #FF0000;
-moz-box-shadow: 10px 5px 7px #FF0000;
box-shadow: 10px 5px 7px #FF0000;

-webkit-box-shadow: 10px 0 7px #FF0000;
-moz-box-shadow: 10px 0 7px #FF0000;
box-shadow: 10px 0 7px #FF0000;

-webkit-box-shadow: 0 0 7px #FF0000;
-moz-box-shadow: 0 0 7px #FF0000;
box-shadow: 0 0 7px #FF0000;

-webkit-box-shadow: 0 0 20px #FF0000;
-moz-box-shadow: 0 0 20px #FF0000;
box-shadow: 0 0 20px #FF0000;

-webkit-box-shadow: 10px 5px 0 #FF0000;
-moz-box-shadow: 10px 5px 0 #FF0000;
box-shadow: 10px 5px 0 #FF0000;

-webkit-box-shadow: -10px -5px 0 #FF0000;
-moz-box-shadow: -10px -5px 0 #FF0000;
box-shadow: -10px -5px 0 #FF0000;

-webkit-box-shadow: inset 10px 5px 7px #FF0000;
-moz-box-shadow: inset 10px 5px 7px #FF0000;
box-shadow: inset 10px 5px 7px #FF0000;

-webkit-box-shadow: inset 0 10px 7px #FF0000;
-moz-box-shadow: inset 0 10px 7px #FF0000;
box-shadow: inset 0 10px 7px #FF0000;

-webkit-box-shadow: inset 10px 0 7px #FF0000;
-moz-box-shadow: inset 10px 0 7px #FF0000;
box-shadow: inset 10px 0 7px #FF0000;

-webkit-box-shadow: inset 0 0 20px #FF0000;

-moz-box-shadow: inset 0 0 20px #FF0000; 

box-shadow: inset 0 0 20px #FF0000;

-webkit-box-shadow: inset 10px 5px 0 #FF0000;
-moz-box-shadow: inset 10px 5px 0 #FF0000;
box-shadow: inset 10px 5px 0 #FF0000;

-webkit-box-shadow: inset -10px -5px 0 #FF0000;
-moz-box-shadow: inset -10px -5px 0 #FF0000;
box-shadow: inset -10px -5px 0 #FF0000;

Selamat Mencoba !!!

Share :

Tweet

✚

Related Post