Halo sobat kembali lagi kita berkumpul bersama dalam suatu ruangan tertutup ini. Pada hari yang cerah ini (malam) kita akan belajar bersama mengenai Design Weblog lagi. Design seperti apa yaitu menambahkan Efek Shadow Pada Halaman, tepatnya bagian Bawah. + Request BLOGCUNAYZ
Tutorial kali ini adalah cara membuat Efek Shadow Pada Halaman yang secara garis besar berhubungan dengan CSS3 Box Shadow. Apa itu Box Sahdow? Dalam Css Box Shadow diartikan sebagai efek bayangan pada suatu kotak Elemen. Dalam kata lain Box tersebut seperti berada di atas melayang dengan bayangannya sendiri itu.BOX-SHADOW
INSET
- Box shadow itu ada 2. Box-shadow untuk bayangan di luar dan Box-shadow:inset untuk bayangan di dalam. Metode box shadow yang kita gunakan untuk memenuhi persyaratan sebagaimana sesuai dengan judul postingan kali ini "Efek Shadow Pada Halaman" adalah box-shadow.
- Seletah kita mengetahui Metode box-shadow yang di gunakan, sekarang tahap selanjutnya adalah melakukan peletakan box-shadow melayang di udara tepatnya bagian bawah dan menyembunyikannya di bawah layar komputer.
- Tujuannya agar blog mempunyai style baru yaitu bayangan di tepi bawah.
Contohnya seperti apa? Yuk Lihat gambar demo di bawah!
Klik gambar untuk memperbesar
Bayangan tersebut akan terus berada di bawah karna efek dari pada Css Position Property Fixed
- Buka Blogger.com dengan Password dan ID
- Buka Layout/Design
- Buka Edit HTML
- Cari kode </body> kemudian letakan kode berikut sebelum kode </body> tadi :
- Selesai. Mudah bukan?
<div style='display:scroll; position: fixed; bottom:-20px; right:0px; width:100%; border:0; box-shadow:0 0 100px #000;'>Farixsantips</div>
pertamaxx
BalasHapuswah makin keren aja nih.. blognya juga makin keren mas...
BalasHapushehe, btw makasih tipsnya ya :)
To Nurahman : hahahahah bisa aja
BalasHapusTo Tituitbom.Com : hehehehe makasih banyak ya mas supportnya :) sama sama kunjungannya
mantab, ini yang ane demen dari sobat farixsan tips. selalu memberi yang terbaik untuk kegiatan blogging
BalasHapususul sob, itu kan ada garis border yang melengkung kedalam. terus coba deh lain waktu buat postingan . CSS tentang bolder yang kalau ditunjuk cursor bisa melipat.
contoh yag dimerah itu kan hanya melipat kecil. maksutnya kalau ditunjuk lipatannya jadi tambah gede seerti mau robek.. pasti seru deh.. soalnya ane pernah liat yang kayak gitu, hehehehe.
nice share.. happy blogging
To Wisata Murah : hehehehe bisa aja nih sobat selalu ada ide untuk memuji :)
BalasHapusMaksudnya yang kode merah itu? ohhh itu efek hover sob :) oke sob lain kali ane posting bagaimana caranya :) thanks for suggestions :)
hihihi sama persis kayak yg ane pasang di post "Ijin" btw nice post masbro.
BalasHapustambahin -moz sama -webkit dong masbro , biar support di browser lainnya.
BalasHapusTernyata caranya kayak gitu aja ya sob, ane kira susah hehehe ijin praktikum :D
BalasHapusane pake mantra ris biar pertamaxx :))
BalasHapusTo Mbah Qopet : maksudnya ente ane nyolong gitu? :(( demi apapun ane gak nyolong dah dari blog ente :(( ane aja ini dah lama, baru sempet berbagi ini aja.
BalasHapusbrowser sekarang support box-shadow. gak perlu pakai moz webkit lagi
To Abi Says Drunk : iya sob mudah dan simple :)) silahkan di praktekan :))
To Nurahman prakoso : mantra apaan. mantra jaga lilin?
hatur thank you sob udah d share,langsung ane praktekin d blog percobaan,.... wkwkwkw =))
BalasHapusnice sob...aku mau coba ya sob...hehe... :D
BalasHapusMantabss,, dapat trik baru nigh, yabs ane coba gan
BalasHapusTo BLOGCUNAYZ : hehehehe itu kan request sobat? ane udah post tuh :) hihihi
BalasHapusTo binkbenk : blog sobat kan gelap. jadi gak bisa ngeraskno :D huahahah tapi di coba boleh
To amharsunny : heheheh makasih banget ya kunjungannya mr amharsunny :)) =))
BalasHapusWah keren Nih AKu jadi ada ide Nulis post thanks masbro
BalasHapusmasya allah :( , maksud ane , ane juga pasang di blog ane bukan nuduh ente nyolong :'(
BalasHapusHuuhuuyyy... dapet ilmu lagi nich :D langganan akh biar update trus ilmuku.. :)) Ijin sedot ilmunya ya gan.. ;;)
BalasHapusTo Zh!nTho : heheheh ide apa tuh sob :)) =)) selamat dah idenya
BalasHapusTo Mbah Qopet : maaf ya udah salah sangka nih sob :(( :) ;) ;;)
To Miftahudin : hehhee silahkan langganan sob kalau ingin :)
bagus ya jadinya jadi ada bayang2 hmmm menarik untuk di coba... :)
BalasHapusBoloeh juga :D Lumayan menarik kali ini Sob :))
BalasHapusWah CSS3 lagi yahhh... :D Mante deh :D
BalasHapusTipsnya makin hari makin baik sob....Lanjutkan berbaginya
BalasHapusTo anisayu : heheheh bayang bayang dalam gelap mu :)) huahaha
BalasHapusTo Aku mau Gratisan : hehhehe silahkandi cobain aja sob :))
To Sttttt...... XXX : jiah namanya beda skarang :)) iya sob Css3
To cardiacku : hehehe bisa saja sobatku cardiacku ini :) hihihi
Wah ketemu sama Master css, html.Izin nyimak dulu master.Maklum gaptek nih hihihi.Berkenan ngajarin?
BalasHapusane lagi bicara realita ni,heher. sweeer (sambil menunjuk 3 jari).hehe
BalasHapussiip efek hover untuk yang ditunjuk melipat ditunggu,pasti nanti semua pada pasang deh. hehehe. thnks sob. happy blogging
Tehnik css yang makin membuat blog kita tampil ngejreng dan indah..nice share and happy blogging!
BalasHapusApa akan memperberat load blog gan nantinya
BalasHapusTo Bisnis Online Blog : alaaahhhh berlebihan nih sobat =)) ngajarin apaan? :))
BalasHapusTo Wisata Murah : heheheheehe ngeplay dah ngeplay :)) =)) bruakakaka.... hehehehe seyakin itukah sobat? :))
To Iskaruji dot com : hehehehe bisa saja nih sobat iskaruji :)) hihihi
To Obat Sakit 2011 : hahahaha tentu saja TIDAK! :D wong css kok toh yo mas
weewww,, update kagak pernah ngasih tau,, :(( :(( btw keren tuh shadownya,, =)) ohiya itu font postingan pake font apa..?
BalasHapuslu kira ane apaan? jaga lilin :(( taudah gua yang master css :(
BalasHapusbanyak belajar disini. Thanks Farixsantips!
BalasHapusnah, ini dia yang ane cari.....
BalasHapusmakin manstabb....
msh belajar merangkak di CSS ne gan,
thanks 4 Share....
To Rama88 : hehehe maaf sob :)) jgn nangis juga :(( huahahaha... pakai google webfont :))
BalasHapusTo Nurahman prakoso : ettt si koko mewek aa nih :))
To Deeahzone : hehehe makasih ya sob sudah mau mampir :)
BalasHapusTo zaenal blog : hehehehe akhirnya ketemu juga ya gan :))
uda dicoba gan..
BalasHapushasilnya mantaps..
:D
akhirnya bisa juga nih ris :D daritadi ane coba gak bisa-bisa :(
BalasHapuswah mantap gan tips'x.. !! shadow... !
BalasHapusSukses sahabatku...
Setuju ,,,
BalasHapuslain kali tolong bahas tentang efek hover sama efek bayangan di teks pas dilewati kursor gan(gak tau ane apa namanya).
To WAYAN GERDIAN : hehehehe mangstap ya gan :) alhamdulillah :)
BalasHapusTo Nurahman : hahahah makanya teliti!
BalasHapusTo Tagantar : hehehe tips shadow :) sukses juga om
To Algo : itu namanya text-shadow. banyak kok yang udah posting :))
walah...ramai banget, mirip supermarket,yang punya ne,hahaha. tu tu keliatan yang pakai baju kuning sendiri. hehe happy blogging
BalasHapusborder pada blog ane diambah sadow kira2 bagus gak y sob?
BalasHapusmmm...kayak nya patut di coba nih...hihihihihi...izin sedot mas...:)
BalasHapuswahh semakin mantap aja ris :))
BalasHapuskok mata saya jadi puyeng ya liatnya
BalasHapusNgomong-ngomong blajar darimana sih sob, semua tips2 ini, dari buku ya...?
BalasHapus:D
keren tuh kyk yg di bawah :D
BalasHapuspantes blog nya agam Farixantips keren..
BalasHapuscoll gan..
keren kang Farix
BalasHapusUdah saya aplikasikan di blog saya mas...
BalasHapusMakasih ya.
hehehe...kesini lagi menjenguk sahabat..
BalasHapusTo Wisata Murah : hehehehe bisa banget sobat mengibaratkan :)) kocak dah. huahahaha iya sih bener juga tukang kasier :)) kuning. bukan kuning kuning ngambang!!! =))
BalasHapusTo Liandri : gak tau sob sepertinya akan terasa ke iphone seperti itu sob :))
To Andre Pandet Rank Khoerai : hehehe silahkan di coba dan disedot sampe puyeng ;;)
To Nurmayanti Zain : bisa aja nih maya :))
To Alid Abdul : maaf sob mungkin effect fontnya :)) udah ane ganti
BalasHapusTo Penghuni 60 : ane itu belajar dari manapun, ane sedot ke otak trus ane post dceh :) gak dari buku sob
To Alprablog™ : hehehe ane juga menggunakan efectnya itu :))
To NoLimit Outbound : wahh makasih banyak ya sob supportnya :)
BalasHapusTo Jadikan Mwber Indonesia no.1 Dunia : hehehe mantap sob kunjungannya :))
To Kopiah Putih : masa sih sob :) coba ane TKP dulu :) hehehe
To binkbenk : silahkan di jenguk biar ane cepat senang :))
BalasHapusbaaf baru bisa online,, :(( :(( baru sempet berkunjung,, :((
BalasHapusTo Rama88 : iya sipu gak apa apa kok sob :) hehehe
BalasHapustampilanblognya tambah keren aja sobat,...mantap nih
BalasHapusTo HONDA CENTER : wahhh makasih banyak ya sob kehadirannya :) hihihi makasih banyak!
BalasHapusternyata sangat simple ya bro....,nice post., org ke 59 jauh banget ya.., soalx br sempat OL :((
BalasHapustaudah yang lebh teliti daripada ane :( :(( :((
BalasHapusberkunjung sore. sambil buka buka tips CSS farixsan tips, dan menunggu update terberu, hehehe ngarep com
BalasHapusKomentar ini telah dihapus oleh administrator blog.
BalasHapus:-O Emang si Faris Maho CSS3 :D :>
BalasHapusTo Rohis Facebook : hehehe iya sob simple banget ternyata :) huahahaha gak apa apa =))
BalasHapusTo Nurahman prakoso : makasnya teliti!!! :))
To Wisata Murah : hehehe silahkan ngarep sepuasnya sob disini wkwokwow =))
BalasHapusTo Aku mau gratisan : wahhh enak aja, ente yang maho :love
jadi ikut-ikutan deh gw skrng pke css,,hehee
BalasHapusnice tutorialnya sob ,,:D
shadownya ikutan nyusul nanti terapannya :)
BalasHapusTo Ageboy : huahahaha terkontaminasi CSS ya ente :)) silahkan disusuli (lho) =))
BalasHapusPena hadir dan absen petang sob...efeknya keren neh...
BalasHapusNgajarin CSS tuh , HTML dari dasar hihihi, maklum newbie
BalasHapusTo tautanpena : alhamdulillah pena hadir :D hihihi makasih ya supportnya
BalasHapusTo Bisnis Online Blog : hehehe ngajarin gimana caranya ane aja masih belajar :D
keren dan super kreatif sob....
BalasHapusMengunjungi sobat kembali sambil nungguin postingan selanjutnya nih
BalasHapuswaduh kalo gelap buka lampu
BalasHapusnampaklah ketawamu
wkwkwkwk :D
ikut ngeramein susana nih semoga tambah hangat :))
BalasHapusmanstabbb sob......
BalasHapusmau coba praktek lagi ah,...
di Bookmark dulu biar gak ilang,
thanks
To >>>ichwan HAUSGAME : hehehe makasih ya sob supportnya :)
BalasHapusTo cardiacku : thanks banget kunjungannya sobat cardiacku :)
To anisayu : berpuisi ria lagi disini :)) =)) mantap!!
To Zh!nTho : silahkan ramaikan blogku ;;)
BalasHapusTo Zaenal Blog : silahkan di praktekan lagi dan bookmark dija ingin :)
hehehe numpang ngintip, memang CSS yang ini tampil lebih keren ya sob:D
BalasHapusmampir ni. ga disuguhi minum balik dulu ah,hehe besuk mari lagi,hehehe
Makasih ya tipsnya,ane pasang dulu ach.
BalasHapuswah keren jg yah gan,makasih bnyak yah
BalasHapusmakin rame aja disni.. ikutan nangkring gan
BalasHapus:D
boleh jg nie efek shadow pada halamannya nie
BalasHapusentar ane tes dulu sob :D
mata dhe kena silinder mas.. baca text model shadow gitu, jadi makin ngabur.. hahahahahaha.. sukses terus dah pokoknya, di tunggu tips selanjutnya :D
BalasHapuskalau background bis agak sob dikasih BOX-SHADOW?
BalasHapushahaha sama kyak mas dhenok habibie, ane juga mata mines sob, bacanya jadi puyeng...
BalasHapusTapi keren sob, tutor cssnya...
yang ini ane bakal pake , karena simple caranya maknyuuss
BalasHapusthx :)
mampir dsni lagi gan..
BalasHapusditunggu postingan terbaru nya..
heheheh :)
hadir lagi sob....hehe..selamat siang
BalasHapusSelamat sob :D Komen mau nembus 100 nih tinggal 8 doang :D :))
BalasHapushehehe di post aja dari dasar, jika berkenan hihihi.Ntar kalau saya belum faham ya tanya ke master lagi hihihi
BalasHapuswih, mantap abis..
BalasHapusbruakakkakak,, =)) =)) iyo,, ane lagi nyari2 font yg ajib nehh,, =))
BalasHapus:)) Mau dukung ane ngak sob :D
BalasHapusNi ane di " Seandainya Saya Anggota DPD RI "
oke sob :D bikin postingan baru lagi dong ris :)
BalasHapuskeren masbro banyak belajar dari sini
BalasHapusblog yang sangat bagus gan,,,,
BalasHapusane seneng bgt bisa berkunjung kesini,,,,,\
happy blogging gan
To Wisata Murah : semua css sebenarnya sangat keren karena berhubungan dengan style :) ane suguhin makanan kok sob. nasi aking :)) =))
BalasHapusTo Er'end : hehehe sama sama sob, pasang aja :o
To jual sepatu kerja pria : wahhh makasih banyak juga ya kunjungan dan komentarnya :)
To WAYAN GERDIAN : berkat sobat juga :) hehehe makasih ya
To Aldio : hehehe silahkan di coba coba jika ingin :)
BalasHapusTo dhenok habibie : masa sih sob? wadduhhh saya mohon maaf ya sob :(( huaaaaaaaahuaaaaa
To ZONA DOWNLOAD GRATIS : maksudnya apa nih sob? background? box shadow itu bayangan yang terdapat di dalam kotak bukan background
To V-MediaKom : saya minta maaf yang sebesar besarnya ya atas tidak kenyamanan ini :(
To pembayaran ipanel desember : iya sob sayang jika disia siakan :)
To nolimitadventure : hehehe makasih ya atas kemampirannya =)) =)) oke sob segera
BalasHapusTo >>>ichwan HAUSGAME : makasih ya atas kehadirannya sobat ichwan :)
To aku mau gratisan : heheheh iya sob berkat sobat juga nih semua :) tapi sepertinya ane yang kebagian 100th comment :))
To Bisnis Online Blog : sebelumnya ane minta maaf ane juga menjelasinnya juga ke dasar dasar gitu kok sob gak langsung jleb gitu.
BalasHapusTo Said Arsyad : hehehe thanks sob :)
To Rama88 : di google font aja bro :))
To Seandainya Saya Anggota DPD RI : itu kontes atau apa sih sob :)
To Nurahman : ntar gua postnya ko
BalasHapusTo Admin-Wahid Sahidu : alhamdulillah jika di pelajari :)
To Falah Mulyana : thanks gan komentarnya dan opininya :)
yang baru ana coba baru teks sahdow animation with hover 2 gan.....coba lagi ah shadow pada halaman,....
BalasHapusthanks
wah jadi burem benner jadinya sob...
BalasHapusKlo di template ane di pasang untuk apa yach so? Kemarin coba pasang seperti anjurannmu itu,ko ga ada perubahan,ada yg salahkah cara penerapannya? Tolong cerahkan,thanks ya.
BalasHapusTo Zaenal Blog : okkeee deh sobat :)) silahkan di cobain :)
BalasHapusTo pri crimbun : burem apanya sob? :))
To Er'end : mungkin sobat langsung menyimpulkan bahwa efek shadow pada halaman itu tidak ada. padahal ada tetapi karena blog sobat yang berkesan hitam jadi kurang terlihat. kan bisa di ganti kode box-shadow:0 0 100px #000 dengan warna yang lebih terang contohnya #fff
jalan sore sore mampir ngintip posting Efek Shadow Pada Halaman yang dikerubuti buanyak banget orangnya, hehehe sore sob happy blogging
BalasHapusindah gan ada bayangan di bagian bawah
BalasHapusKomentar ini telah dihapus oleh administrator blog.
BalasHapusTo Wisata Murah : silahkan mengintipi orang orang :)) jgn ngintip ngintip ah ntar di tabokin tau rasa :))
BalasHapusTo Obat Sakit 2011 : seperti efek efek iphone sob :))
siap gan
BalasHapussetelah ganti domain kasih tahu diriku gan
To Obat Sakit 2011 : bukan ane yang ganti gan maksudnya. maksudku ente. kan "Obat Sakit 2011". kalau sudah tahun 2012 gimna? :))
BalasHapuswoow................makin mantab aja neh tipsnya,blog nya juga...
BalasHapusMakasih gan atas tipsnya..........:)
To IT-Soft Center : heheheh dari mana sobat bisa billang makin mantap :)) sama saja kok :)
BalasHapuslagi2 sy nongol bro.. heheh :-*
BalasHapusBenar sob, mungkin karena latarnya hitam.Kodenya masih menempel ko sob,biar sebentar ane ganti dengan warna yg lebih terang.Makasih ya.
BalasHapusTo Rohis Facebook : Hehehehe serem ah nongol tiba tiba kayak . . . .wkowkowk
BalasHapusTo Er'end : sudah ane duga sob kalau blog gelap di letakan script css ini pasti kurang terlihat 8-} huahaha sama sama :)
nice info gan
BalasHapuslangsung tak cobain (y)
Malam yang dingin dan sepi, cocoknya mengunjungi blog sahabat dan membaca artikel didalamnya untuk sekedar mencari kehangatan dan keramaian. Selamat Malam Sobat!!!
BalasHapusow jd gak bisa y sob?
BalasHapusane kira bisa, jadi background ane yg transparan bisa dikasih box shadow
oke deh makasih penjelasannya.
Datang kembali nunggu postingan selanjutnya
BalasHapuskunjungan di pagi hari dengan semangat yang baru
BalasHapusKunjungan silaturahmi saudaraku setelah sekian lama vakum nih
BalasHapusPena hadir dan absen kembali sobat.....
BalasHapuscss3 bener2 menarik deh pokoknya, ehehehe..
BalasHapusmakin kreatif sob ;)
dateng lagi tuk berlajar disini
BalasHapustambah kereen nii tampilannya..
BalasHapusberkunjung sob...
BalasHapusingin dapat ilmu yang baru lagi nich....
salam persahabatan !
Wah seputar atikel Desain tentang teks shadow kian mencuat rupanya. Emang keren sih, nice post sahabat.
BalasHapusIni yang kucari sobat :)
BalasHapusTo On The 7 : silahkan di cobain sob :)
BalasHapusTo Polbeng Kidz : alhamdulillah ya sob sesuatu banget kala begitu :))
To Liandri eko : ane gak ngerti maksud dari pertanyaan sobat sejujurnya
To cardiacku : silahkan di tunggu :)
BalasHapusTo Admin-Wahid Sahidu : selamat pagi sob hihihih
To abufarras : alhamdulillah ya sobat bisa datang dan berkunjung serta mengomentari blog :)
To tautanpena : hehehe selamat mengapsensikan diri disini
To Ladida Cafe : sangat menarik jika di edit edit :)
BalasHapusTo Admin-Wahid Sahidu : alhamdulillah bisa datang kembali :)
To API : hehe makasih ya sob supportnya :)
To bensdoing : alhamdulillah ya sesuatu banget bisa di kunjungin sobat :)) =))
To Berbagi Kreativitas :hehehehe ane pun berfkir demikian untuk box shadow ini :)
BalasHapusTo G. Gregorio : akhirnya ketemu. alhamdulillah :))
Nice info mas,, baru tau nih,, hehe :))
BalasHapusThanks tipsnya ;;)
makin keren aja sob postingannya, ahli blog sejati nih. Efek shadow baru saya ketahui
BalasHapusTo Uzumaki Lovers : thanks gan kunjungannya :)
BalasHapusTo penyebab getaran mesin : hehehehe berlebihan nih sobat mujinya :) ane gak segitunya kok sob :)
Trima kasih telah sharing....tips yang ok
BalasHapusTo Wisata Bali : terimakasih sobat komentarnya :) makasih ya kunjungannya
BalasHapusSaya pelajari dahulu bro,,makasih
BalasHapusTo Dangstars Weblog : silahkan di pelajari sob :)
BalasHapuswah keren banget nih sobat, sampai ada bayangannya segala sobat...
BalasHapusasyik memang main-2 dengan box shadow, saya juga sering memakai nya :)
BalasHapusTo Asis Sugianto : memang itulah kehebatan dari box-shadow itu :) bisa di kombine kombine :)
BalasHapusTo Dhani : hehehe iya sob sangat asyik, jadi lebih bergaya :)
mantapp ne gan
BalasHapusTo Bangjal Dua Tiga : makasih gan suport dan kunjungannya :)
BalasHapusmassbro cuman ngasih tau, ada 1 lagi yaitu outset.. :)) hehhe
BalasHapusTo SaMuel : pingset aja gan sekalian :D masa sih ada outset?
BalasHapusiya, coba aja kalau gak percaya.. :p
BalasHapusTo SaMuel : ane coba gak ada -__- :| :)) hahaha
BalasHapusbokan shadow tapi border.. hehehe.. :D
BalasHapusTo SaMuel : oalah tak kira box-shadow yang ane bicarakan kan box-shadow ngapa jadi border? :|
BalasHapuscukup mdah..
BalasHapusTo mania-xp : memang sob sangat mudah :)
BalasHapusTerimakasih tips cara membuat efek shadow pada halaman......
BalasHapusTo Dhidhit : sama samas, semoga berguna :)
BalasHapusmanteb gan
BalasHapusmakasih supportnya :)
HapusKeren banget nih blognya,, salam kenal kunjungan perdana nih :)
BalasHapus