Jalan-jalan yuk! Ajib - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Jalan-jalan yuk! Ajib, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article Informasi, Article Trik dan Tips, Article Web, we write this you can understand. Well, happy reading.

Title : Jalan-jalan yuk! Ajib
link : Jalan-jalan yuk! Ajib

Jalan-jalan yuk! Ajib

Kalau dilihat-lihat resource yang ada diluaran sana ternyata kebanyakan larinya yaaa kesitu-situ juga. Masing-masing mengecap ini loh yang terbaik :p Semakin banyak pilihan memang enak, tapi kalau kebanyakan malah bikin pusing juga mana yg harus dibaca terlebih dahulu #-o Dimulai dari http://www.andysowards.com/blog/2012/best-so-far-css3-tutorials-inspirations-resources-of-2012/ kurang lebih ada 14 link tujuan untuk dilihat.
Lebih edan bikin mengantuk jikalau dibabad semua link yg ada tawaran dari web speckyboy mengenai aneka menu and navigation tutorial http://speckyboy.com/2012/04/18/css3-menu-and-navigation-tutorials/ Malah mencengang dibuatnya ;))

Dua artikel teranyar seputaran trik CSS3 from master @hdytsgt, lumayan fresh http://www.webstuffshare.com/2012/04/showing-product-information-with-css3-3d-transform/ & http://www.webstuffshare.com/2012/04/how-to-create-animated-list-view-using-css3-only/
Untuk tutorial Animated List View Using CSS3, Koben sudah bikin minimalis kodenya :D

input[type=radio] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 20px;
width: 23px;
}
.control {
display: inline-block;
margin: 0;
width: 23px;
background: #eddfc7;
padding: 3px;
cursor: pointer;
}
.first {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.last {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#item-list {
padding: 0;
list-style-type: none;
text-align: left;
}
#item-list li {
display: inline-block;
width: 300px;
vertical-align: top;
margin: 0 0 .3em 0;
padding: 10px;
background: #f3eada;
border-radius: 5px;
box-shadow: inset 0px 0px 20px #e0cba0;
overflow: hidden;
}
#item-list li img {
display: inline-block;
vertical-align: top;
width: 100px;
margin-right: .3em;
}
#item-list li p {
display: inline-block;
width: 180px;
margin: 0;
padding: 0;
}
#item-list .title, #item-list .developer {
display: block;
margin-bottom: .3em;
}
#item-list .title {
font-size: 20px;
}
#item-list .developer {
font-size: 12px;
}

/* Animation start here */

.view-control-1:checked ~ #item-list li img {
opacity: 1;
width: 100px;
visibility: visible;
}
.view-control-1:checked ~ #item-list li p {
opacity: 1;
visibility: visible;
}
.view-control-1:checked ~ #item-list li {
width: 300px;
}
.view-control-2:checked ~ #item-list li img {
opacity: 0;
width: 0;
visibility: hidden;
}
.view-control-2:checked ~ #item-list li p {
opacity: 1;
visibility: visible;
}
.view-control-2:checked ~ #item-list li {
width: 900px;
}
.view-control-3:checked ~ #item-list li img {
opacity: 1;
width: 100;
visibility: visible;
}
.view-control-3:checked ~ #item-list li p {
opacity: 1;
visibility: visible;
}
.view-control-3:checked ~ #item-list li {
width: 900px;
}
.view-control-4:checked ~ #item-list li img {
opacity: 1;
width: 100px;
visibility: visible;
}
.view-control-4:checked ~ #item-list li p {
opacity: 0;
position: absolute;
visibility: hidden;
}
.view-control-4:checked ~ #item-list li {
width: 100px;
}
.view-control-1:checked ~ #item-list li img, .view-control-1:checked ~ #item-list li p, .view-control-1:checked ~ #item-list li,
.view-control-2:checked ~ #item-list li img, .view-control-2:checked ~ #item-list li p, .view-control-2:checked ~ #item-list li,
.view-control-3:checked ~ #item-list li img, .view-control-3:checked ~ #item-list li p, .view-control-3:checked ~ #item-list li,
.view-control-4:checked ~ #item-list li img, .view-control-4:checked ~ #item-list li p, .view-control-4:checked ~ #item-list li
{
-webkit-transition: .4s ease-out;
-moz-transition: .4s ease-out;
-ms-transition: .4s ease-out;
-o-transition: .4s ease-out;
transition: .4s ease-out;
}

Lumayan dapat ilmu dari meminimalis juga :d

Trik ringan seputaran trick hover come from http://www.impressivewebs.com/mimic-onmouseout-css3-transitions/ Biasanya ketika disorot cursor terlihat efek, eh ini mah malah ketika ditinggalkan cursor baru deh terlihat efeknya ;))

Sama namun berbeda, dulu Koben berbagi simple content slider pure CSS3 look is this http://thecodeplayer.com/walkthrough/make-an-accordian-style-slider-in-css3
Perjalanan terakhir menclok ke satu web CSS, konten berisi kode-kode yang sering kita jumpai namun sulit untuk membuatnya http://css3shapes.com/. Disanalah tempatnya ;) Ex:

Biar lamaan dikit jalan-jalannya ;)) http://www.webhostingsecretrevealed.com/web-design/30-latest-css3-tutorials-you-probably-have-not-read-before/
Met jalan-jalan :-h
Happy coding \m/

Thus articles Jalan-jalan yuk! Ajib

that is all articles Jalan-jalan yuk! Ajib This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Jalan-jalan yuk! Ajib with the link address https://autopostingblogspot.blogspot.com/2012/04/jalan-jalan-yuk-ajib.html