BUTTON & MARQUEE WITH SHADOW EFFECT CSS3


Lelah sekali rasanya akhir-akhir ini untuk blogging setelah menguras otak untuk mengeluarkan inspirasi dan imajinasi saya dalam ngoprek-ngoprek css yang memang menjadi kesenangan saya saat ini, belum lagi project blogazine yang masih bersih alias masih jauh dari kata selesai. Ohh sungguh menyedihkan.. haha lebay :P

Flashback kepostingan sebelumnya tentang PENGGABUNGAN/PENULISAN SCRIPT CSS DENGAN HTML UNTUK POSTING ternyata banyak sobat yang sepertinya berminat dengan pembahasan css ini dan membuat saya jadi kecanduan ingin terus membahasnya.
Ok sebelum kita loncat ketopik utamanya, saya akan memberikan contoh untuk penulisan script sederhana untuk shadow effect :
Text-shadow: 0 0 10px #000000; --> ini untuk teks
Box-shadow: 5px 5px 5px #000000; --> ini untuk kotak

Untuk Button dengan effect shadow, hasilnya akan seperti ini :






<style type="text/css">
#Lontong {
background: #fff;
padding: 5px;
border: 2px hidden #bbb;
border-radius: 20px 5px 20px 5px;
box-shadow: 5px 5px 5px #0071C1;
width: 125px;
height: 25px;
opacity: 0.6;
}

#Lontong:hover {
background: #fff;
box-shadow: 0 0 10px #0071C1;
opacity: 1;
}

#Lontong a {
margin: 20px;
font-size: 24px;
text-transform: uppercase;
}
</style>

<div id="Lontong" style="text-align: center;">
<a href="http://se-avancee.blogspot.com/" target="_blank">TEKAN</a></div>


Kalau sobat perhatikan script diatas tidak jauh berbeda dengan postingan sebelumnya,, hanya diedit sedikit-sedikit saja.. ini menunjukan bahwa bermain css tidak sesulit yang kelihatannya.
Untuk sobat yang kemarin request marquee dengan effect menyala, mohon maaf saya gabungan di postingan ini juga..






<style type="text/css">
#Combrow {
padding: 5px;
border: 2px solid #bbb;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 20px #FFCC00;
}

#Combrow:hover {
box-shadow: 0 0 20px #0055CC;
text-shadow: 0 0 10px #ff0000;
}

#Combrow a {
color: #ffffff;
font-weight: bold;
text-shadow: 0 0 10px #ff0000;
}
</style>

<div id="Combrow">
<marquee><a href="http://se-avancee.blogspot.com/">Marquee Dengan Effect Text-Shadow</a></marquee></div>


Ok saya rasa cukup segitu untuk pembahasan dasar tentang shadow effect, selebihnya tinggal sobat tangkap sendiri logika nya :p dan seperti biasa, jika ada yang pertanyaan atau ada yang mau menambahkan silahkan salurkan pada komentar dibawah ini. Selamat berkreasi

Comments for this entry

Kerajaanhosting masa depan hosting Indonesia

PERTAMAXXX baca dolo ah

Shinobi Blog

izin mempelajari dlu sob. . . :)

Kerajaanhosting masa depan hosting Indonesia

uda ane pelajarin dan ane mau jadiin button halaman selanjudny, home, dan sebelumny :D

Kerajaanhosting masa depan hosting Indonesia

