Isenk Bikin Kartu Pake CSS3, Tanpa Image Apapun!

Berawal dari Mumet, Stress, Pengen Muntah, Pengen loncat dari gedung 100 lantai tapi gak jadi karena ketinggian, pengen minum baygon tapi gak jadi karena rasanya masih tetep gak enak dan perasaan-perasaan Arrrgggghhh!!! lainnya yang serasa bikin diri ini pengen teriak sekenceng-kencengnya ngalahin suara Tarzan di Hutan Belantara sana, akhirnya barusan saya tinggalin dulu semua Deadline kerjaan saya, dan mutusin untuk Meng-close Illustrator, Close Corel, dan program-program gak penting lainnya yang serasa pengen saya UnInstall dari si Mac milik Kantor, cuma sayang semua itu gak jadi saya lakukan karena emank software-software itulah yang selama ini membiayai kehidupan saya *LOL

Dan seperti biasa, klo udah mumet kaya gini, hal yang pertama kali akan saya lakukan adalah nyari permen karet atau cokelat dan duduk anteng sambil nungguin si Rubah Orange ngebuka Dashboard akun Blog saya dengan sempurna :) bukan untuk mosting, tapi cuma sekedar untuk ngeliat komentar-komentar yang masuk dan nyari hal Isenk yang bisa saya lakukan dalam beberapa menit :)

Dan taaaa... raaa.... akhirnya saya kepikiran untuk bikin kartu pake salah satu Url Blog yang belum sempet saya apa-apain :)

Tadinya sih saya mau bikin "Full Card Game" yang bisa sekalian dimainin, cuma karena untuk bikin "Full Card Game" saya butuh banyak jquery yang bisa-bisa malah nambah stress saya karena harus nyari algoritmanya dulu, akhirnya saya putusin untuk bikin yang enteng-enteng aja pake CSS3. Dan hasil akhirnya bisa anda lihat pada gambar diatas. atau klo anda mau liat Demonya, silahkan klik link demo dibawah ini:

DEMO Model Kartu CSS3

Ada yang mau ikutan bikin atau bahkan mau memodifikasi apa yang saya bikin itu biar lebih bagus lagi? klo ada, karena saya baik hati dan tidak sombong biarpun gak rajin menabung, nih saya kasih Sourcenya:

Ini Untuk CSS-nya:

body { background: #DDDDDD; overflow: hidden; }
body .fire { color: #FF0000; }
p {
background: #FFFFFF; border: 1px solid #CCCCCC;
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5);
font-size: 25px; text-align: center;
height: 30px; width: 600px; margin: -35px -300px; padding: 10px 15px; position: absolute; bottom: 50px; left: 50%; z-index: 99;
}
ul {
background: #FFFFFF; border: 1px solid #CCCCCC;
background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD));
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5);
font-size: 50px;
margin: 0; padding: 0 15px; position: absolute; right: 20px; top: 15px; z-index: 99;
}
ul li {
display: inline;
list-style-type: none;
}
ul li a {
color: #000000;
display: block; float: left; padding: 0 10px;
text-decoration: none;
}
.base {
background: #FFFFFF; border: 1px solid #CCCCCC; color: #000000;
background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD));
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5);
height: 360px; top: 50%; margin-top: -180px; width: 260px; left: 50%; margin-left: -130px; z-index: 9;
cursor: pointer; font-size: 50px; text-decoration: none;
padding: 15px 0 0 25px; position: absolute;
}
strong {
font-size: 250px;
position: absolute; left: 50%; top: 50%; margin-top: -160px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,1)));
}
em {
font-size: 40px; font-style: normal;
display: block; margin-bottom: -15px;
}
label span {
-webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
position: absolute; bottom: 15px; right: 25px;
}
#spades strong { margin-left: -68px; } #spades em { margin-left: 0; }
#hearts strong { margin-left: -70px; } #hearts em { margin-left: 1px; }
#clubs strong { margin-left: -80px; } #clubs em { margin-left: 3px; }
#diamonds strong { margin-left: -60px; } #diamonds em { margin-left: -2px; }
fieldset { display: none; }
fieldset:target { display: block; }
fieldset:target .card+label { -webkit-animation-name: scaler; -webkit-animation-duration: 1.75s; -webkit-animation-iteration-count: 1; }
fieldset:target .card:checked+label { -webkit-animation-name: effectx; -webkit-animation-duration: 3s; -webkit-transform: scale(0); }
.close {
background: #DDDDDD; cursor: default;
left: 0; top: 0; position: absolute; height: 100%; width: 100%; z-index: 1;
text-indent: -999em;
}
@-webkit-keyframes scaler { from { -webkit-transform: scale(0); } to { -webkit-transform: scale(1); } }
@-webkit-keyframes effectx {
from { -webkit-transform: rotateX(0deg); }
to { -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(500px) rotate(180deg); -webkit-animation-duration: 30s; }
}

