◄ Min  Size Fonts: + | - | ± Color: Max ►

Variation Box Shadow Element

Agak aneh juga mau memosting tentang box-shadow property! Tutorial sudah menumpuk, tapi penjelasan baru diberikan sekarang :D Biar terlambat asal ngepost :)) Sobat tentu sudah pada kenal dengan elemen CSS 3 box-shadow. Secara global syntax bos-shadow digambarkan seperti berikut
box-shadow: h-shadow v-shadow blur spread color inset;
ValueDescription
h-shadowPosisi bayangan secara horizontal.
v-shadowPosisi bayangan secara vertical.
blurJarak efek blur - optional
spreadUkuran bayangan - optional
colorWarna bayangan. Lihat disini nama warna - optional
insetPerubahan bayangan dari bayangan luar (awal) ke bayangan dalam

Pertanyaannya sekarang bagaimana cara membuat efek shadow hanya di satu sisi saja! Contoh efek bayangan di bawah
Lihat di bawah saya ada efek bayangan, sedangkan di atas, kiri, dan kanan tidak ada bayangannya!!!
.box_shadow {
border: 1px solid #555;
width: 212px;
padding: 10px;
margin:10px auto;
-webkit-box-shadow: 0 18px 14px -13px rgba(0,0,0,.5);
-moz-box-shadow: 0 18px 14px -13px rgba(0,0,0,.5);
box-shadow: 0 18px 14px -13px rgba(0,0,0,.5);
}
Sekarang coba sobat pindahkan nilai nominal 0 yg ada di variable box-shadow tersebut ;)
Bagaimana jika value variabel kita tambahkan menjadi acak kadut! Let see what happen...
Kotak dengan border warna-warni, unyu-unyu BGT kan!!! ACAK KADUT :))
.box_shadow_multiple {
-webkit-box-shadow: 
0 0 20px #ccc inset, 10px 7px 15px #f0f961, -10px 7px 15px #55fc6d, -10px -7px 15px #55d7fc, 10px -7px 15px #FF66FF;
-moz-box-shadow: 
0 0 20px #ccc inset, 10px 7px 15px #f0f961, -10px 7px 15px #55fc6d, -10px -7px 15px #55d7fc, 10px -7px 15px #FF66FF;
box-shadow:  
0 0 20px #ccc inset, 10px 7px 15px #f0f961, -10px 7px 15px #55fc6d, -10px -7px 15px #55d7fc, 10px -7px 15px #FF66FF;
}
Markup HTML<div class="box_shadow_multiple">
--------- CONTENT HERE ---------
</div>
Bonusnya trik membuat bilangan nominal berurut seperti HTML <ol> Tag Contoh biasa gue pakek di blog ini
  1. Urutan pertama.
  2. Urutan kedua.
  3. Urutan ketiga.
Not use ol property

Urutan kesatu.

Aku kedua.

Dan aku ketiga.

.parNo {
counter-increment: chapter;
}
.parNo:before {
content: counter(chapter) ".";
}
Semoga bermanfaat :)
Happy coding \m/
Loading...
XVariation Box Shadow Element
Selayang pandang mengenai variasi element box-shadow menjadi lebih menarik.
Subscribe my posts Register For Free!

3 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE