Semua Tentang Seni

Postingan

Menampilkan postingan dari November, 2010

Animasi Sharingan Dengan CSS3

hai sobat,kali ini saya mau share cara membuat animasi sharingan hasil experimen sendiri nih n_n silakan sobat coba2 buat iseng2.tapi trik css3 animation ini,hanya akan terlihat di browser tertentu seperti google chorme .untuk mozilla firefox belum dapat mendukung animasi ini .bila sobat mau lihat contoh'a,bisa dilihat Disini ini dia trik'a Pertama,masukan CSS ini di template sobat .Sharinganmadara { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVnO1bC9Z00kRU3EyCMBOyIY5eODl_GgSAU9NySpJF69H6Pn1fnDUw6rARtOKGdONXowXSYfstpOrFE_tdYRHRhxBYgGm-QAQ5pVyESbtOBzRgFfjiTpd49Eac-SJPVZw-xLJcnzu5krOz/s320/300px-Mangekyou_Sharingan_Madara.svg.png) no-repeat; height: 300px; line-height: 46px; width: 300px; -webkit-transition: all 2s ease-in-out; } .Sharinganmadara:hover { -webkit-transform: rotate(900deg); } Url gambar bisa sobat ganti dengan gambar sobat lalu masukan kode HTML ini di blog soba/elemen halaman. <div class="Sharinganmadara"> </div&

Baca selengkapnya

5 kode HTML untuk Mengatur tampilan blog

Saya dapat pertanyaan dari teman saya,bagaimana bisa sidebar hanya bisa tampil di home page?sedangkan pada saat membaca artikel,sidebar'a menghilang??ini dia trik'a. . trik'a adalah kode logika/ html /if. dengan kode ini kita bisa menambahkan sedikit kode sehingga menjadi b:if cond=, dalam artinya, jika kondisi...guna'a agar kita dapat menghilangkan elemen yang berat di halaman tertentu yang kita inginkan, Macam2 kode... Ada 5 macam yang yang bisa saya temukan di google n_n 1.<b:if cond='data:blog.url == data:blog.homepageUrl'> isi widget</b:if> Kode di atas ini fungsinya agar widget hanya pada homepage atau halaman utama saja. Contohnya sidebar pada blog saya di akatsuki akb. 2.<b:if cond='data:blog.pageType != "item"'> isi widget </b:if> kode ini fungsi'a supaya widget ada di halaman homepage dan label atau di kategori post. saya belum dapat contoh'a 3.<b:if cond='data:blog.pageType == &quot

Baca selengkapnya

Tips memilih Warna Design Blog

Hai sobat,apa kabar?sehatkan?Bagaimana menurut sobat tentang blog saya?kerenkan n_n penuh warna yang menarik dan ditambah dengan CSS3 ,tanpa menggunakan gambar sama sekali yang cocok untuk design blog kita. Mau tau kenapa saya memilih 5 warna ini dari sekian banyak warna?Cekidot gan. Pertama,sobat kunjungi http://www.colourlovers.com/palettes disana sobat bisa lihat perpaduan warna yang menarik dan bisa memberikan sejuta inspirasi untuk warna blog kita jika sobat sudah jatuh hati dengan salah satu warna/sesuai tema'a dengan blog sobat,di klik saja warna'a.. setelah itu,sobat akan masuk ke halaman tentang warna yang sobat pilih tadi. Contoh'a nanti akan tampil seperti gambar dibawah ini. Bila sobat perhatikan, di setiap keterangan warna'a,ada HEX dan RGB. apa itu??tapi sebelum'a saya tanya dulu... 1.apakah sobat tidak asing dengan kode ini di template sobat? background:#FFFFFF 2.apakah sobat tidak asing dengan kode ini di template sobat? text-shadow:1px 1px 0 rgb

Baca selengkapnya

Memasang Accordion Dengan Jquery dan Css

sobat udah pernah liat blog teman sobat sidebar'a bisa buka,lalu menutup??ini dia trik'a namanya Accordion,kalau sobat belum tau seperti apa Accordion ,sobat bisa lihat contoh'a disini dengan Accordion kamu bisa mengurangi tempat blog kamu.trik ini tdk akan memberatkan blog kq.ok,dah langsung aja saya kasih tau cara'a n_n Pertama,masukan kode HTML ini ke blog kamu... isi widget yang kamu iginkan.contoh:bukutamu,blogroll,link dan sebagai'a <div class="container"> <h2 class="acc_trigger"><a href="#">Menu1</a></h2> <div class="acc_container"> <div class="block"> Isi widget/text kamu disini </div> </div> <h2 class="acc_trigger"><a href="#">Menu2</a></h2> <div class="acc_container"> <div class="block"> Isi widget/text kamu disini </div> </div> </div> kemudian,masukan CSS in