gagal :((

Putra Tenzhung

@ Shinobi Blog : Silahkan kawan..

@ Cek Info : Ohh mau di buat menu gitu maksudnya??

Putra Tenzhung

kalau mau jadiin menu : taro script css nya di atas b/:skin tanpa style,, script htmlnya tari di widget aja

Kerajaanhosting masa depan hosting Indonesia

buat menu iy emang tau gk cara reset menu kayak puny sy gitu menuny o-om??? kalo tau bagi2 tips kk. xixi

Ngalor Ngidul

Wah...
REquest ane langsung diposting ya gan...
Kalo warna tulisannya berubah-ubah secara otomatis kayanya lebih keren deh gan..
haha...
ni orang ngerjain apa gimana sich??!!!
kaga gan..
bener...
Ane kan kaga ngerti css, klo ane bisa kita pasti udah saingan postingan tutorial css..
ane cuma request biar kalo ane butuh pa2 tinggal request lagi....
wkwkwwkkwkkkk.....

Putra Tenzhung

@ Cek Info : di reset gimana?? diganti gitu??

@ Ngalor Ngidul : saya ngga ngerti maksudnya gmna, cuma kalo ada contoh nya saya tau :P tidak usah sungkan buat request :D

SELAMAT DATANG DI BLOGKU

nice info gan , thx for share

Cek Info's Author

iy, tau gk cara ngganti style menuny o-om/Cek Info?

Putra Tenzhung

Maksudnya kaya gini :

https://lh3.googleusercontent.com/-PMxHa379AgQ/TkcPbw4MoPI/AAAAAAAABaA/yFxjR8NGBPA/s800/cekinfoedit.png

Pradisz Wardhana

Wah.. keren :D

AcerNoval

nah, ini yang aku butuhkan.. request aku sebelumnya :D hehehe makasih banyak yaa
silahkan lihat blog ku aku sudah mencobanya :D

Musa Khairul Umam

Keren sob artikelnya

el

Wah, mantep nih postingannya,, kreatif..heheeWah, mantep nih postingannya,, kreatif..hehee

Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot

wah hebat ya, semuanya bisa dengan efek CSS.

Kerajaanhosting masa depan hosting Indonesia

iy sob, bener tp gk usa pake border radius pake solid aj kan bisa!
btw : gmna cara buatny?

Putra Tenzhung

@ Pradisz Wardhana : thanks sob.. :)

@ AcerNoval : Waah iya tunggu ane ktp.. bro

@ Musa Khairul Umam : Maksh..

Putra Tenzhung

@ el : hehe thanks sobat

@ Daw xp : yuups bener soob

@ Cek info : ubah aja code css #nav { dan #nav ul li a, #nav ul li a:visited

Cek Info's Author

cuma gitu doank? bingung =="

Cek Info's Author

maksudny buat menuny sob, gmna?

Putra Tenzhung

@ Cek Info : iyaa... itu buat menu nyaa... sudah ane lihat semua script nyaa.. ya ane cuma bisa ngasih tau sgitu,, ente harus ngerti sdkt tntang html & css.
kalo mau cari media lain agar ane lebih leluasa ngejelasinnya..

AcerNoval

@BUTTON, MARQUEE WITH SHADOW EFFECT CSS3 : cara2 nya ada DISINI sob..

Putra Tenzhung

@ AcerNoval : waah thnks broo udh dianterin link nya xixix... biar ane yg ke situ aja..

jagoan

okeee gan, makasi sharingnya dan kedatangannya ke blog kami

Cek Info's Author

modifikasi scriptny gmna y?

Cek Info's Author

sory kalo ane spamm ane kadang suka nulis kata seperti yg ente sebutkan "pertamax,keduax,sampe ke-10,nice info,kunjungin balik gan,artikel bagus bratis ane spamer juga ya. Mav ya gan admin kl ane suka spamer di mari. :D

Ngalor Ngidul

Maksud ane yang jalan warna tulisannya gan...
bukan tulisannya yang berjalan...
Untuk lihat contohnya ne ane kaasih scriptnya...

http://alluneed-by-rea.blogspot.com/2011/08/var-messagedemo-teks-neon-demo-teks.html

rofi

Membaca Artikel ini, saya jadi terinspirasi belajar bahasa program. Mengasyikan kali yah, Terima kasih.

home

Thanks sob, sudah berbagi artikel yg sangat bermanfaat.

women

Postingan yang menarik....tetap semangat....

News

Saya pernah coba, tapi malah jadi berantakan. Parahnya lagi blog ku jadi kacau balau. hehehehe......

Raindra

Makasih kang atas infonya,jadi kepengen ngulik2 deui eum :D

Ladida

wah, utk membuat tombol akan lebih sempurna kalo a:active nya juga di atur css nya sob, jadi ngga cuma hover ajaa :D

Putra Tenzhung

@ Cek Info : Iyaa sobb... hehe sloow sajalahh,, ekekeke..
Oke kalo emang ente serius mau ngerombak menu nya,, ane ngga bisa ngejelasin panjang lebar dikomentar yg sempit ini,, mendingan via facebook saja.

Putra Tenzhung

@ Ngalor Ngidul : udh ane check ke tkp,, ternyata itu pake javascript juga, jujur ayam nihh.. hehe ane buta dengan js. tp kalo untuk meniru aja nanti ane publish dhh.. :)

