Efek Bayangan Box Shadow-Dengan CSS

byAlice •
0
Efek Bayangan Box Shadow-Dengan CSS - Hallo sahabat Alice Blogger, Pada Artikel yang anda baca kali ini dengan judul Efek Bayangan Box Shadow-Dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel BLOGER, Artikel CSS, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Efek Bayangan Box Shadow-Dengan CSS
link : Efek Bayangan Box Shadow-Dengan CSS

Baca juga


Efek Bayangan Box Shadow-Dengan CSS

Efek Bayangan Box Shadow-Dengan CSS

Efek Bayangan Box Shadow-Dengan CSS


Berikut ini  kode CSS dasar untuk membuat efek bayangan pada objek:
CSS Bayangan Outset
1
2
3
4
5
div {
  -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */
  -moz-box-shadow:10px 10px 7px #222;    /* Firefox */
  box-shadow:10px 10px 7px #222;         /* W3C */
}

CSS Bayangan Inset

1
2
3
4
5
div {
  -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Chrome */
  -moz-box-shadow:inset 10px 10px 7px #222;    /* Firefox */
  box-shadow:inset 10px 10px 7px #222;         /* W3C */
}

10px yang pertama adalah ukuran offset sumbu X, 10px yang ke dua adalah offset sumbu Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya.

Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:
 
top down
1
2
3
4
5
6
7
8
<style>
#itonk-art {
  -webkit-box-shadow:10px 10px 7px #222;
  -moz-box-shadow:10px 10px 7px #222;
  box-shadow:10px 10px 7px #222;
}
</style>
<div id='itonk-art'>OBJEK TOP DOWN</div>


OBJEK TOP DOWN


inline

1
<div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'>OBJEK INLINE</div>

OBJEK INLIE

Contoh-contoh penerapan yang lebih detail., warna biru dan merah untuk mempertegas bagian mana yang harus menjadi perhatian:

CSS Bayangan Outset

-webkit-box-shadow: 12px 6px 8px #222;
-moz-box-shadow: 12px 6px 8px #222;
box-shadow: 12px 6px 8px #222;


-webkit-box-shadow: 0 12px 8px #222;
-moz-box-shadow: 0 12px 8px #222;
box-shadow:0 12px 8px #222;


-webkit-box-shadow: 12px 0 8px #222;
-moz-box-shadow: 12px 0 8px #222;
box-shadow:12px 0 8px #222;


-webkit-box-shadow: 12px 6px 8px #FF0000;
-moz-box-shadow: 12px 6px 8px #FF0000;
box-shadow: 12px 6px 8px #FF0000;


-webkit-box-shadow: 0 0 8px #222;
-moz-box-shadow: 0 0 8px #222;
box-shadow: 0 0 8px #222;


-webkit-box-shadow: 0 0 30px #222;
-moz-box-shadow: 0 0 30px #222;
box-shadow: 0 0 30px #222;

-webkit-box-shadow: 12px 6px 0 #222;
-moz-box-shadow: 12px 6px 0 #222;
box-shadow: 12px 6px 0 #222;

CSS Bayangan Inset

-webkit-box-shadow: inset 12px 6px 8px #222;
-moz-box-shadow: inset 12px 6px 8px #222;
box-shadow: inset 12px 6px 8px #222;

-webkit-box-shadow: inset 0 12px 8px #222;
-moz-box-shadow: inset 0 12px 8px #222;
box-shadow: inset 0 12px 8px #222;

-webkit-box-shadow: inset 12px 0 8px #222;
-moz-box-shadow: inset 12px 0 8px #222;
box-shadow:inset 12px 0 8px #222;

-webkit-box-shadow: inset 0 0 30px #FF0000;
-moz-box-shadow: inset 0 0 30px #FF0000;
box-shadow: inset 0 0 30px #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 0 0 10px #FF0000;
-moz-box-shadow: inset 0 0 10px #FF0000;
box-shadow: inset 0 0 10px #FF0000;

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

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

-webkit-box-shadow: inset 0 0 10px #222;
-moz-box-shadow: inset 0 0 10px #222;
box-shadow: inset 0 0 10px #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 30px #222;
-moz-box-shadow: inset 0 0 30px #222;
box-shadow: inset 0 0 30px #222;

-webkit-box-shadow: inset 12px 6px 0 #222;
-moz-box-shadow: inset 12px 6px 0 #222;
box-shadow: inset 12px 6px 0 #222;

-webkit-box-shadow: inset -12px -6px 0 #222;
-moz-box-shadow: inset -12px -6px 0 #222;
box-shadow: inset -12px -6px 0 #222;


Multiple Box Shadow
Sama seperti cara pertama, hanya saja perlu dibuat lebih dari satu baris deklarasi bayangan. Setiap satu bayangan dipisahkan dengan tanda koma:


1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
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;
}

1
2
3
4
5
div {
  -webkit-box-shadow:0px 0px 5px 10px black;
  -moz-box-shadow:0px 0px 5px 10px black;
  box-shadow:0px 0px 5px 10px black;
}


Syntax

1
2
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);




Anda baru saja membaca artikel Efek Bayangan Box Shadow-Dengan CSS , Semoga bermanfaat


Demikianlah Artikel Efek Bayangan Box Shadow-Dengan CSS

Sekianlah artikel Efek Bayangan Box Shadow-Dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Efek Bayangan Box Shadow-Dengan CSS dengan alamat link https://www.alicewinklers-blogku.eu.org/2015/08/efek-bayangan-box-shadow-dengan-css.html
Tags:
Lebih baru Lebih lama