Box-Shadow Didalam

oleh : nama unik

Box Shadow diartikel sebelumnya menampilkan efek bayangan diluar, tapi kali efek bayangan akan muncul didalam.

box-shadow:inset 5px 6px 7px #444; -moz-box-shadow:inset 5px 6px 7px #444; -webkit-box-shadow:inset 5px 6px 7px #444; -o-box-shadow:inset 5px 6px 7px #444;

Keterangan

• Menambahkan kata inset.
• 5px (mengatur bayangan yang dipinggir)
• 6px (mengatur bayangan yang dibawah atau diatas)
• 7px (mengatur blur)
• #444 (mengatur warna)

Jadinya

Nano Yulianto

bayangan sebaliknya

box-shadow:inset -5px -6px 7px #444; -moz-box-shadow:inset -5px -6px 7px #444; -webkit-box-shadow:inset -5px -6px 7px #444; -o-box-shadow:inset -5px -6px 7px #444;

Nano Yulianto

Atau beberapa contoh berikut

Contoh satu:

box-shadow:inset 0px -15px 5px #fff; -moz-box-shadow:inset 0px -15px 5px #fff; -webkit-box-shadow:inset 0px -15px 5px #fff; -o-box-shadow:inset 0px -15px 5px #fff;

Nano Yulianto

Contoh dua:

box-shadow:inset 0px 5px 25px #ffff00; -moz-box-shadow:inset 0px 5px 25px #ffff00; -webkit-box-shadow:inset 0px 5px 25px #ffff00; -o-box-shadow:inset 0px 5px 25px #ffff00;

Nano Yulianto

Contoh tiga dengan penggabungan:

box-shadow:inset 0px -15px 5px #fff, inset 0px 5px 30px #222, 0px -5px 10px #fff, 0px 5px 10px #ff0000; -moz-box-shadow:inset 0px -15px 5px #fff, inset 0px 5px 30px #222, 0px -7px 10px #fff, 0px 5px 10px #ff0000; -webkit-box-shadow:inset 0px -15px 5px #fff, inset 0px 5px 30px #222, 0px -7px 10px #fff, 0px 5px 10px #ff0000; -o-box-shadow:inset 0px -15px 5px #fff, inset 0px 5px 30px #222, 0px -7px 10px #fff, 0px 5px 10px #ff0000;

Nano Yulianto

Semoga Bermanfaat...

Alhamdulillah

Posted by Unknown - Rating: 4.5

Title : Box-Shadow Didalam
Description oleh : nama unik, Box Shadow diartikel sebelumnya menampilkan efek bayangan diluar , tapi kali efek bayangan akan muncul didalam. box-shadow:inset 5px 6px 7px...

Share to

Facebook Google+ Twitter