Buat Box Shadow dengan CSS3

Melanjutkan postingan seputar CSS3 yang di aplikasikan pada Teks Stroke, walaupun hanya sekelumit membahasnya karena memang saya juga masih belum begitu mendalami tentang CSS3. Dan kebetulan kemaren Bang Hendro komentat tentang Teks stroke ini yang bisa dimplementasikan dengan box Shadow.

Thanks buat bang Hendro yang sudah memberikan tambahan untuk pengaplikasian CSS3 ini. dan sekarang saya coba mengaplikasikan CSS3 ini dengan membuat BOX SHADOW atau Kotak dengan tambahan bayangan menggunakan CSS3.

Beberapa sample Box Shadow bisa dilihat di bawah ini:

-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;


-moz-box-shadow: 0px 20px 10px -10px #888;
-webkit-box-shadow:1px 1px 10px #888;


-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow:1px 1px 10px #888;


-moz-box-shadow: inset 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;


Box Shadow di atas hanya beberapa saja mungkin untuk lebih berfariasi model,warna,tebal tipis bayangan-nya "Shadow" bisa di custom sesuai selera masing masing.

Box shadow ini bisa digunakan untuk membuat Teks area atau juga bisa dipasang pada background tamplate Blogger dll. Selamat mencoba.

Komentar

hendro prayitno mengatakan…
yang terakhir kurang inset di webkit, bikin box-shadownya keren sob, seperti hidup bayangannya.
Unknown mengatakan…
wah bingung mau coba dimana ya brad?....di menu horizontal kali ya...
Chugy mengatakan…
Hendro Prayitno :: Kan belajar dari Bang Hendro, semenjak kenal bang hendro jadi naksir ni dengan CSS3 ini hehehehe....
Insetnya masih kurang Um ya .......!!!

Belantara Indonesia :: Di sesuaikan saja Brader , gimana bagusnya untuk background template juga keren
Ummi Ubay mengatakan…
cara nambahinnya gima a:D
Amdhas mengatakan…
bukan insetnya yang kurang, tapi sintaks insetnya yang tidak di berikan hanya diberikan di:
-moz-box-shadow: inset 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;

Kalu begitu kodenya nanti di chrome tidak terlihat insetnya, solusinya hanya menambahkan inset saja di webkit..
-moz-box-shadow:inset 1px 1px 10px #888;
-webkit-box-shadow: inset 1px 1px 10px #888;

Nah..kalu begitu di moz sama webkitnya terlihat deh, hehehe

bener ga sob?
Chugy mengatakan…
Blogger Admin :: Okelah kalau begitu. Thanks bt tambahannya UM.

Chikarei :: Kalau ingin memasang pada bagian background utama tamplate tinggal di copy code di atas di bawah code outer-wraper { tinggal di sesuaikan saja.

Trimakasih
Ferdinand mengatakan…
Wah mantabz Sob.. jadi suka CSS3 juga si Bozz hhe..

aku tambah nie.. klo baynagan orange pake


* -moz-box-shadow:5px 5px 5px #A84F19;
* -webkit-box-shadow:5px 5px 5px #A84F19;
* box-shadow:5px 5px 5px #A84F19;


mrah doank pake

* -moz-box-shadow:5px 5px 5px #A80019;
* -webkit-box-shadow:5px 5px 5px #A80019;
* box-shadow:5px 5px 5px #A80019;

Hijau pake



* -moz-box-shadow:5px 5px 5px #008519;
* -webkit-box-shadow:5px 5px 5px #008519;
* box-shadow:5px 5px 5px #008519;

Biru

* -moz-box-shadow:5px 5px 5px #000099;
* -webkit-box-shadow:5px 5px 5px #000099;
* box-shadow:5px 5px 5px #000099;

yang warna lain aku gak suka jadi cari sendiri hhe...

Sebelumnya maaf aku baru bisa berkunjung Sob.. biasa masih Offline wkwkw.... Semangat n happy blogging..
Chugy mengatakan…
Ferdinan :: Ia ni ketularan sama bang Hendro heheheheh....
Ok buat tambahannya. Semngat selalu.
rawins mengatakan…
wew keren. tar aku pikir dulu mau dipasang dimana. harus rubah warna juga neh kayaknya, template ku kan bekgronnya item
Suparyanto mengatakan…
Keren bayangannya yang dibentuk,menambah satu ilmu CSS nich.Kalau untuk border header bisa nggak ya?..
Bookmark dulu sahabat.
Rizkyzone mengatakan…
wah keren nih sob, mungkin akan saya coba saya terapkan di blogquote
om rame mengatakan…
Lagi pada kuLiah di bLognya Om Hendro yah Om, saya juga sering dibawain oLeh2 sama beLiau.
disana emang manteb2 (pake B, yah) tutornya tapi sayang saya beLum mudeng sama CSS, termasuk tutor yg ini. sementara waktu masih ngikutin keLas vaLidasi htmL, itu juga beLum LuLus2. hihihi...
harap makLum aja yah.
Unknown mengatakan…
tutor dah brad..buat font sidebar kayak punya sini...bagus itu.....tak tunggu lah brader baik..hehehheehe
Unknown mengatakan…
akhirnya ku buat bagus random post sama link exchange di sidebar....mau pake buat kolom artikel terkait bingung caranya aku brad....asemm
Sukadi Brotoadmojo mengatakan…
jujur saya kurang memahami css, walau sebenarnya kepingin praktek juga... :D terimakasih mas, semoga sukses selalu.
Saung Web mengatakan…
Wah pago ini dah dapat ilmu baru y bermanfaat nih.. makasih sob
Dofollow Blog mengatakan…
Mampir disela rutinitas nih sob.. hehe sekalian tak follow blognya ya
Dofollow Blog mengatakan…
Halah salah urlnya tuh bos.. yg bener yg ini
DESIGN T-SHIRT mengatakan…
Personally gue suka banget dengan CSS, mempercantik dan mempermudah load halaman blog...nice post
Shudai Ajlani mengatakan…
aku bingung sob hehe, lebih rinci dong :)
Unknown mengatakan…
kayaknya ada yg brubah template ya brader?....kayak ga sama ma kmaren.....sibuk trus ni pasti utak atik....nah ati2 ya brad.biar aman...hueheuehue
Ferdinand mengatakan…
Met malem Brother... aku datang huaahhh....

