Who Want To Be a Master CSS3

Bisa mengenai suatu hal bermula dari adanya rasa senang, suka akan sesuatu hal itu sendiri. Begitu juga dengan bahasa HTML bagi kalangan webber and blogger. Kalau rasa senangnya sudah menempel didalam sanubari yang paling dalam, maka dengan ilmu sedikit dengan secuil kemauan sobat pasti bisa mendapatkan apa yang diinginkan :D Keinginan yang besar tanpa dibarengi dengan kondisi mumpuni akan berbalik menjadi bumerang. Biasanya jadi malas, menyerah, ogah-ogahan dalam memulai kembali. Ingat...ingat...kegagalan bukan akhir semuanya, tetapi keberhasilan yang tertunda agar kita menjadi seorang master :))

Seorang master yaitu @crnacura ahli jQuery script membuat sebuah tutorial CSS 3 tentang blur menu with CSS3 transitions. Mengkombinasikan effect transitions tercipta menu ajib. Lesson mudah bisa dicoba oleh kalian feature CSS3 transitions, transforms, animation ;)
Berikut menu hasil karya dari Mary Lou.

Blur Menu with CSS3 Transitions

Basic Coded

<!-- Ini diletakkan diatas tag ]]></b:skin> -->

.bmenu {
padding: 0;
position: relative;
}
.bmenu li {
font-size: 15px;
margin: 0 0 10px 0;
}
.bmenu li a {
color: transparent;
text-transform: uppercase;
text-shadow: 0px 0px 1px #000;
letter-spacing: 1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bmenu:hover li a {
text-shadow: 0px 0px 5px #555;
}
.bmenu li a:hover {
color: #06f;
font-weight: bold;
text-shadow: 0px 0px 1px #ff9;
padding-left: 10px;
}

<!-- Ini HTML -->

<ul class="bmenu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Sitemap</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">Menu Other</a></li>
 <li><a href="#">Menu Other</a></li>
</ul>

Seru kan bermain dengan CSS sob :) Yuk kita lanjutkan bermain sambil belajar, jangan kebalikannya :)) Hover this image my friend

Basic Coded

<!-- CSS CODED -->

.gambar {
background: #F4F4F4;
}
.gambar:hover {
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
}
.gambar {
cursor: pointer;
filter: alpha(opacity=10);
opacity: 0.5666;
-moz-opacity: 0.5666;
-khtml-opacity: 0.5666;
-moz-transition: all 0.56s ease-out;
-o-transition: all 0.56s ease-out;
-webkit-transition: all 0.56s ease-out;
-ms-transition: all 0.56s ease-out;
}

<!-- SYNTAX PEMAKAIAN -->

<img src="http://YOUR-IMAGE-LINK-HERE.jpg" class="gambar" />

Menyenangkan bukaaannn!!! :P
Dengan modal kemauan, referensi dimana-mana kita semua bisa membuat apa yang kita inginkan 8->> Ini Koben kasih bonus, mengambil embed flash memakai variabel iframe dirangkai, dibentuk sedemikian rupa dengan CSS agar terlihat lebih prikitiw L-)

Click to expand here for Watch MivoTV

Click to expand here for Get Coded

<center>
<div style="border: 10px solid #777;height: 530px;overflow: hidden;width: 550px;">
<div style="height: 530px;overflow: hidden;width: 550px;">
<div style="margin-left: -10px; margin-top: -227px;">
<iframe frameborder="0" height="759" scrolling="no" src="http://id.imediabiz.com/MivoTV.swf?r=' + Math.round(Math.random() * 99999) + " style="left: -30px;" width="565"><p>Your browser not support for iframe variable! Get updates right!</p>
</iframe>
</div>
</div>
</div>
</center>

Beben Koben si bloglang anu ganteng kalem tea cuma mencoba memecut :P kreatifitas, imaginasitas, dayas and upayas sobat sekalian saja kok mosting ini teh :"> Biar pada jago CSS :) Syukur² jadi master :(|) :)>-
* http://www.paulund.co.uk/how-to-create-different-shapes-in-css
Happy blogging \m/