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/