Klo di Blogspot biasanya CSS tuh ditaro sebelum kode ]]></b:skin>

Ini HTML-nya:

<ul><li><a title="Select Spades" href="#spades">♠</a></li><li><a class="fire" title="Select Hearts" href="#hearts">♥</a></li><li><a title="Select Clubs" href="#clubs">♣</a></li><li><a class="fire" title="Select Diamonds" href="#diamonds">♦</a></li></ul>
<form action="">
<fieldset id="spades"><input class="card" id="spade" type="radio" name="spade" value="spade" /><label class="base" for="spade" title="This is the Ace of Spades!"><span><em>A</em>♠</span><strong>♠</strong><em>A</em>♠</label><input id="cancel1" type="reset" name="spade" value="cancel" checked="checked" /><label class="close" for="cancel1">Spades</label></fieldset>
<fieldset id="hearts"><input class="card" id="heart" type="radio" name="heart" value="heart" /><label class="base fire" for="heart" title="This is the Ace of Hearts!"><span><em>A</em>♥</span><strong>♥</strong><em>A</em>♥</label><input id="cancel2" type="reset" name="heart" value="cancel" checked="checked" /><label class="close" for="cancel2">Hearts</label></fieldset>
<fieldset id="clubs"><input class="card" id="club" type="radio" name="club" value="club" /><label class="base" for="club" title="This is the Ace of Clubs!"><span><em>A</em>♣</span><strong>♣</strong><em>A</em>♣</label><input id="cancel3" type="reset" name="club" value="cancel" checked="checked" /><label class="close" for="cancel3">Clubs</label></fieldset>
<fieldset id="diamonds"><input class="card" id="diamond" type="radio" name="diamond" value="diamond" /><label class="base fire" for="diamond" title="This is the Ace of Diamonds!"><span><em>A</em>♦</span><strong>♦</strong><em>A</em>♦</label><input id="cancel4" type="reset" name="diamond" value="cancel" checked="checked" /><label class="close" for="cancel4">Diamonds</label></fieldset>
</form>

Klo di Blogspot HTML biasanya ditaro setelah kode <body>, Contohnya gini: <body> HTML disini </body>

Dan terakhir sedikit Javascript yang saya pake:

<script type="text/javascript">
function bootup(){
if (location.hash == "") { location.hash="#spades"; } var tds = document.getElementsByTagName("a"); direct();
for( var x=0; x < tds.length; x++ ){tds[x].onclick = function(){setTimeout(direct, 1);};}
}
function direct(){
/*@cc_on @if (@_jscript_version > 5.6)
var counted = document.getElementsByTagName("fieldset");
for( var x=0; x < counted.length; x++ ){ counted[x].style.display = "none" }
document.getElementById(location.hash.substr(1)).style.display = "block";
@end @*/
}
window.onload=bootup;
</script>

Klo di Blogspot Javascript biasanya ditaro sebelum kode </head>

Nah, cuma itu script yang saya pake, dan klo kebetulan anda lagi ada waktu, mungkin script diatas bisa anda modifikasi atau perbaiki sendiri :) atau klo ada yang jago Algoritma mungkin bisa sekalian anda jadiin Full Game Card hahaha.... Yo wes, saya mau balik kerja dulu...

Good Luck All... :)