Langsung ke konten utama

Postingan

Menampilkan postingan dari Mei, 2012

Trik CSS Pseudo-elements

Hai sobat~saya mau share ilmu CSS lagi nih,tapi tingkat menengah.jadi yang ingin belajar,coba dan usaha dulu sebelum bertanya.tadinya sih saya mau share css yang paling dasar dulu,tapi males karena ga sempet(im sorry=_=v) jelasin'a karena banyak sekali,dan mungkin akan jadi buku.wkwkwkw.kali ini tentang CSS Pseudo - elements?apa itu?CSS pseudo-elemen adalah CSS yang digunakan untuk menambahkan efek khusus pada beberapa seleksi element yang kita inginkan tanpa harus menambahan html.css ini sebenar'a sudah umum dan banyak digunakan web designer yang sering kita lihat sekarang banyak yang ahli menggunakan CSS3 hingga terlihat artisitik.saya juga sudah lama menggunakan ini sih,baru sekarang saya share,karenalagi ada waktu luang~jadi bagi yang ingin belajar,silakan dibaca dari awal :) Contoh template yang saya terapkan menggunakan trik ini yaitu: 1. Haiyore nyaruko-san 2. Sora no otoshimono 3. Shinobu oshino 4. Green minimalist 5. Fairy tail 6. blog saya sendiri :) Dan beberapa trik

Green Minimalist Blogger Templates

Lanjut sob~ saya kembangkan lagi nih template Shinobu oshino .design'a saya buat dengan CSS3 Pseudo sehingga agak sederhana dari template sebelumnya da tambah abstrak juga.yahh,namanya juga template aneh tapi unik,kalau tidak unik,bukan teemplate johanes nama'a~xD -Preview- -Pengaturan menu Buka blogger=>templates=>edit HTML lalu cari HTML seperti dibawah ini,lalu ganti tanda pagar '#' dengan URL link yang kamu inginkan. <div id='nav'> <ul> <li><a href='http://#'>Home</a></li> <li><a href='http://#'>About</a></li> <li><a href='http://#'>Contact</a></li> <li><a href='http://#'>Guestbook</a></li> <li><a href='http://#'>Exchange link</a></li> <li><a href='http://#'>Sitemap</a></li> </ul> </div> Download via google drive Download Via 4shared Demo S

Splash Effects dengan CSS3 dan Curtain opening dengan Jquery

Splash Effects dengan CSS3 dan Curtain opening dengan Jquery.namanya panjang juga ya?ahh,karena ini adalah hasil experimen saya sendiri dengan menggabungkan dua trik yang fungsinya berbeda. pertama Untuk text effect'a adalah trik lama yang saya dapat dari Splash & Coming Soon Page Effects with CSS3 ( Codrops )(hanya html dan css3) dan Tombol close serta work animasinya menggunakan Jquery animated Curtain Seperti yang kalian tahu,Jquery animated itu fungsinya membuat tirai buka tutup pada halaman blog,tapi yang saya ambil hanya bagian tombol dan script yang sudah saya edit sendiri. Trik ini sudah saya terapkan pada template terbaru saya : Shinobu Oshino Untuk menggunakan Trik ini,selalu back-up template kamu agar tidak terjadi sesuatu yang diinginkan,karena ada kemungkinan kamu akan menemui beberapa problem seperti: -tombol open tidak dapat di klik. Kenapa tidak bisa diklik? Ada kemungkinan Jquery tidak aktif karena: -ada jquery lain yang sama. -ada js lain yang bentrok dengan j

Cloud Animasi dengan CSS3

Hai sobat kali ini saya mau sharing trik menarik lagi nih,namanya Cloud animasi seperti yang saya pasang diblog saya.tapi untuk trik ini,saya modifikasi sendiri css dan htmlnya menjadi 2 versi,yang pertama awan'a berwarna putih menggunakan CSS3 css pseudo pada background.dan yang kedua awan akatsuki yang hanya diberi background gambar awan akatsuki yang saya buat sendiri,cukup menarik bukan? Tapi sebelum menggunakan trik ini saya ingatkan untuk: -Membackup terlebih dahulu blog kamu agar tidak terjadi sesuatu yang diinginkan. -mengetahui bahwa menggunakan trik ini harus dapat mengatur posisi awanya sendiri,karena ada kemungkinan saat kamu menggunakan trik ini,elemen yang dibelakangnya akan tertutupi. Contoh kemungkinan problem: -Header tertutup oleh awan ini hingga header tidak bisa berfungsi untuk diklik. -Bila kamu menggunakan menubar pada blog kamu maka ada kemungkinan tertutupi oleh awan ini. Solusi: -Gunakan/ganti nilai z-index menjadi lebih rendah/tinggi(-99999999 s/d 99

