Recent Post

Sponsored

Labels

addressbook CSS Shadow - Membuat Bayangan Dengan CSS

Diposting oleh dev | , , | 24 komentar »

CSS Shadow Pada postingan sebelumnya saya sudah membahas bagaimana cara membuat efek gradasi menggunakan CSS. Pada postingan kali ini saya akan membahas bagaimana cara membuat efek bayangan menggunakan CSS seperti pada gambar di samping ini, hanya saja gambar di samping ini sengaja saya convert ke jpg supaya teman-teman yang masih menggunakan browser versi lama tetap bisa melihat contohnya. Sama seperti postingan sebelumnya, efek ini hanya akan berjalan di browser-browser versi terbaru, untuk mozilla firefox effect ini hanya berjalan di versi 3.6 keatas.

CSS shadow adalah salah satu cara termudah untuk membuat effect bayangan untuk sebuat objek tertentu. Pada postingan kali ini saya akan mencoba membuat efek bayangan pada text dan objek dengan perintah CSS yang tidak jauh berbeda.

BOX SHADOW
Box shadow dibagi menjadi 2 jenis yaitu offset shadow dan inner shadow, untuk membuat offset shadow kita bisa membuat kode CSS seperti di bawah ini:
.shadow {
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
}
Keterangan:
5px adalah ukuran x-offset
5px adalah ukuran y-offset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil bayangan ini bisa dilihat di gambar awal postingan ini.

Sedangkan untuk membuat inner shadow kita tinggal menambahkan kode inset seperti di bawah ini:
.inner-shadow {
box-shadow: inset 0 5px 7px #222;
-moz-box-shadow: inset 0 5px 7px #222;
-webkit-box-shadow: inset 0 5px 7px #222;
}
Keterangan:
0 adalah ukuran x-inset
5px adalah ukuran y-inset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil CSS inner shadow bisa dilihat di bawah ini:


TEXT SHADOW
Cara menggunakan dan sistem kerja text shadow sebenarnya tidak berbeda dengan box shadow, perbedaannya kita tinggal merubah tulisan box-shadow menjadi text-shadow. Berikut ini contohnya:
.textshadow {
text-shadow: 5px 5px 7px #222;
-moz-text-shadow: 5px 5px 7px #222;
-webkit-text-shadow: 5px 5px 7px #222;
}
dan untuk inner text shadow menjadi seperti ini:
.inner-textshadow {
text-shadow: inset 0 5px 7px #222;
-moz-text-shadow: inset 0 5px 7px #222;
-webkit-text-shadow: inset 0 5px 7px #222;
}

Mudah-mudahan postingan kali ini bisa bermanfaat buat teman-teman semua. Seperti biasanya, selamat mencoba :)

Related Posts by Categories

Silahkan klik di sini untuk membaca melalui feed reader anda. Atau masukkan alamat email anda di kolom dibawah ini untuk berlangganan artikel DevBook.net langsung ke alamat email anda.

feed

Page copy protected against web site content infringement by Copyscape

Ada 24komentar ke “CSS Shadow - Membuat Bayangan Dengan CSS”
2R said...
 date:

Met Pagi Dev...wew kereeeen abiiisss blognya euy, Thanks untuk kunjungannya yah, Btw tutornya keren2. gak terasa hampir setengah jam Sy baca2 postingannya. Thanks

dev said...
 date:

@2R: makasih juga kunjungannya sob :)

Eko Priyanto said...
 date:

iya nih...blognya bener-bener informatif...cocok untuk belajar tentang website nih...salam kenal Dev...

Dev said...
 date:

@Eko: makasih mas..salam kenal juga ya :)

dev said...
 date:

@Eko: makasih mas..salam kenal juga y :) (maaf tadi lupa belum login ngebales commentnya :D)

Ari Serba Gratisan said...
 date:

wah, blog ama tips nya keren nih.... Thn ya

Kian Coi said...
 date:

aq juga udah pernah pasang sob..namun kurang maksimal karena aplikasi ini hanya untuk CSS3...karena untuk semua browser yg ada sekarang belum bisa dukung secara sempurna...

http://kianhome.blogspot.com/2010/03/modifikasi-tampilan-image-dengan-efek.html

dev said...
 date:

@Ari Serba Gratisan: makasih juga kunjungannya mas :)

@Kian Coi: betul mas, makanya biasanya saya kalo pake fitur css3 selalu melihat hasilnya di browser yang tidak support..jadi walaupun effect tidak keluar tapi yg penting tidak mengganggu tampilan di browser2 yang tidak support..

Sport Galery said...
 date:

newbie nich Boss... ajari cara masangnya dund.. :D makasih sebelumnya.. kapan2 saya balik lg ke sini.. mudah2an pertanyaanku terjawab.. :)

dev said...
 date:

@sport galery: untuk blogger tinggal ditambahkan saja kodenya di halaman edit HTML blogger di bagian CSS. nanti kodenya tinggal dipanggil menggunakan class pada url gambar..

misalnya ...."namafile.jpg" class="shadow">

kalo ada kesulitan silahkan tinggalkan komentar lagi ya :)

sri mulyani said...
 date:

blog yang bagus..mas gimana caranya membuat bayangan/border yang ada di outer-wrapper blog ini?

dev said...
 date:

@sri mulyani: kalo itu dari background template yang dibuat dalam format png transparant..

Alan said...
 date:

Keren nih mas, makasih ya infonya...

dev said...
 date:

@alan: sama2..makasih juga kunjungannya :)

randy oktaran said...
 date:

Mantap cuy....ane dapat banyak ilham dari baca-baca blog mu..btw lamz kenal ja
follow back yew http://ypsrandy.blogspot.com
btw ane numpang share postingannya..buat ngisi2 posting..

angga's said...
 date:

keren sekali.
follow blog saya mas ok
http://www.holidaymamboo.com

Fitriani said...
 date:

Thanks sharingnya.. benar2 informasi yang berkelas.. salam kenal .. :)

recky said...
 date:

nice post mas bro :)

docsks said...
 date:

wah tutorial keren.. langsung praktek ...

Anonymous said...
 date:

thx, sangat membantu


http://cloudservices.co.id
jasa pembuatan web, company profile dan masih banyak lagi
yang membuat perusahaan anda terlihat lebih menarik

Nik said...
 date:

Makasih tipsnya

Agus said...
 date:

info saja gan
follow blog sukses gan...dan jika berkenan ditunggu ni follwbacknya.. terimakasih

Anonymous said...
 date:

good posting.

www.google.com

Mega Papua said...
 date:

mantap gan,...kalau efek seperti melengkung kedalam ( lubang ) kodenya ada tidak gan


leave comment
back to top
comment notes

Post a Comment

devbook.net