ChugyGogog

Membuata transfaran pada background bisa menggunakan kode opacity, namun dengan opacity objek keseluruhan biasanya akan terbawa menjadi transfaran. Dengan penggunaan css3 dengan mengubah nilai “rgba” hal ini bisa dilakukan pada area background-color, border-color maupun color pada text sehingga kesan senada dan selaras akan lebih terlihat. Contoh : body {         background: blue ; } .main-wraper {       background : rgba ( 0, 0, 0, 0.1) ;       border : 1px solid rgba ( 0, 0, 0, 0.3) ;       color : rgba ( 0, 0, 0, 0.5); }

Lama tidak blogging bukan berarti tidak mengikuti perkembangan dari rekan blogger yang masih selalu Update diblognya. Sesekali saya berkunjung ke beberapa blog kawan saya di antaranya, belantara Indonesia, Om Dj Ferdinana, Bang hendro Prayitno dll ternyata mereka juga sama sepertinya dengan saya yang jarang buat posting kecuali Blognya belantara Indonesia yg masih sesekali Update hehehe. Postingan ini mungkin hanya sekedar mengobati rasa kangen saya pada blogger yang lama jarang di buka. Tadinya saya ingin membuat posting seputar CSS3 tapi mungkin udah basi karena memang udah banyak yang posting hehe. dan iseng-iseng juga ChugyGogog membuat sebuah mini studio desain online yang di fungsikan untuk menyimpan portofolia dari projek desain yang saya buat, walaupun mini studio ini belum sepenuhnya rampung. Sedikit mengenai tampilan dari Chugy mini Studio ini saya menggunakan hampir 90% menggunakan CSS3 jadi mungkin untuk beberapa browser yg blm mendukung CSS3 tampilannya kurang nyaman.