Tombol Menu Unik dengan CSS3 Animasi

Mencari sesuatu yang baru memang sulit.dibutuhkan kerja keras untuk mendapatkan sesuatu yang baru.inspirasipun tidak akan datang jika kita hanya berdiam diri,dan akhirinya setelah keliling" dunia browsing browsing dan browsing.akhirnya,kepala gw pusing @___@" wakakaka,memang bikin galau trik yang satu ini.sebelum'a saya cuma iseng" dengan CSS3 keyframe yang saya buat n modif sendiri di header blog saya,tapi karena kepikiran yang lain juga,banyak messages gajelas di fb yang minta share" cara'a,yweslah saya share deh.tapi trik ini agak beda dengan yang ada di header saya,beda'a CSS ini saya terapkan untuk tombol readmore.tapi sebenarnya bisa juga untuk tombol menu sendiri.karena kalau saya nyebarin masang animasi sebesar itu yang seperti blog saya,yang ada saya malah nyebarin dosa memberatkan blog kamu deh.wakwkawkawk.tapi untuk trik ini menurut saya cukup ringan,tidak ada penggunaan gambar sama sekali,100% CSS3.tapi untuk tampilan terbaik,saya sarankan u

Shinobu Oshino Blogger template

Shinobu Oshino Blogger template,sebenarnya ini template awalnya buat blog pribadi saya,yang artikel'a mengenai anime dan yang berbau japan.sudah di design sekeren mungkin tambah ini tambah itu.tapi karena udah maless duluan karena nanti pastinya ga bakal keurus.alhasil setelah template'a sudah rapih.langsung dishare aja deh~xD Tema template kali ini adalah Shinobu Oshino karakter yang saya ambil dari anime Bakemonogatari.untuk cerita anime'a,cari di google ya :p.Template ini adalah hasil modifikasi dari template uchiha Itachi => Sora no otoshimono yang sudah saya tambahkan beberapa fitur dalam template ini,diantaranya: -Breadcrumb -Autoreadmore. -Simple Vertikal menu. -Threaded Comment. //Fungsi reply// -Dan Splash screen Text effect dengan CSS3 keyframe dan jquery. //Hanya di halaman Home page// -Preview- Untuk Splash screenya sendiri,adalah hasil modifikasi saya dengan menggabungkan dua trik yang fungsinya berbeda. pertama Untuk text effect'a adalah trik lama ya

Single Submenu dengan CSS3

apa kabar sobat,udah lama nih saya ga share trik css lagi,kali ini saya tadinya cuma iseng" otak-atik box css3,tapi akhirnya jadi begini deh,lalu saya buat saja jadi menu.menu ini menggunaan hover effect transform.jadi ketika kita hover/arahkan kursor kemenu,maka akan menampilkan beberapa menu lagi. karena itu saya sebut saja nama'a sub menu.menu'a saya buat 2 style.yaitu dengan 4 menu dan 8 menu.tadi'a sih pengen nambahin lagi,tapi karena sudah agak lelah,jadi saya posting saja sekarang,mungin nanti saya modif lagi trik sub menu ini. untuk contoh'a,kalian bisa lihat sendiri dibawah ini.direkomendasikan untuk menggunakan browser versi terbaru agar hasil'a maksimal.trik ini tidakberat kq,karena ini bukan css3 animation keyframe==v bila kalian mau mencoba,silakan copy paste saja CSS dan HTML dibawah ini. Css'a ditaruh di atas kode ]]></b:skin> .sedangkan untuk HTMl'a diantara <body> isi HTML </body>. atau bisa juga ke layout=>a