Yours Theme

Picture Editing By : Action Blog Setelah beberapa hari absen posting karena ngurusin design template yang tak kunjung pas dengan keinginan sampe akhirnya kefikiran untuk posting cara Membuat Menu Sidebar Accordian ya itung-itung santai sejenak sampe menemukan mood kembali . Menu Accordian kali ini sangat simple tapi cukup elegant .  SEE DEMO CSS #accordian {background:#004050; width: 250px; margin: 100px auto 0 auto; color:white; box-shadow: 0 5px 15px 1px rgba(0,0,0,.6), 0 0 200px 10px rgba(255,255,255,.5);} #accordian h3 { font-size:12px; line-height:34px; padding: 0 10px; cursor:pointer; background:linear-gradient(#003040, #002535); } #accordian li { list-style:none; } #accordian ul ul li a { color:snow; text-decoration:none; font-size:11px; line-height:27px; display:block; padding:0 15px; transition: all .15s; } #accordian ul li li a:hover { background: #003545; border-left:5px solid lightgreen; } #accordian ul ul {display:none;}

Saya tengok diluar sana bumi sedang diguyur hujan cukup lebat dan di atas meja kamarku mengepul asap dari secangkir kopi arabica dengan campuran sepotong kayu manis yang membuat suasana sore ini semakin meyakinkan lalu sesekali terdengar sabetan melodi dari tangan dingin Paul Gilbert  membuat aku semakin semangat untuk berbagi sebuah tutorial dalam membuat Menu Fixed Bar Dengan Logo Hover " wkwkwk aku tertawa sendiri dengan sambutan kata pada postingan kali ini " super lebaaaaaaayyy .. tapi gak apa-apa hanya sekedar impropisasi saja untuk memberi tahu kalian dalam membuat postingan haruslah dengan suasana yang benar-benar enak biar dapat pahalanya. walah malah ngalor ngidul nih .. mending lihat dulu demonya gih ....  SEE DEMO Komposisi  CSS header {   position: fixed;   top: 0;   right: 0;   left: 0;   border-bottom: 1px solid #e3e3e8; } #logo {   float: left;   font-size: 3em;   margin: 0;   padding: .4em;   text-decoration: none;   color:

Pada postingan kali ini kita akan sedikit memahami tentang CSS3 transform yang merupakan sebuah property yang memiliki beberapa value seperti scale, translate , rotate .  SEE DEMO Penggunaan Dasar Untuk menggunakan property ini kita harus menggunakan prefix karena pada beberapa browser property transform masih belumlah stabil. -webkit-transform : fungsiTransform(nilai); -moz-transform : fungsiTransform(nilai); -ms-transform : fungsiTransform(nilai); -o-transform : fungsiTransform(nilai); transform : fungsiTransform(nilai); Secara Default , titik tranformasi berada tepat ditengah-tengah element tapi kita bisa merubahnya dengan property webkit-transform-origin seperti pada contoh : -webkit-transform-origin : 0 0; -moz-transform-origin : 0 0; -ms-transform-origin : 0 0; -o-transform-origin : 0 0; transform-origin : 0 0; Nilai pertama adalah nilai untuk X dan kedua untuk Y . Pada contoh diatas kita menentukan titik transform pada (0,0) , bisa dilihat di ujung sebel

Kopiku kental musiku keras akan menemani tutorial kita kali ini dalam Membuat Menu Navigation Sidebar . Artinya navigasi akan diletakan di posisi sidebar untuk sebelah kiri , dengan memanfaatkan position: fixed  supaya menu nempel terus saat terjadi scroll .  SEE DEMO   Komposisi kode yang digunakan sangat sederhana  CSS #nav { width: 300px; height: 100%; position: fixed; top: 0; background-color: #34495e; transform: translate3d(0,0,0); transition: 500ms transform ease-in-out; } #nav ul{ margin: 0px; padding: 0px; list-style: none; } #nav li { color: white; line-height: 2em; position: relative; } #nav li a { color: white; display: block; position: relative; text-decoration: none; padding: 10px; font-weight: 300; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-top: 1px solid #406081; border-bottom: 1px solid #2c3e50; transition: all 0.3s ease-in-out; -webkit-transition: all 0.

Setelah pada kesempatan lain membahas tentang Membuat Menu Dengan CSS Border Animation maka pada postingan kali ini saya akan mencoba kembali berbagi sebuah tuorial sederhana. Brada pasti tahu tentang social icon ?.. yups itu hal yang lazim kita temui pada sebuah web/blog dan seperti yang kita tahu keberadaannya merupakan satu hal yang penting bagi perkembangan/popularitas web/blog . Social icon kali ini tampilannya cukup sederhana tapi tidak sesederhana itu karena efect slidingnya akan membuatnya tampil menarik. SEE DEMO Komposisi CSS .socialw { width: 235px; margin: 100px auto 0 auto; overflow: auto; height: 100%; } .social{ position:relative; border: 1px solid #292929; width: 37px; height: 62px; float: left; margin-left: 10px; overflow: hidden; } .first { margin-left: 0px; } /* ANIMATIONS */ /* Fade In Down */ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-100px); } 100%

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none

Kolom Kiri Kolom Kanan About Work Save Palestine Clients Contact