Cara membuat efek shadow dg CSS
pada kesempatan kal ini saya akan berbagi bagaimana cara membuat efek shadow dengan menggunakan CSS
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;
-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;
-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;
-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;
-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;
-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;
-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;
-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;
-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;
-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;
-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;
-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;
-moz-box-shadow: inset -10px -5px 0 #FF0000;
box-shadow: inset -10px -5px 0 #FF0000;
Share story
.jpg)
0 komentar:
Harap Tinggalkan Jejak Setelah Membaca
Jangan Menggunakan Kata Kata Kasar/Mengandung Sara
Berkomenlah Sesuai Topik :D