Friday, August 12, 2011

HTML5 Game Magician - Fairy Rescue




Happy to announce that we are amongst the finalists.
http://www.relfind.com/game/magician.html

Opacity image in CSS3



1. HTML Code

<section class="social">
<a href="#"><img alt="Share to Facebook" src="images/social-facebook.png"></a>
<a href="#"><img alt="Share to Twitter" src="images/social-twitter.png"></a>
<a href="#"><img alt="Digg This" src="images/social-digg.png"></a>
<a href="#"><img alt="Stumble It" src="images/social-stumble-upon.png"></a>
<a href="#"><img alt="Share to Reddit" src="images/social-reddit.png"></a>
<a href="#"><img alt="Share to Delicious" src="images/social-delicious.png"></a>
<a href="#"><img alt="Technorati" src="images/social-technorati.png"></a>
<a href="#"><img alt="LinkedIn" src="images/social-linkedin.png"></a>
<a href="#"><img alt="Google Buzz" src="images/social-buzz.png"></a>
<a href="#"><img alt="Blogger" src="images/social-blogger.png"></a>
<a href="#"><img alt="More..." src="images/more.png"></a>
</section>

2. Style Sheet

<style type="text/css">
section.social-opacity
{
	clear: both;
	display: block;
	margin-top: 20px;
	text-align: center;
}
section.social-opacity a
{
	margin: 0;
	outline: medium none;
	padding: 0 2px;
	cursor: pointer;
}
section.social-opacity:hover a
{
	opacity: 0.2;
}
section.social-opacity a:hover
{
	opacity: 1;
}
</style>

Scale image in CSS3



1. HTML Code

<section class="social-zoom">
<a href="#"><img alt="Share to Facebook" src="images/social-facebook.png"></a>
<a href="#"><img alt="Share to Twitter" src="images/social-twitter.png"></a>
<a href="#"><img alt="Digg This" src="images/social-digg.png"></a>
<a href="#"><img alt="Stumble It" src="images/social-stumble-upon.png"></a>
<a href="#"><img alt="Share to Reddit" src="images/social-reddit.png"></a>
<a href="#"><img alt="Share to Delicious" src="images/social-delicious.png"></a>
<a href="#"><img alt="Technorati" src="images/social-technorati.png"></a>
<a href="#"><img alt="LinkedIn" src="images/social-linkedin.png"></a>
<a href="#"><img alt="Google Buzz" src="images/social-buzz.png"></a>
<a href="#"><img alt="Blogger" src="images/social-blogger.png"></a>
<a href="#"><img alt="More..." src="images/more.png"></a>
</section>
2. Style Sheet

<style type="text/css">
section.social-zoom
{
	clear: both;
	display: block;
	margin-top: 20px;
	text-align: center;
}
section.social-zoom a
{
	margin: 0;
	outline: medium none;
	padding: 0 2px;
	cursor: pointer;
}
section.social-zoom a img
{
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
}
section.social-zoom a img:hover
{
	-webkit-transform: scale(1.5,1.5);
	-moz-transform: scale(1.5,1.5);
}
</style>

Rotate image in CSS3



1. HTML Code

<section class="social">
<a href="#"><img alt="Share to Facebook" src="images/social-facebook.png"></a>
<a href="#"><img alt="Share to Twitter" src="images/social-twitter.png"></a>
<a href="#"><img alt="Digg This" src="images/social-digg.png"></a>
<a href="#"><img alt="Stumble It" src="images/social-stumble-upon.png"></a>
<a href="#"><img alt="Share to Reddit" src="images/social-reddit.png"></a>
<a href="#"><img alt="Share to Delicious" src="images/social-delicious.png"></a>
<a href="#"><img alt="Technorati" src="images/social-technorati.png"></a>
<a href="#"><img alt="LinkedIn" src="images/social-linkedin.png"></a>
<a href="#"><img alt="Google Buzz" src="images/social-buzz.png"></a>
<a href="#"><img alt="Blogger" src="images/social-blogger.png"></a>
<a href="#"><img alt="More..." src="images/more.png"></a>
</section>
2. CSS3
<style type="text/css">
section.social
{
	clear: both;
	display: block;
	margin-top: 20px;
	text-align: center;
}
section.social a
{
	margin: 0;
	outline: medium none;
	padding: 0 2px;
	cursor: pointer;
}
section.social a img {
	-moz-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	border: medium none;
}
section.social a:hover img {
	-moz-transform: rotate(360deg) scale(1.2, 1.2);
	-webkit-transform: rotate(360deg) scale(1.2, 1.2);
}
</style>