✔ Cara Menciptakan Box Shadow Pada Blog Terlengkap
Kali ini akan membagikan sebuah tutorial yaitu :
Cara Membuat Box Shadow Pada Blog Terlengkap
dan Berikut ini yakni isyarat CSS dasar untuk menciptakan efek bayangan pada objek:
CSS Bayangan Outset
div {
-webkit-box-shadow:10px 10px 7px #222;
-moz-box-shadow:10px 10px 7px #222;
box-shadow:10px 10px 7px #222;
}
-webkit-box-shadow:10px 10px 7px #222;
-moz-box-shadow:10px 10px 7px #222;
box-shadow:10px 10px 7px #222;
}
CSS Bayangan Inset
div {
-webkit-box-shadow:inset 10px 10px 7px #222;
-moz-box-shadow:inset 10px 10px 7px #222;
box-shadow:inset 10px 10px 7px #222;
}
-webkit-box-shadow:inset 10px 10px 7px #222;
-moz-box-shadow:inset 10px 10px 7px #222;
box-shadow:inset 10px 10px 7px #222;
}
10px yang pertama yakni ukuran offset sumbu X.
10px yang ke dua yakni offset sumbu Y.
7px yakni tingkat blur.
#222 yakni warna bayangan.
10px yang ke dua yakni offset sumbu Y.
7px yakni tingkat blur.
#222 yakni warna bayangan.
Sobat juga dapat menuliskan nilai offset negatif untuk menciptakan bayangan menuju ke arah sebaliknya.
Cara penerapannya dapat diletakkan secara top down ataupun inline ibarat ini:
Top-Down Inline
<style>
#kotak-1 {
-webkit-box-shadow:10px 10px 7px #222;
-moz-box-shadow:10px 10px 7px #222;
box-shadow:10px 10px 7px #222;
}
</style>
<div id='kotak-1'>OBJEK</div> <div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'>OBJEK</div>
<style>
#kotak-1 {
-webkit-box-shadow:10px 10px 7px #222;
-moz-box-shadow:10px 10px 7px #222;
box-shadow:10px 10px 7px #222;
}
</style>
<div id='kotak-1'>OBJEK</div> <div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'>OBJEK</div>
Box Shadow Outset (Bayangan diluar Kotak)
BOX 1
-webkit-box-shadow: 10px 5px 7px #222; -moz-box-shadow: 10px 5px 7px #222; box-shadow: 10px 5px 7px #222; BOX 2
-webkit-box-shadow: 0 10px 7px #222; -moz-box-shadow: 0 10px 7px #222; box-shadow: 0 10px 7px #222; BOX 3
-webkit-box-shadow: 10px 0 7px #222; -moz-box-shadow: 10px 0 7px #222; box-shadow: 10px 0 7px #222; BOX 4
-webkit-box-shadow: 0 0 7px #222; -moz-box-shadow: 0 0 7px #222; box-shadow: 0 0 7px #222; BOX 5
-webkit-box-shadow: 0 0 20px #222; -moz-box-shadow: 0 0 20px #222; box-shadow: 0 0 20px #222; BOX 6
-webkit-box-shadow: 0 0 20px #f10c0c; -moz-box-shadow: 0 0 20px #f10c0c; box-shadow: 0 0 20px #f10c0c; BOX 7
-webkit-box-shadow: 10px 5px 0 #222; -moz-box-shadow: 10px 5px 0 #222; box-shadow: 10px 5px 0 #222; BOX 8
-webkit-box-shadow:-10px -5px 0 #222; -moz-box-shadow: -10px -5px 0 #222; box-shadow: -10px -5px 0 #222; Lihat lebih lengkap teladan kesannya dibawah ini :
-webkit-box-shadow: inset 10px 5px 7px #222; -moz-box-shadow: inset 10px 5px 7px #222; box-shadow: inset 10px 5px 7px #222; -webkit-box-shadow: inset 0 10px 7px #222; -moz-box-shadow: inset 0 10px 7px #222; box-shadow: inset 0 10px 7px #222; -webkit-box-shadow: inset 10px 0 7px #222; -moz-box-shadow: inset 10px 0 7px #222; box-shadow: inset 10px 0 7px #222; -webkit-box-shadow: inset 0 0 7px #222; -moz-box-shadow: inset 0 0 7px #222; box-shadow: inset 0 0 7px #222; -webkit-box-shadow: inset 0 0 20px #222; -moz-box-shadow: inset 0 0 20px #222; box-shadow: inset 0 0 20px #222; -webkit-box-shadow: inset 0 0 20px #f10c0c; -moz-box-shadow: inset 0 0 20px #f10c0c; box-shadow: inset 0 0 20px #f10c0c; -webkit-box-shadow: inset 10px 5px 0 #222; -moz-box-shadow: inset 10px 5px 0 #222; box-shadow: inset 10px 5px 0 #222; -webkit-box-shadow: inset -10px -5px 0 #222; -moz-box-shadow: inset -10px -5px 0 #222; box-shadow: inset -10px -5px 0 #222;
0 Response to "✔ Cara Menciptakan Box Shadow Pada Blog Terlengkap"
Posting Komentar