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
PERTAMAXXX baca dolo ah
izin mempelajari dlu sob. . . :)
uda ane pelajarin dan ane mau jadiin button halaman selanjudny, home, dan sebelumny :D
gagal :((
@ Shinobi Blog : Silahkan kawan..
@ Cek Info : Ohh mau di buat menu gitu maksudnya??
kalau mau jadiin menu : taro script css nya di atas b/:skin tanpa style,, script htmlnya tari di widget aja
buat menu iy emang tau gk cara reset menu kayak puny sy gitu menuny o-om??? kalo tau bagi2 tips kk. xixi
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.....
@ 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
nice info gan , thx for share
Maksudnya kaya gini :
https://lh3.googleusercontent.com/-PMxHa379AgQ/TkcPbw4MoPI/AAAAAAAABaA/yFxjR8NGBPA/s800/cekinfoedit.png
Wah.. keren :D
nah, ini yang aku butuhkan.. request aku sebelumnya :D hehehe makasih banyak yaa
silahkan lihat blog ku aku sudah mencobanya :D
Keren sob artikelnya
Wah, mantep nih postingannya,, kreatif..heheeWah, mantep nih postingannya,, kreatif..hehee
wah hebat ya, semuanya bisa dengan efek CSS.
iy sob, bener tp gk usa pake border radius pake solid aj kan bisa!
btw : gmna cara buatny?
@ Pradisz Wardhana : thanks sob.. :)
@ AcerNoval : Waah iya tunggu ane ktp.. bro
@ Musa Khairul Umam : Maksh..
@ 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 : 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..
@BUTTON, MARQUEE WITH SHADOW EFFECT CSS3 : cara2 nya ada DISINI sob..
@ AcerNoval : waah thnks broo udh dianterin link nya xixix... biar ane yg ke situ aja..
okeee gan, makasi sharingnya dan kedatangannya ke blog kami
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
Membaca Artikel ini, saya jadi terinspirasi belajar bahasa program. Mengasyikan kali yah, Terima kasih.
Thanks sob, sudah berbagi artikel yg sangat bermanfaat.
Postingan yang menarik....tetap semangat....
Saya pernah coba, tapi malah jadi berantakan. Parahnya lagi blog ku jadi kacau balau. hehehehe......
Makasih kang atas infonya,jadi kepengen ngulik2 deui eum :D
wah, utk membuat tombol akan lebih sempurna kalo a:active nya juga di atur css nya sob, jadi ngga cuma hover ajaa :D
@ 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.
@ 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.. :)
@ 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
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...
Semakin mantab aja ne blog!
Besok-besok kalo ada yang request suruh bayar gán!
hehehe
@ 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??
@ Kopiah Putih : hahaha ide bagus tuh. haha
masa iyya bayar gan kalo mau request... udah mau kayak rentenir aja... hhhhaa
@ Shinobi Blog : ckckck.. cuma nanggapin ide yg di atas aja.
haaha okee sama2 sob :D
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..
Klo mau ane ceritain ato tulis alasan ane kenapa pengen punya tu koode, kaga bakal cukup ruang disini gan..
@ Ngalor Ngidul : Ohh gitu,, tp saya ngga tau bro yg kya gitu
Klo gak tau gak papa gan..
Tapi kalo bisa kasih kabar ya..
mantab tampiln nya
sipp bner agaknya bleh tuh di coba
nyoba dulu ya gan..
jangan lupa komeng back
yoi, k fb
add ==> As Mara Susanto
ntar abis terawih OL sob :D
@ Info game : maksudnya apaan sob??
@ Setiawan Brother : hehe silahkn brad dicoba
@ Hajsmy : tkp
@ Cek Info : Email nya aja sob
keren banget dah sob ... Thanks for share ,,,,
gan kl css buat menu drop down gmn?
@ Liandri eko : ngga tau sob.. belum pernah cobaa.. kan banyak menu kya gitu :)
Leave your comment
Thank you.