Two Resources, What You Get!!!

Daripada tidak ada kerjaan bin bengong suntuk, mosting lagi saja siapa tahu bermanfaat bagi para sobat setia Koben. Datang lagi seputaran trick dari CSS 3 dari beberapa web yang saya satroni. Dipilih postingannya karena memang belum pernah memostingnya di blog ini ;)) Web pertama yg Koben kunjungi ke Inspect Element. Artikel pilihan jatuh pada trik membuat DVD Animation! Gambar cover movies ketika disorot cursor akan terlihat efek DVD menongol keluar. Dari sini saya baru tahu ternyata tagging alt memiliki fungsi yg lain. Menggunakan variabel CSS Animations Module, sekarang kita dapat mewujudkan sesuatu yg dulu tidak mungkin menjadi mungkin ;)

Demo CSS3 DVD Animation

Bumbu kode CSS.dipidi[alt*="disc"] {
position: relative;
z-index: 10;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6); }
.dipidi[alt*="dvd"] {
margin-left: -100px;
margin-right: 50px;
position: relative;
top: -33px;
}
a:hover .dipidi[alt*="dvd"] {
-moz-transform: translate(50px,0) rotate(330deg);
-webkit-transform: translate(50px,0) rotate(330deg);
transform: translate(50px,0) rotate(330deg);
}
.dipidi[alt*="dvd"] {
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}Markup HTML<a href="#" title="">
<img src="http://LINK-GAMBAR-COVER-FILM.jpg" alt="disc" class="dipidi" />
<img src="http://LINK-IMAGE-DVD-NONGOL.png" alt="dvd" class="dipidi" />
</a>Syntax ALT disana mempunyai fungsi bukan untuk menampilkan title. Melainkan memang harus dipakai :P

Perjalanan berikut mendarat di web alpha vega. Membuat lambang RSS 100% memakai CSS

Demo Icon RSS with CSS 3