Selamat siang brader blogger semua kembali posting ni setelah sebelumnya memposting firefox versi 4 yang ternyata memiliki tampilan yang sedikit berbeda dari versi seblumnya. untuk kali ini ini saya akan memposting bukan seputar internet komputer melainkan seputar css dan blogger. Seperti judul posting ini yaitu membuat Speak Buble dengan Css3 . Speek buble ini merupakan tehnik permainan border dengan css. Dengan menggunakan Css Speak Buble dapat dibuat tanpa menggunakan image jadi ini akan lebih ringan dibuka di browser. Langsung saja pada penerapan dan koding css-y. Sebagai contoh saya membuat speak buble untuk teks area. contohnya bisa dilihat dibawah ini. Pertama kita buat kode CSS Speak Buble-y seperti ini. .speakbuble { position:relative; padding:30px; margin:3px 0; margin-top:1%; color:#000; text-align:center; background:#CCC; font-weight:bold; text-shadow:1px 1px 1px #eee; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;} .speakbuble:after { content:&qu

Selamat sore Brader Blogger semua akhirnya kembali membuat postingan walaupun sekarang jarang update tapi alhamdulilah disisa waktu luang ini akhirnya bs kembali update. Untuk sekarang saya akan share seputar tutorial CSS3 yang lama juga tidak ada info yang baru. Apalagi bang Hendro sesepuh CSS3 juga udah jarang ngebahas CSS3 hehehe.... gimana ni bang Hendro kabarnya kayanya lg asyik dengan koding-koding di weblognya. Langsung saja pada pokok pembahasan. tutorial CSS3 kali ini akan membahas pembuatan background dengan texture/ pattern full CSS3 seperti gambar diatas, dimana semua itu dilakukan menggunakan koding CSS3 tanpa image. Untuk Demo livenya bisa lihat pada link di bawah. Demo Live Dan untuk codingnya dibawah. Angled Pattern .angled { background-color: #ac0; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), c

Selamat sore blogger semua kayanya udah lama chugygogog tidak buat postingan. Okelah langsung saja di tengah sedikit kesibukan saya coba membuat sebuah tutorial blogger yang mudah-mudahan bisa bermanfaat. Tutorial kali ini saya akan membahas seputar CSS3 yaitu membuat Starburst atau bentuk seperti bintang dengan sudut berbentuk segitiga seperti gambar di bawah ini. Atau untuk lebih jelasnya bisa lihat demonya pada link dibawah ini. Lihat Demo Tehnik css3 ini saya temukan diblognya www.matthewjamestaylor.com yang merupakan blogger penganut css3 silahkan dicek saja. Oke langsung pada kodingnya saja ya. ul.starbursts { list-style:none; margin:20px 0; padding:0; overflow:hidden; } ul.starbursts li { float:left; width:10em; height:10em; position:relative; } ul.starbursts * { margin:0; padding:0; line-height:1.2em; } .starburst { display:block; width:6em; height:6em; background:#fe0; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); rotation:-45deg; posit

Membuat slide image biasanya memerlukan script yang banyak dan rumit, kita juga tidak bisa menaruhnya langsung di blog kita karena akan menghambat akses blog yang lambat, jadi biasanya harus menggunakan pihak kedua untuk menyimpan file JS tersebut. Untuk kali ini saya coba membuat sebuah slide image dengan CSS3 tanpa java script dan JQuery . Slide image CSS3 ini sangat simple dan mudah di gunakan, saya menambahkan sedikit shadow pada bagian background utamanya dan link slide mode page number untuk melihat gambar selanjutnya. sebenarnya slide image ini cara kerjanya hampir sama dengan pagination atau page number yang mengalihkan link ke page berikutnya. untuk lebih jelas silahkan lihat demo di link bawah ini. Lihat DEMO Untuk membuat slide image dengan css3 caranya cukup simple. Lihat caranya di bawah ini. Pertama tambah Widget > Pilih HTML/JavaScript di blog anda dan Copy kode di bawah ini. <style> #images { -webkit-box-shadow: #131313 0px 2px 10px; -moz-box-shadow: #

Membuat background dengan kombinasi warna atau gradient untuk menu navigasi , background dasar dan lainnya memang mudah jika menggunakan program grafis seperti adobe photoshop dan kawan kawan, tapi tentunya tidak semua orang menguasai program grafis tersebut dan juga ukuran image yang dihasilkan relative besar. Di postingan sebelumnya pernah saya bahas warna warni gradient dengan css3 namun hanya beberapa saja , Banyak website di internet yang menyediakan pasilitas untuk membuat kombinasi warna atau gradient generator yang bisa kita manfaatkan. Dengan css gradient generator yang ada di internet anda bisa memilih banyak warna gradasi yang inginkan. Untuk kali ini saya akan memberikan situs yang menyediakan fasilitas untuk membuat background gradasi atau gradient yang sangat keren dan mudah digunakan dibandingkan dengan gradient generator yang pernah saya kunjungi, nama situsnya adalah www.colorzilla.com/gradient-editor. CSS Gradient Generator dari www.colorzilla.com/gradient-ed

postingan kali ini saya akan memberikan tutorial pembuatan menu navigasi dengan model circle atau lingkaran menggunakan css3. Menu navigasi ini full menggunakan css3 tanpa image, Circle Horizontal navigasi menu css3 ini cukup lumayan walaupun hasil dari iseng-iseng membuat lingkaran dengan css3 sehingga terpikir untuk di implementasikan kepada menu navigasi horizontal , ternyata cukup memuaskan hasilnya. Untuk contohnya lihat gambar dibawah ini. Untuk kode css3 lingkaran atau circle sebenarnya menggunakan border radius contoh kodenya seperti dibawah ini: -moz-border-radius:100px; -webkit-border-radius:100px; Langsung pada pembuatan circle menu navigasi dengan css3 : Untuk lebih mudah tanpa obrak abrik kode template, jadi saya memasang navigasi ini langsung di widget. Masuk pada Rancangan >> Tambah Gadget >> HTML/JavaScript Masukan kode di bawah ini : <style type="text/css"> ul#circle { display: inline;list-style: none; } ul#circle li { margin-right:6px;

Menambahkan postingan yang kemarin mengenai Membuat tombol Dengan CSS3 yang kebetulan ada rekan blogger BelajarCORELDRAW yang meminta beberapa source kode untuk button CSS3 yang lebih berpariasi dengan penggunaan warna yang berbeda, Karena memang kemarin saya hanya membuat satu sample button CSS3 dengan warna gradasi putih. Untuk sekarang saya mencoba memberikan source kode button Gradient CSS3 yang sedikit warna warni , Untuk contoh bisa lihat screen shoot gambar dibawah ini. Untuk source kodenya bisa diambil dibawah ini sesuai dengan warna button CSS3 yang diinginkan. Source kode Black Button : .black { color: #d7d7d7; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');} .black:hover { background: #000; background: -webkit-gradient(linear,

Penggunaan share button (Social booksmark) di blog sangat berguna sekali untuk meningkatkan popularitas blog, tentunya blogger semua sudah tahu salah satu cara untuk meningkatkan popularitas blog yaitu dengan memasang tombol share (Social booksmark). Sekarang saya coba membuat share button dengan CSS3 , share button ini menggunakan ikon dan teks secara horizontal dan juga teks shadow, background gradient dengan CSS3. Contoh Tombol Share dengan CSS3 seperti dibawah ini. Tombol share ini saya coba pasang dibawah postingan, tapi anda bisa saja memasang di bagian yang anda inginkan. Untuk cara pembuatan tombol share dibawah posting seperti berikut : Masuk pada Edit HTML > Expand Template Widget Masukan kode dibawah ini sebelum kode ]]></b:skin> #bookmarks { padding:6px 0px;text-align:left; overflow: hidden;} #bookmarks a { padding:4px; -moz-border-radius:4px; -webkit-border-radius:4px; color: #9999; text-shadow:1px 1px 0px rgba(255,255,255,0.8); border: solid 1px #c0c0c0;

Postingan ini saya coba menjawab pertanyaan [Rizky2009] yang menanyakan cara membuat navigasi Next Page - Home - Back Page dengan menggunakan Button CSS3 , untuk contohnya bisa lihat ilustrasi gambar dibawah, atau link next page di bagian bawah. Langsung pada cara membuat Button Next Page - Home - Back Page Dengan CSS3 . Pertama pastikan anda sudah memasang Button CSS3 pada template anda agar button bisa diterapkan, Untuk lebih jelasnya baca postingan sebelumnya yaitu : " Membuat Tombol Dengan CSS3 - Buttom CSS3 Style " Sekarang masuk pada Edit HTML > Expand Template Widget Cari kode seperti dibawah ini <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> <b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPage

Kali ini saya mencoba membuat tombol atau buttom dengan CSS3 dengan menggabungkan ronded corner, Gradient linear CSS3 dan Box shadow CSS3 agar lebih menarik tampilan dari button ini. Button ini bisa di aplikasikan pada link di postingan maupun pada bagian template yang anda inginkan. Contoh Button menggunakan CSS3 Untuk membuatnya silahkan ikuti langkahnya dibawah ini. Masuk pada Edit HTML masukan kode dibawah ini, diatas kode ]]></b:skin> .buttom { padding: 8px;padding-top:6px; padding-bottom:6px; margin-right:3px; -moz-border-radius:4px; -webkit-border-radius:4px; -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4); -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4); color:rgba(0,0,0,0.9); text-shadow:1px 1px 0px rgba(255,255,255,0.8); border:1px solid rgba(0,0,0,0.5); background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#cccccc)); background: -moz-linear-gradient(top, #f3f3f3, #cccccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#