Putra Tenzhung

@ Rofi : Ayoo semangat broo.. kita kembangkan web designer indonesia !!! hehe

@ Yang lainnya : thankkss :D

@ Ladida : iyaa betul banget soobb.. banyak effect banyak warna cerah dunia :D

Ngalor Ngidul

GAn..
Ane Ada request lagi neh..
Ane kaga tau ne CSS, HTML ato script ato apa..
Ane minta dibuatin kode yang fungsinya untuk membuat 1 link menuju dua alamat..
Tapi yang terbuka di tab ato window baru cuma link ke dua aja..
sedangkan link yang pertama tetap dihalaman yang sama..
Ato sebaliknya juga gak apa-apa..
klo bisa pliss banget di share..
Ane udah seharian nyari di google belum ada yang bikin..
otak ane juga udh mau pecah nyoba-nyoba..

thanks sebelumnya...

Kopiah Putih

Semakin mantab aja ne blog!
Besok-besok kalo ada yang request suruh bayar gán!
hehehe

Putra Tenzhung

@ Ngalor Ngidul : 1 link membuka 2 url,, yang 1 membuka window baru, yang 1 lagi dihalaman yang sama,, kayanya itu seperti Pop up yaahh... kalo saya tebak ente buat url iklan 1 nya ya??

Putra Tenzhung

@ Kopiah Putih : hahaha ide bagus tuh. haha

Shinobi Blog

masa iyya bayar gan kalo mau request... udah mau kayak rentenir aja... hhhhaa

Putra Tenzhung

@ Shinobi Blog : ckckck.. cuma nanggapin ide yg di atas aja.

AcerNoval

haaha okee sama2 sob :D

NGalor ngidul

Bukan gan..
klo 1 hal + 2 langsung terbuka di tab baru kan jadinya ada 3 tab sekali gus. . terlalu banyak yang kebuka.. Ane juga mikirin para sohib yang rajin support kali gan.. pa lagi yang bloggingnya pake modem lemot...
klo mau lihat chek langsung ke shoutmix ane yang baru..
dan lihat hasilnya..
klo udah gimana perasaan agan klo jadi pengunjung..
soalnya klo ada yang fungsinya seperti itu mau ane pake di halaman ini..

NGalor ngidul

Klo mau ane ceritain ato tulis alasan ane kenapa pengen punya tu koode, kaga bakal cukup ruang disini gan..

Putra Tenzhung

@ Ngalor Ngidul : Ohh gitu,, tp saya ngga tau bro yg kya gitu

Info game

Klo gak tau gak papa gan..
Tapi kalo bisa kasih kabar ya..

Setiawan Brothers

mantab tampiln nya

sipp bner agaknya bleh tuh di coba

Hajsmy

nyoba dulu ya gan..

jangan lupa komeng back

Cek Info

yoi, k fb
add ==> As Mara Susanto
ntar abis terawih OL sob :D

Putra Tenzhung

@ Info game : maksudnya apaan sob??

@ Setiawan Brother : hehe silahkn brad dicoba

@ Hajsmy : tkp

@ Cek Info : Email nya aja sob

Asmara Susanto

fb km uda ane add :D

Mufi_ed

keren banget dah sob ... Thanks for share ,,,,

Liandri eko

gan kl css buat menu drop down gmn?

Putra Tenzhung

@ Liandri eko : ngga tau sob.. belum pernah cobaa.. kan banyak menu kya gitu :)

Leave your comment

Thank you.