CSS3 Property Box-Shadow serta valuenya

box-shadow adalah salah satu property dalam css3, fungsi dari box-shadow adalah membuat bayangan pada box, contohnya dibawah! value dari box-shadow seperti ini

Kepengecutan yang paling besar adalah ketika kita membuktikan kekuatan kita kepada kelemahan orang lain. Jacques Audiberti

box-shadow adalah salah satu property dalam css3, fungsi dari box-shadow adalah membuat bayangan pada box, contohnya dibawah! value dari box-shadow seperti ini

Last Modif at July 8th, 2011

stop bacanya jika browser anda versi lama(saran firefox v3.5.6+, opera 10+)

berbahagialah anda karena css versi 3 sudah keluar. saya yakin anda sangat suka dengan css. yups css itu sangat mudah dan menyenangkan.

sebenarnya saya sudah pelajarin css3 sejak akhir tahun 2009, hanya saja saat itu browser belum bisa menjalankanya atau belum support. sekarang beberapa property css3 sudah support di beberapa browser, salah satunya adalah box-shadow, coba perhatikan box dibawah!

ini adalah style css3 dengan box-shadow
ini adalah style css3 dengan box-shadow
ini adalah style css3 dengan box-shadow
ini adalah style css3 dengan box-shadow
ini adalah style css3 dengan box-shadow
ini adalah style css3 dengan box-shadow

apa itu box-shadow?

box-shadow adalah salah satu property dalam css3, fungsi dari box-shadow adalah membuat bayangan pada box, contohnya diatas!

aturan penulisan dan value box-shadow

box-shadow memiliki beberapa aturan, diantanya

selector_atau_taghtml:box-shadow:value1(spasi)value2;

selector_atau_taghtml:box-shadow:value1(spasi)value2(spasi)value3;

selector_atau_taghtml:box-shadow:value1(spasi)value2(spasi)value3(spasi)value4(color);

value box-shadow

saya menggunakan length(dalam px)

  • value1 fungsinya untuk mengatur jarak bayangan kiri-kanan diisi dangan length(px)
  • value2 fungsinya untuk mengatur jarak bayangan atas-bawah diisi dengan length(px)
  • value3 fungsinya untuk mengatur keburaman diisi dengan length(px)
  • value4 fungsinya untuk mengatur warna bayangan diisi dengan color atau hex_color

contoh box-shadow dalam inline style

box-shadow:value1 value2

contoh code

<div style="padding: 15px;width:300px;height:300px; background-color:pink;font-size:40px;box-shadow:4px -4px;">ini adalah style css3 dengan box-shadow</div>

tampilan

ini adalah style css3 dengan box-shadow

box-shadow:value1 value2 value3

contoh code

<div style="padding: 15px;width:300px;height:300px; background-color:pink;font-size:40px;box-shadow:4px -4px 5px;">ini adalah style css3 dengan box-shadow</div>

tampilan

ini adalah style css3 dengan box-shadow

box-shadow:value1 value2 value3 value4

contoh code

<div style="padding: 15px;width:300px;height:300px; background-color:black;font-size:40px;box-shadow:4px -4px 6px blue;color:blue;">ini adalah style css3 dengan box-shadow</div>

tampilan

ini adalah style css3 dengan box-shadow

contoh box-shadow dalam internal style

perhatikan markup style dibawah

<html>
<head>
<title>css box-shadow</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
#contoh1{padding:10px;font-size:40px;
width:300px;float:left;margin:8px;
min-height:300px;
background-color:pink;
box-shadow:4px -4px;
}
#contoh2{padding:10px;font-size:40px;
width:300px;float:left;margin:8px;
min-height:300px;
background-color:pink;
box-shadow:4px -4px 5px;
}
#contoh3{padding:10px;font-size:40px;color:blue;
width:300px;float:left;margin:8px;
min-height:300px;
background-color:pink;
box-shadow:4px -4px 6px blue;
}
#contoh4{padding:10px;font-size:40px;color:lime;
width:300px;float:left;margin:8px;
min-height:300px;
background-color:pink;
box-shadow:4px 4px 5px lime;
}
#contoh5{padding:10px;font-size:40px;
width:300px;float:left;margin:8px;
min-height:300px;
background-color:pink;
box-shadow:4px 4px 4px yellow;
}
#contoh6{padding:10px;font-size:40px;
width:300px;float:left;margin:8px;
min-height:300px;
background-color:pink;
box-shadow:10px 8px 6px red;
}
</style>
</head>
<body>
<div id="contoh1">ini adalah style css3 dengan box-shadow</div>
<div id="contoh2">ini adalah style css3 dengan box-shadow</div>
<div id="contoh3">ini adalah style css3 dengan box-shadow</div>
<div id="contoh4">ini adalah style css3 dengan box-shadow</div>
<div id="contoh5">ini adalah style css3 dengan box-shadow</div>
<div id="contoh6">ini adalah style css3 dengan box-shadow</div>
<div style="clear:both;/**/"></div>
<p style="font-size:30px;text-shadow:3px 3px 3px blue;">salam <a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contohbox-shadow.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • selamat belajar

artikel ini perlu dirapikan!
References

http://www.w3.org/Style/CSS

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-