Postingan kali ini saya coba menulis seputar CSS3 lagi, sebagai pelengkap dari CSS3 yang lalu yaitu Hover background transitions , Hover Tab menu dan juga Postingan yang lalu saya pernah membahas membuat menu navigasi CSS3 dengan menggunakan Free CSS3 Menu Maker . dan kali ini saya coba membuat menu navigasi horizontal dengan menggunakan background gradient linear full CSS3 tanpa image dengan warna Black Dop. Seperti apa bentuknya menu navigasi dengan CSS3 ini lihat screen shoot di bawah ini. Menu Navigasi diatas menggunakan background Gradient linear CSS3 dengan kode warna #444444 pada bagian atas dan #666666 untuk bagian bawah. dan juga ronded corner pada bagian ujung kiri dan kanan, semuanya menggunakan CSS3. Untuk contoh kode Gradient linear seperti ini : background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666)); background: -moz-linear-gradient(top, #444444, #666666); Model navigasi seperti ini kalau dalam bahasa sundanya sih Slick navigasi

Transitions dalam CSS3 bisa diartikan sebagai perubahan warna yang bisa kita gunakan untuk merubah warna background pada bagian element halaman tertentu. Transition ini mungkin hampir sama dengan hover pada tautan link yaitu ketika mouse menyentuh link maka link tersebut bisa berubah warna, teks, ataupun backgroundnya sesuai dengan pengaturan tautan link anda. Saya coba membuat Transitions CSS3 ini pada bagian Body komentar, untuk contoh silahkan arahkan kursor mouse anda pada bagian body komentar di blog ini. Pada saat kursor menyentuh bagian body comentar, background body comentar akan berubah warna. Untuk cara pembuatan Transitions CSS3 ini bisa langsung ikuti caranya di bawah ini. Pertama masuk pada Edit HTML Cari kode seperti dibawah ini #comments-block .comment-body { background-color: #DEB887; margin:.25em 0 0; } Tambahkan kode Transitions CSS3 seperti ini. background-color: #DEB887; -o-transition-property: background-color; -o-transition-duration: 1s; } Lanjutkan dengan men

Akhirnya bisa beres juga mengganti tampilan template blog ini, walaupun cukup lama dalam pengeditan dan koneksi inet yang lagi ngadat tapi alhamdullilah akhirnya beres juga dan bisa kembali menulis postingan lagi, sebelumnya saya meminta maaf kalau pengunjung blog ini dibuat tidak nyaman dengan tampilan blog ini. Masih seputar CSS3 , Untuk sekarang saya akan membahas cara membuat Hover Tab Menu CSS3 tanpa Javasript. Tab menu mungkin sudah tidak asing lagi untuk blogger karena dari sekian blog yang pernah saya singgahi hampir 50% memasang tab menu. Lihat demo Hover Tab Menu CSS3 tanpa Javascript Tab menu ini cukup simple dan menarik dan saya rasa belum banyak yang memansang tab menu seperti ini. Tab Menu CSS3 ini di buat oleh www.kamikazemusic.com jadi silahkan blogger langsung ke situsnya untuk melihat atau mencoba membuat hover tab menu CSS3 tanpa Javascript. Langsung pada Tutorial pembuatan Hover Tab Menu CSS3