#rss
{
position: relative;
display: block;
width: 75px;
height: 75px;
background: rgba(244,119,54,.85);
border: 1px solid rgba(0,0,0,.5);
border-radius: 10px;
-moz-box-shadow:0 0 5px rgba(0,0,0,.5),
3px 1px 5px rgba(0,0,0,.6),
inset 10px 10px 10px rgba(255,255,255,.5),
inset 0 10px 5px -7px rgba(255,255,255,.5),
inset 0 -20px 20px rgba(0,0,0,.4),
inset -10px 0 20px 15px rgba(102,102,102,.2);
-webkit-box-shadow:0 0 5px rgba(0,0,0,.6),
3px 1px 5px rgba(0,0,0,.6),
inset 10px 10px 10px rgba(255,255,255,.5),
inset 0 10px 5px -7px rgba(255,255,255,.5),
inset 0 -20px 20px rgba(0,0,0,.4),
inset -10px 0 20px 15px rgba(102,102,102,.2);
}
.rssCircle {
position: absolute;
bottom: 7px;
left: 7px;
z-index: 100;
display: block;
width: 15px;
height: 15px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #FFF;
}
.rssRing1 {
position: absolute;
left: 7px;
bottom: 7px;
z-index: 80;
display: block;
width: 30px;
height: 30px;
background: none;
border: 10px solid #fff;
border-top-right-radius: 50px;
-moz-border-radius-topright: 50px;
-webkit-border-radius-top-right: 50px;
border-left: none;
border-bottom: none;
}
.rssRing2 {
position: absolute;
left: 7px;
bottom: 7px;
z-index: 60;
display: block;
width: 55px;
height: 55px;
background: none;
border:10px solid #fff;
border-top-right-radius: 90px;
-moz-border-radius-topright: 90px;
-webkit-border-radius-top-right: 90px;
border-left: none;
border-bottom: none;
}
#rss:hover {background: rgba(29,194,227,.5)}
.rssCircle:hover {background: #F60;}
.rssRing1:hover {border-color: #F60;}
.rssRing2:hover {border-color: #F60;}

Syntax HTML<a href="http://blah-bleh-bloh.com" title="" id="rss">
<span class="rssCircle"></span>
<span class="rssRing1"></span>
<span class="rssRing2"></span>
</a>Masih ingat dengan artikel bikin kotak/cube pakai CSS! Ternyata itu sekarang dapat dibuat berputar-putar seperti flash ;))

Demo Cube Animations

Kode CSS Cube

#gallery {
position: relative;
top: 50px;
margin: 0 auto;
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 2s;
-moz-transition: 2s;
transition: 2s;
}
#gallery a {
position: absolute;
height: 200px;
width: 200px;
display: block;
-webkit-transition: -webkit-transform 2s;
-webkit-backface-visibility: hidden;
-moz-transition: -webkit-transform 2s;
-moz-backface-visibility: hidden;
text-decoration: none;
}
#gallery.spinn {
-webkit-animation: spinn 10s infinite linear;
-moz-animation: spinn 10s infinite linear;
}
.cube .one {
-webkit-transform: rotateX (90deg) translateZ(150px) scale(0.75);
-moz-transform: rotateX (90deg) translateZ(100px);
}
.cube .two {
-webkit-transform: translateZ(150px) scale(0.75);
-moz-transform: translateZ(100px);
}
.cube .three {
-webkit-transform: rotateY(90deg) translateZ(150px) scale(0.75);
-moz-transform: rotateY(90deg) translateZ(100px);
}
.cube .four {
-webkit-transform: rotateY(180deg) translateZ(150px) scale(0.75);
-moz-transform: rotateY(180deg) translateZ(100px);
}
.cube .five {
-webkit-transform: rotateY(-90deg) translateZ(150px) scale(0.75);
-moz-transform: rotateY(-90deg) translateZ(100px);
}
.cube .six {
-webkit-transform: rotateX (-90deg) translateZ(150px) rotate(180deg) scale(0.75);
-moz-transform: rotateX (-90deg) translateZ(100px) rotate(180deg);
}
#gallery img {
width:200px;
height:200px;
}
#gallery:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
#gallery .scaleUp img {
-webkit-transform: scale(1.5);
-webkit-transition: all 2s ease;
-moz-transform: scale(1.5);
-moz-transition: all 2s ease;
transform: scale(1.5);
transition: all 2s ease;
}
@-webkit-keyframes spinn {
from {-webkit-transform: rotateY(0) rotateX (0deg);}
to {-webkit-transform: rotateY(-360deg) rotateX (360deg);}
}
@-moz-keyframes spinn {
from { -moz-transform: rotateY(0) rotateX (0deg); }
to { -moz-transform: rotateY(-360deg) rotateX (360deg); }
}
@keyframes spinn {
from { transform: rotateY(0) rotateX (0deg); }
to { transform: rotateY(-360deg) rotateX (360deg); }
}
@-webkit-keyframes moveUp {
from { -webkit-transform: translateY(0); }
to { -webkit-transform: translateY(-575px); }
}
@keyframes moveUp {
from { transform: translateY(0); }
to { transform: translateY(-575px); }
}
@-moz-keyframes moveUp {
from { -moz-transform: translateY(0); }
to { -moz-transform: translateY(-575px); }
}

Syntax HTML<div id="gallery" class="cube spinn">

<a href="http://link-gambar-resolusi-gede.jpg" class="one"><img src="link-gambar-yang-terlihat.jpg" alt="" /></a>

<a href="http://link-gambar-resolusi-gede.jpg" class="two"><img src="link-gambar-yang-terlihat.jpg" alt=""/></a>

<a href="http://link-gambar-resolusi-gede.jpg" class="three"><img src="link-gambar-yang-terlihat.jpg" alt=""/></a>

<a href="http://link-gambar-resolusi-gede.jpg" class="four"><img src="link-gambar-yang-terlihat.jpg" alt=""/></a>

<a href="http://link-gambar-resolusi-gede.jpg" class="five"><img src="link-gambar-yang-terlihat.jpg" alt=""/></a>

<a href="http://link-gambar-resolusi-gede.jpg" class="six"><img src="http://link-gambar-yang-terlihat.jpg" alt=""/></a>

</div>Dua resource web diatas saja, bila kalian memang mau mengeksplorenya akan mendapatkan postingan² setara tingkat master :))
Happy coding \m/