Saturday, November 5, 2011

Kumpulan Box shadow

Box Shadow Buat Para blogger, Nih ada beberapa kumpulan box shadow yang aku dapat dari css3.info,Dan semoga bermanfaat, di bawah ini contoh nya.


Contoh A

-webkit-box-shadow: #1CF -5px -5px;
-moz-box-shadow: #1CF -5px -5px;
box-shadow: #1CF -5px -5px;

Contoh B

    -webkit-box-shadow: #1CF -5px -5px 5px;
    -moz-box-shadow: #1CF -5px -5px 5px;
    box-shadow: #1CF -5px -5px 5px;

Contoh C

    -webkit-box-shadow: #1CF -5px -5px 0 5px;
    -moz-box-shadow: #1CF -5px -5px 0 5px;
    box-shadow: #1CF -5px -5px 0 5px;

Contoh D

    -webkit-box-shadow: #000 -5px -5px 5px 5px;
    -moz-box-shadow: #1CF -5px -5px 5px 5px;
    box-shadow: #1CF -5px -5px 5px 5px;

Contoh E

    -webkit-box-shadow: #000 0 0 5px;
    -moz-box-shadow: #000 0 0 5px;
    box-shadow: #000 0 0 5px;

Contoh F

    -webkit-box-shadow: #1CF 0 0 5px 5px;
    -moz-box-shadow: #1CF 0 0 5px 5px;
    box-shadow: #1CF 0 0 5px 5px;

Contoh G

    -webkit-box-shadow: #1CF -5px -5px inset;
    -moz-box-shadow: #1CF -5px -5px inset;
    box-shadow: #1CF -5px -5px inset;

Contoh H

    -webkit-box-shadow: #1CF -5px -5px 5px inset;
    -moz-box-shadow: #1CF -5px -5px 5px inset;
    box-shadow: #1CF -5px -5px 5px inset;

Contoh I

    -webkit-box-shadow: #1CF -5px -5px 0 5px inset;
    -moz-box-shadow: #1CF -5px -5px 0 5px inset;
    box-shadow: #1CF -5px -5px 0 5px inset;

Contoh J

    -webkit-box-shadow: #1CF -5px -5px 5px 5px inset;
    -moz-box-shadow: #1CF -5px -5px 5px 5px inset;
    box-shadow: #1CF -5px -5px 5px 5px inset;

Contoh K

    -webkit-box-shadow: #000 0 0 5px inset;
    -moz-box-shadow: #000 0 0 5px inset;
    box-shadow: #000 0 0 5px inset;

Contoh L

    -webkit-box-shadow: #1CF 0 0 5px 5px inset;
    box-shadow: #1CF 0 0 5px 5px inset;
    box-shadow: #1CF 0 0 5px 5px inset;

kode kode itu bisa di tambahkan di #outer-wrapper, #main-wrapper atau di mana aja anda ingin menggunakannya, tinggal copy aja :)

86 komentar postingan ini

yupz di bookmark dulu, nanti kalau waktu senggang langsung praktek.karena CSS3 ini memang membuat tampilan blog jadi tambah menggoda. thnks sob

@ Wisata Murah
Betul Banget, memang css3 bikin orang tergoda :)

wah kebetulan nih saya sedang mengedit template

thank mas bro

@ BLOGCUNAYZ
sama sama masbro

mantep gan tipsnya,sangat mendasar jadi mudah dimengerti buat saya belajar css..nice postnya :D

@ Ageboy
Sip semoga bermanfaat :-bd

klo untuk wp gimana cara pasangnya ni om??

Sangat Menarik.Sepertinya saya perlu belajar CSS sama master, berkenan mengajari?

wow ... dengan Box Shadow tentu menjadikan tampilan blog jadi lebih menarik, nice share sobat

@ blogger jelek
Masuk di Editor Kan disitu Ada CSS cari aja ID apa yang mau di kasi box shadow
@ Bisnis Online Blog
Saya bukan master bang, saya masih belajar
@ FIKRI SHARE
Enggak Gan,
@ rendratwa
Sip :D

@ Nurmayanti Zain
Sama sama mbak :D

weiii ternyata bisa juga dibuat seperti ini, tks ya info nya, hebat kamu Mas

@ Obrolan Blogger.com
sama sama, bisa aja gan aku masih belajar nih

mantep dah, terus otak atik css nya :D

mampir sore sob sekalian meramaikan suasana :D

@ Alprablog™
sippp :D
@ Ageboy
Sip makasih gan :D

Bagus nich buat mempercantik tampilan blockquote-ku...nice share and happy blogging

@ Said Arsyad
Maksud nya
@ Iskaruji dot com
sip semoga makin indah blog nya

@ Admin-Wahid Sahidu
semoga berguna gan

mantap masbro , ane paling suka mainan Box-Shadow , rasanya jadi hidup blognya :D

musiknya kenceng sekali sob kaget ane :)) mantap juga box shadownya :D hihihi

@ Mbah Qopet
baguz deh semoga makin hidup nih blog nya :D
@ Farixsantips
Punkkk :)) semoga memberi manfaat neh box shadow :D

hem kebetulan kwan ane mau belajar Css hihi salam kenal ya kawan

@ warung belajar
salam kenal juga gan

walaikum salam wr. wb
keren sob jadi kepengen, ntar deh ane cobain bila dah ada template yang cocok ;). thanx for share

@ Deganshah Putra
Ok Deh selamat mencoba aja gan :D