Baca selengkapnya

Effect Asap dengan jquery

Ini dia,koleksi Jquery menarik dari saya,dengan effect asap ini,blog kamu akan tambah menarik.untuk contoh'a,kamu bisa liat di blog akatsuki atau di gayadesign mau tau cara'a?CEkidot gan n_n kalau mau lihat contoh'a,sobat bisa lihat disini pertama,copy paste js ini di atas kode </body> atau di bawah kode <head> <link href='http://www.gayadesign.com/scripts/smokeeffect/css/style.css' rel='stylesheet' type='text/css' /> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> <script src="http://www.gayadesign.com/scripts/smokeeffect/js/smokeEffect.js" type="text/javascript"></script> <script type='text/javascript'> SmokeEffect.imgLocation = "http://www.gayadesign.com/wp-content/themes/gdblocked/images/smoke.png"; SmokeEffect.smokeWidth = 100; SmokeEffect.smokeHeight = 100; </script> lalu masu

Baca selengkapnya

15 Website yang bermanfaat untuk Blog Design dan Web Design

Buat Sobat yang hoby otak-atik blog atau ngedit blog sendiri ,saya punya koleksi website Design blog nih..daripada di bookmark sendiri,mending dishare buat sobat,disini,saya berikan preview website dan URL link'a. .kamu bisa jelajahi situs tersebut,dan mencari info tentang belajar ngeblog ,html, css ,photoshop,design blog,dan masih banyak lagi.. Happy Surfing!!! n_n-xDD queness http://www.queness.com/ Webdesignerwall http://www.webdesignerwall.com/ Sohtanaka < http://www.sohtanaka.com/ Tympanus http://tympanus.net/ Deconstructioncode http://deconstructioncode.blogspot.com / Jurusgrafis http://jurusgrafis.com/ Tutorialzine http://tutorialzine.com/ Andrewsellick http://www.andrewsellick.com/ Tutorial9 http://www.tutorial9.net/ Buildinternet http://buildinternet.com/ 9lessons http://9lessons.blogspot.com/ Noupe http://www.noupe.com/ Net.Tutsplus http://net.tutsplus.com/ Designzzz < http://www.designzzz.com Designbombs http://www.designbombs.com Semoga bermanfaat untuk web blog k

Baca selengkapnya

Permasalah Pada CSS3

Untuk sobat,yang sudah bisa menggunakan CSS3 ,terkadang bila kita menggunakan browser tertentu,animasi itu akan berjalan sempurna,tapi terkadang juga,animasi itu gagal. kenapa bisa begitu???? banyak pertanyaan yang datang kepada saya -mas,kq animasinya ga jalan,cuma pindah doank gambarnya? =nah,itu sebenarnya permasalahan yg umum... masalahnya cuma 1,yaitu dari browser yang kita pakai. karena banyak browser versi lama,tidak dapat mendukung CSS3 ini Contoh: CSS animasi yang kita pakai adalah kode #tes{-webkit-transition: all 0.6s ease-out;} #tes:hover{ -moz-transform:scale(1.3); -webkit-transform:scale(1.3); } Seperti yang kita tahu,bahwa kode "-webkit-transition: all 0.6s ease-out;" agar efek animasinya terlihat dan kode: -moz-transform:scale(1.3); -webkit-transform:scale(1.3); kode diatas adalah kode yang sangat penting,untuk menampilkan animasinya... tetapi,kenapa animasi ini tidak berjalan?seperti yang tadi saya katakan,masalahnya dari browser yang kamu pakai... menurut

Baca selengkapnya

Gambar anime dengan IllustStudio

buat sobat yang suka gambar anime di komputer,saya punya info menarik nih untuk sobat,saya menemukan software khusus untuk gambar anime loh n_n. IllustStudio adalah sebuah program gambar dan ilustrasi digital , alat-alat canggih dan ITS disesuaikan interface program untuk membuat Anime Cocok untuk profesional atau untuk pemula. cara pengoperasian'a gampang kq,untuk layout,hampir sama dengan corel draw,tapi bedanya disini ada,paint tool, Contour Line Tool,Various Brush Tools, Ruler Tools . ini dia penjelasan'a Paint tool Pengguna dapat cat secara efektif dengan "Mengacu Layer Fungsi" yang menunjuk ke lapisan, seperti lapisan sketsa, dan "Folder Kliping Fungsi" - lukisan ketika bersembunyi wilayah dari daerah menunjuk. Pengguna dapat dengan mudah naungan ilustrasi oleh daerah lukisan tertutup oleh garis berwarna dengan gradasi lembut. Sebagai hasilnya, mereka dapat menghasilkan angka dimensi. IllustStudio ilustrasi mendukung alur kerja pengguna dengan "

Baca selengkapnya