maaf nie seperti biasa aku telat hhe..... wah masih BOx Shadow nie.. semangat Sob.... happy blogging n met akhir pekan..
harto mengatakan…
nambah pengetahuan lagi datang kemari, nambah mantab lagi ilmunya, cuma sayang yaa sementara say belum bisa pakai sarana box ini.
trims atas ilmunya, sukses selalu n tetap semangat
Blogger mengatakan…
wew semakin mantap dengan kolaborasi kode css yang menghasilkan sebuah karya menarik
Sukses Slalu!
nurrahman mengatakan…
bookmark dulu Om,masih belajar php dan kayak ginian. amatiran hehehe
infoponsel mengatakan…
thanks infonya
Rizkyzone mengatakan…
saya sudah menerapkan nih tips, silakan di cek di blog saya
Mademoisellerinie mengatakan…
aku ngga ngertii CSS... :D hehhee help help
om- admin mengatakan…
Oh..iya aku baru tau kenapa ini tidak terlihat di chrome dan safari karena sobat memanggil css3nya dengan html.


<div style="-moz-box-shadow: 1px 1px 10px rgb(136, 136, 136); background: none repeat scroll 0% 0% rgb(243, 243, 243); padding: 10px; text-align: center;">
<b>-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;</b></div>


Kalu memanggil dengan html css3 itu tidak bisa yang webkit, jadi harus di panggil dengan css, juga harus di tentukan idnya kalu id berawal sintaks #(pagar) kalu class Dot(titik) sekarang saya akan panggil lewat css biar browser bisa lihat semua>

<style type="text/css">
#chugy{-webkit-box-shadow:1px 1px 10px #888;-moz-box-shadow: 1px 1px 10px rgb(136, 136, 136); background: none repeat scroll 0% 0% rgb(243, 243, 243); padding: 10px; text-align: center;}
</style>
<div id="chugy">
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;</div>

Silahkan coba seperti itu, hasilnya bagus dan bisa di lihat di browser moderen, seperti chrome, safari.
Chugy mengatakan…
Blogger Admin :: Betul sekali um saya memang menggunakan "div style, untuk codenya. Nanti akan saya revisi um sesuai intruksi di atas....Thanks buat tambahannya.
Amdhas mengatakan…
coba di kreasiin rgb(136, 136, 136); dan background: none repeat scroll 0% 0%

di ganti warna biasa saja,,saya lupa beritahu itu.
place to modify blog mengatakan…
ternyata d sini ada tutorial yg aku buthkan tuk dplajari
Blogger Blegedes mengatakan…
ijin menyimak buat belajar... salam kenal Kang.. ^_^
www.asialive88.com mengatakan…
saya terkesan, saya harus mengatakan ini kepada anda.
www.asialive88.com
www.asialive88.com mengatakan…
Sangat jarang saya menemukan sebuah blog yang informatif dan menghibur seperti ini.

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text