tutorialnya mantep gan + tampilan background blog agan juga keren :)

Main Css lagi sob! Keren dari pada main Jquery hehe Berat..!

Makasih sob infonya,kayanya bisa kita terapkan di image ya,ane coba praktek dulu.

Mantab., kok css3 update bnget yagh.. Nice info Masta.

Keren2 tuh kotak. ijin copaz css nya gan buat tambahan koleksi...

box shadow itu buat apaan si gan?
heheheh, ndak ngerti masalah beginian.. :p
tapi semoga bermanfaat buat para blogger...
hhi :)

@ ALL
Makasih udah mampir dan semgoa box shadow nya bisa di manfaatKan :)

wah keren mas model box shadownya, izin tak save yh mas, maaf baru bisa berkunjung kesini

@ Rizkyzone.com
Gak papa Gan, nyantai aja :)

Musiknya berisik banget gan!!!
Sangat menggangu kenyamanan main kesini...
pengen cepet2 di close! :(

izin kopas kode na gan.. btw sewaktu ngeload http://sin1aja.blogspot.com/2011/12/kumpulan-box-shadow.html kok lama ya? padahal ane dah pke speed yg lumayan...

@ masyhury
Hehehehe Aku Lagi ngetez sesuatu gan jadi aku pasang itu musik, bentar lagi di copot kok tenang aja :)
@ ibnu ismadi
kayak nya sih background nya gan yg bikin berat :)

Kembali lagi di sini, ada langkah yang kurang tepat.hihihi the seven shadow cara gabungnya bagaimna tuh?

@ Bisnis Online Blog
Kurang tepat apanya nih hehehe, seven shadow cuman segitu gan,g bisa nambah hehehe

@ socafahreza's blog
Makasih sob

mantap2 bro..., btw blogx seringan kapas.., enteng banget hheh...

Berguna Banget nigh sobat,,,
Thankss for tipssnya

Lanjutkan Kreasi Sobat.!

@ Rohis Facebook
Hehehehe Bisa AJa nih sampean :D
@ amhar sunny
Sip :)

@ Sadeva Aldy Pratama
Makasih Sob udah mampir

keren deh pokoknya css3, ngga perlu pake img ;)

Hello, I visit and give your full support and please support me back. Thank you in advance.

@ Ladida C
Betul banget seandainya semua browser mendukung betapa baguz nya dunia Coding :D
@ GLace TIng
your welcome, i will always support you, ( bener gak ya kata2Q ini ) hehehe makalumin ajalah kalau gak bener gak bisa bhs ingrris sih :)

wahh, keren2 gan box shadownya.. :D

@ Rama88
Hihihihi semoga bsa di manfaatin box shadow nya

numpang melongo melihat box shadownya :)

fungsinya buat apa ya sobat, maaf newbie ni dan makenya begimana pulak yah hehe

@ Farixsantips
Hahahha =)) bisa aja
@ auraman
Fungsi nya untk membuat bayangan, waduh panjang kalau di ceritain di sini hehehe

balik lagi ke sini untuk silaturahmi

@ Admin-Wahid Sahidu
Makasih :)

wah bagus banget tinggal pilih box shadow dah ga pusing nyari :)

@ anisayu
Iya Mbak di pilih - di pilih ( kayak pasar aha :)
@ Alprablog™
Sip Thank You Nih Visitnya

wah, mantep nih, cocok buat bloane yang butuh banyak kategori, thx gan infonya, :)

Namanya juga kurang tepat, kurang tepat dalam pihak saya maksudnya.Kalu dari pihak agan mah dah betul sekali.Namanya juga seven, ya kudu seven hehehe.Sukses buat Anda sob.

@ Bisnis Online Blog
Hehehehehe Iya Abiz Dulu bingung mau ambil berapa orang jadi ya itu aja :) makasih udah mampir gan

bookmarks dulu adja dech, sp tau ntr butuh...

Mantab sob, tapi cuma satu yg jadi pertanyaan kok contoh box-shadow nya di FF 8.0.1 berantakan ya?? apa ada yg salah

@ dhenycahyoe
Hehehehe Mungkin begitu mas soalnya saya Pake Chrome dan FF 7. dan hasilnya sama aja mau update browser lama kalau gak di warnet jadi ya, Aku bingung nih mau make browser apa buat benerinnya

wah, nambah koleksi Shadow ni,
langsung Bookmark dulu ahh.....
prakteknya nanti,
thanks sob...

Ane pake tips ini sob berhasil,thanks ya.Kau memang biang segala tips,ane suka.Selamat pagi selamat beraktifitas.

@ Er'end
hahahaha Bisa Aja nih

Blognya rame komentar , Blog saya sepi cuy ..
rame in dunk mas Zhinto :)

@ Syndicate OS
Ok udah aku ramein tadi hihihihi blogging juga donk biar rame :D

Dengan box shadow membuat blog makin ganteng/cantik aja.

@ dokunimus
yupZz semoga yang make' ini blog nya makin ganteng :D / cantik :)

bookmark dulu ah, sepertinya menarik,, hee

Coba dulu ah atu-atu...
Thank's

Jika ingin memasukan gambar gunakan tag
[img]url gambar[/img]
Jika Video
[youtube]URL Video[/youtube]
Jika kata - kata mutiara gunakan
[blockquote]Kata-kata Anda[/blockquote]
Emoticon
EmoticonEmoticon