Semua Tentang Seni

Sobat bosen dengan tampilan blog sobat?sekedar berbagi ilmu,bagaimana caranya warna background pada home page berbeda dengan tampilan saat membaca posting blog,seperti blog saya.mau tau cara'a gan?Cekidot gan... Untuk dapat merubah tampilan blog,cara yang kita gunakan hanya CSS3 dan HTML b:if cond yang sudah saya kasih tau di artikel 5 Kode HTML Untuk Mengatur Tampilan Blog .yang kita lakukan sekarang,hanya merubah css pada tampilan posting,kita tidak perlu menambah kode HTML lagi pada primary CSS/homepage.disini saya hanya akan share trik sederhana untuk mengganti background. yang kita akan gunakan adalah kode HTML: <b:if cond='data:blog.pageType == &quot;item&quot;'> isi widget </b:if> Dan CSS external dengan Style HTML: <style type='text/css'> Isi CSS </style> TRik pertama: merubah warna background pada Halaman posting. Sobat copy paste dulu kode HTML di bawah ini <b:if cond='data:blog.pageType == &quot;item...

apa kabar sobat?sehat kan?sebelum'a saya mengucapkan natal dan tahun baru 2011 ^^ ok,kali ini saya mau share tentang dasar - dasar tentang trik CSS3 yang sudah kita coba selama ini ,mungkin sebagian dari sobat hanya copy paste css ke template,tanpa mengerti arti kode tersebut dan fungsinya,dan mengalami kesulitan untuk mengatur sendiri css'a. pertama kita harus tahu dulu apa itu CSS ?? Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengatur beberapa komponen atau elemen dalam sebuah web sehingga akan lebih terstruktur dan seragam dengan HTML/script.Untuk saat ini terdapat tiga versi CSS, yaitu CSS1,CSS2 dan saat ini yang sedang populer adalah CSS3 .CSS 1 dikembangkan berpusat pada pemformatan dokumen HTML,CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. Selain itu CSS 2 mendukung penentuan posisi konten, downloadable, huruf (font), tampilan pada tabel (table layout) dan media tipe untuk printe...

apa kabar sobat?kali ini saya mau share trik menarik lagi nih.membuat Menu Bubbles Dengan Jquery Dan CSS3,sebenarnya'a ini trik lama ,tapi beda'a disini saya menambahkan Sentuhan CSS3 agar lebih menarik. efek bubble akan muncul jika sobat arahkan kursor ke tombolnya.mau?cekidot gan.... Pertama,cobat copy paste CSS di bawah ini di Rancangan =>Edit HTML =>lalu letakan css'a di template sobat di atas kode ]]></b:skin> .bubbles { margin: 100px 0 0; padding: 0; list-style: none; } .bubbles li { padding: 0; margin: 0 2px; float: left; position: relative; text-align: center; } .bubbles a { padding: 15px 10px; display: block; color: #000000; width: 140px; text-decoration: none; font-weight: bold; background: -moz-linear-gradient(top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(50%,#d8f0fc), color-stop(51%,#b8e2f6), color-stop(100%,#b6dffd)); -webkit-border-radius: ...

sobat mungkin terdengar agak asing dengan dengan em,pt,dan px? sekedar berbagi pengetahuan tentang apa itu em,pt,dan px,yang biasa kita temukan pada css template blog kita.ke tiga elemen itu berfungsi hampir sama kq ... langsung aja saya mau kasih tau aja nih ^^ pertama,kita pejari pixel dulu ya ^^ PX/PIXEL Dalam dunia blog,pixel digunakan untuk mengatur besar text,gambar,background,dan widget2 yang ada pada web/blog,tapi Dalam digital imaging,px atau yang biasa kita sebut pixel (atau elemen gambar) adalah satu titik dalam citra raster. Pixel adalah elemen terkecil dialamatkan layar, itu adalah unit terkecil dari gambar yang dapat dikendalikan. Setiap piksel memiliki alamat sendiri. Alamat dari piksel yang sesuai dengan yang koordinat. Pixel biasanya disusun dalam grid dua dimensi, dan sering direpresentasikan menggunakan titik-titik atau kotak. Setiap pixel adalah contoh dari gambar asli; sampel lebih biasanya memberikan representasi yang lebih akurat yang asli. Intensitas setiap pix...

Mungkin sobat sudah pernah melihat atau menggunakan trik ini menggunakan javascript dan jquery yang membuat link jadi berkedip warna - warni,tetapi trik menggunakan javasript itu bisa membuat blog kita berat ,bahkan jadi hang...nah,disini saya akan kasih tau gimana cara'a membuat kostum link hover dengan pilihan warna yang bisa kita atur sendiri menggunakan KEYFRAME CSS3.trik ini sangat mudah digunakan,dan tidak akan memberatkan blog sobat karena penggunaan css'a tidak terlalu banyak. untuk contoh'a bisa sobat lihat dan rasakan di blog ini,tpi harus menggunakan browser yang mendukung CSS3 ya..sayang'a mozila firefox belum mendukung TT..TT sobat coba menggunakan google chrome deh.. langsung aja saya kasih tutorial'a nih n_n Pertama,buka blog sobat buka Rancangan => edit HTML lalu masukan css dibawah ini di template sobat. a:hover { -webkit-animation-name: pulsate; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes...

ini dia kehebatan CSS3,effect'a yang keren dan mirip dengan effect jquery dan flash.menggunakan css3 tidak akan memberatkan blog sobat tergantung banyak'a pemakaian css pada blog sobat ,nah..kali ini saya akan share 30 Kreasi css3 dari saya yang unik2 n_n  ,terdiri dari jenis CSS3 border radius atau corner,CSS3 gradient,dan CSS3 animation.untuk menikmati CSS3 ini,disarankan sobat menggunakan browser versi terbaru,dan mendukung CSS3 agar tidak ralat dalam menampilkan CSS3 ini sperti google chrome,safari,dan mozilla firefox,tetapi mozilla firefox saat ini belum mendukung 100% CSS3 animation. Kode HTML masukan kode html ini di elemen halaman sobat,tapi ganti class name pada kode html di bawah ini <div class="ganti dengan nama css/kotak"></div> Contoh: <div class="kotak2"></div> <div class="lingkaran"></div> CSS3 Border radius kotak1 .kotak1 { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; b...

Sobat bingung dalam menentukan warna saat membuat css gradient yang sobat buat?saya punya alternatif'a nih..CSS3 gradient generator.dengan generator ini,akan memudahkan kita untuk mengatur besar,radius dan warna yang kita inginkan.Cekidot gan. Sobat bisa kunjungi situs alternatif'a di http://csscorners.com/ http://www.colorzilla.com/gradient-editor/ http://www.westciv.com/tools/gradients/ http://freehtml5templates.com/gradientgenerator/gradient-generator.php Semoga bermanfaat gan n_n