Prodigy of Head | Tutorial Simple But Menggereget

Link to Tutorial Blog for Stylish Blogger

Posted: 27 Dec 2013 12:18 AM PST

Menuju penghabisan tahun 2013 menyambut pengawalan tahun 2014 mari kita cooling down sejenak. Berjibaku dengan coding ruwet kadang membuat sumpek bin demet! Yuk kita flash back dengan koding yg simple and sederhana! Dalam berkreatifitas kadang dengan kode secuil pun bisa menjadi full stylish :D Semua tergantung kebutuhan dan selera masing² tentunya. AA Koben mau sharing & caring beberapa tut's lawas. Siapa tauk sobat teringat akan indahnya kesederhanaan itu :"> Klik link berikut, press Ctrl + U untuk mendapatkan code ;)Info Bar StatikDari halaman github milik Hasin Hayder github.com/hasinhayder, 2 artikel simple terpilih yaitu image caption hover animation github.com/hasinhayder/ImageCaptionHoverAnimation & sticky social bar github.com/hasinhayder/StickySocialBar
Untuk hover image gue sudah buat sendiri, silahkan sikat jika memang berguna. Begini...

Dilihat, diterawang apakah memang terpakai atau tidak! Itu trik menyembunyikan image dengan menempatkan 1 image pokok di depan yg menjadi penutup image dibelakangnya! Ganti gbr pokok (lambang blogspot) dgn gambar kalian.

.bingkai {
  position: relative; 
  width: 500px;
  height: 300px;
  margin: 5px auto; 
  border-radius: 10px;
  border: 10px groove #000;
}
.bekbel, .bekbel {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 500px;
  height: 300px;
  position: absolute;
  background-size: cover;
  background: transparent none no-repeat 50% 50%;
}
/*
.bekbel {
  background: #222;
}
*/
.bekbel {
  opacity: 1;
  transition: all .5s ease;
  background-image: url(URL-IMAGE-POKOK-HERE);
}
.bekbel:hover {
  opacity: 0;
}

Planing syntax

<div class="bingkai">
<img src="URL-IMAGE-HERE" class="bekbel"/>
<div class="bekbel"></div>
</div>

Sticky social bar alias membuat links berbagi ke web jejaring dengan gaya setiki (diam menjedog) Sudah tidak asing lagi memang trik ini, banyak sekali bahkan www.addthis.com sudah membuatkan untuk para pemakai dengan bermacam-macam gaya b-) Gue akan kupas yg dari master Hasin Hayder. Why!!! Because di sana ada snippet inline CSS filter tepatnya di make image to grayscale use SVG.

.sticky-container {
 top: 100px;
 width: 200px;
 right: -119px;
 position: fixed;
}
.sticky li {
 height: 43px;
 color: #efefef;
 cursor: pointer;
 list-style-type: none;
 background-color: #333;
 margin: 0px 0px 1px 0px;
 -webkit-transition:all 0.25s ease-in-out;
 transition:all 0.25s ease-in-out;
        filter: gray; 
        -webkit-filter: grayscale(100%); 
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
}
.sticky li:hover {
 margin-left: -101px;
 filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.sticky li img {
 float: left;
 width: 32px;
 height: 32px;
 margin: 5px 5px;
 margin-right: 7px;
}
.sticky li p {
 padding: 0px;
 margin: 0px;
 line-height: 43px;
}

Markup HTML

<div class="sticky-container">
<ul class="sticky">
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 1</p></a>
</li>
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 2</p></a>
</li>
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 3</p></a>
</li>
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 4</p></a>
</li>
</ul>
</div>

Isikan tulisan LINK-IMAGE-HERE dengan link image beresolusi 32 x 32 pixel.
Demo hasinhayder.github.io/StickySocialBar
Bonus:
blogsizzle.com/templates/free-blogger-templates - blogsizzle.com/blogging/best-minimalist-blogger-templates - designmaz.com/2013/12/responsive-blogger-templates.html - haeckdesign.com/freebies/icons/css3-button-set

Happy coding \m/

Prodigy of Head | Tutorial Simple But Menggereget

Prodigy of Head | Tutorial Simple But Menggereget

Next

Newer Post

Previous

Older Post