Kayanya masih seputar CSS3 yang akan di bahas untuk postingan sekarang, mudah mudahan tidak bosan ya. Untuk kali ini saya akan memberikan info cara membuat Menu CSS3 Style simple nan cantik dengan bantuan program dari CSS Menu yaitu Free CSS3 Menu Maker. Postingan sebelumnya seputar CSS3 bisa lihat di bawah ini. (+) Buat Box Shadow dengan CSS3 (+) Menambahkan Stroke Pada Teks "Judul Blog Dengan Stroke" Program Free CSS3 Menu Maker ini bisa di download secara gratis, Free CSS3 Menu Maker akan memudahkan anda untuk membuat menu navigasi dengan gaya CSS3. Lihat Demo → Link Download →

Melanjutkan postingan seputar CSS3 yang di aplikasikan pada Teks Stroke , walaupun hanya sekelumit membahasnya karena memang saya juga masih belum begitu mendalami tentang CSS3. Dan kebetulan kemaren Bang Hendro komentat tentang Teks stroke ini yang bisa dimplementasikan dengan box Shadow. Thanks buat bang Hendro yang sudah memberikan tambahan untuk pengaplikasian CSS3 ini. dan sekarang saya coba mengaplikasikan CSS3 ini dengan membuat BOX SHADOW atau Kotak dengan tambahan bayangan menggunakan CSS3. Beberapa sample Box Shadow bisa dilihat di bawah ini: -moz-box-shadow: 1px 1px 10px #888; -webkit-box-shadow:1px 1px 10px #888; -moz-box-shadow: 0px 20px 10px -10px #888; -webkit-box-shadow:1px 1px 10px #888; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow:1px 1px 10px #888; -moz-box-shadow: inset 1px 1px 10px #888; -webkit-box-shadow:1px 1px 10px #888; Box Shadow di atas hanya beberapa saja mungkin untuk lebih berfariasi model,warna,tebal tipis bayangan-nya "Shadow" b

Stroke merupakan outline (garis luar) pada teks, Stroke ini biasanya digunakan untuk memperjelas dan mempertegas dari teks, penggunaan stroke ini ternyata bisa di aplikasikan pada kode css dan bisa di pasang pada teks di blog. Untuk contoh lihat saya memasang Teks Stroke ini pada Judul Blog " H1 " bisa dilihat contohnya disni atau gambar dibawah ini :: Untuk membuat teks Stroke caranya cukup mudah, Teks Stroke ini mungkin hampir sama dengan Teks sahadow karena memang disini menggunakan Teks sahadow untuk membentuk sebuah Teks Stroke. Untuk memasang teks stroke caranya cukup mudah. Masuk pada Edit HTML cari kode h1.title { Masukan code css di bawah ini di bawah kode h1.title { color:#000000; text-shadow: -1px -1px 0 #f3f3f3, 1px -1px 0 #f3f3f3, -1px 1px 0 #f3f3f3, 1px 1px 0 #f3f3f3; Silahkan di Preview terlebih dahulu, kalau cocok silahkan di save. Silahkan di ganti warna teks dan warna stroke serta ketebalan dari stroke diatas, dengan merubah angka angka angka tersebut.

Postingan ini sebagai tambahan untuk Navigasi Page Number 123 yang sebelumnya telah saya bahas silahkan dilihat kembali pembuatan Page Number 123 untuk blogger . Sekarang saya coba Memodifikasi page number 123 ini dengan menggunakan CSS3, yang pasti akan lebih menarik dibandingkan dengan navigasi page number sebelumnya. Contohnya seperti gambar di bawah ini :: Dengan Memasangkan CSS3 pada page number , page number terlihat seperti menggunakan background image (Gradasi dua warna) seperti yang anda lihat pada gambar di atas. padahal itu hanya permainan dari CSS3 mungkin itu yang menjadi unggulan untuk CSS3. Betul tidak bang [Hendro]. Langsung saja pada cara pemasangan page number dengan CSS3 :: Pertama masuk pada Dashboard > Rancangan > Element Halaman > Tambah Gadget > Pilih HTML/JavaScript . Masukan Script di bawah ini :: <style> .showpageArea { padding:2px;margin-top:8px;margin-bottom:8px; } .showpageArea ul{ margin: 0 2px; padding: 8px;padding-top:6px; padding-