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;

Value	Description
h-shadow	Posisi bayangan secara horizontal.
v-shadow	Posisi bayangan secara vertical.
blur	Jarak efek blur - optional
spread	Ukuran bayangan - optional
color	Warna bayangan. Lihat disini nama warna - optional
inset	Perubahan 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/