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>

Wednesday, August 10, 2011

Google Plus Photo Album

picture

1. HTML for Google Plus Photo Album

<div id="page_wrap">  
  
	<div class="google-plus" style="margin-left:490px">
		<img class="album" src="photos/2.jpg">
		<img class="album" src="photos/3.jpg">
		<img class="album"  src="photos/1.jpg"> 
	</div>    
	<div class="google-plus" style="margin-left:200px">
		<img class="album" src="photos/4.jpg">
		<img class="album" src="photos/5.jpg">
		<img class="album"  src="photos/6.jpg"> 
     </div>
     
  <div class="single-photo">
    <a href="#pic1" title="Photo"><img src="photos/3.jpg" alt="picture">    
  </div>

2. CSS for Google Plus Photo Album

<style type="text/css">
.single-photo
{
	background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    display: inline-block;
    height: 164px;
    margin-left: 33px;
    margin-top: 65px;
    width: 165px;
	 -webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	
}
.single-photo img
{
	display: block;
    height: 158px;
    padding-left: 3px;
    padding-top: 3px;
    width: 158px;
}
.single-photo:hover
{
	-moz-transform: scale(1.2, 1.2) rotate(0deg);
	-webkit-transform: scale(1.1) rotate(0deg);
	-o-transform: scale(1.1) rotate(0deg);
	-ms-transform: scale(1.1) rotate(0deg);
	transform: scale(1.1) rotate(0deg);
}
#page_wrap {
	border: 1px solid #DDDDDD;
	width: 800px;
	height:400px;
	margin-left: auto;
	margin-right: auto;
	margin-top:150px;
}
.google-plus img { 
	border: none;
	text-decoration: none;
	position: absolute;
	margin-left:0px;
	width: 158px;
	height: 158px;
}
.google-plus { 
	width: 400px;
	position: absolute;
	margin:60px 10px 10px;
}
.google-plus img { 
	position: absolute;
	border: 4px solid #FFF;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	z-index: 9999;	
	-moz-transition: all 0.2s ease;	
	-webkit-transition: all 0.2s ease;	
	-o-transition: all 0.2s ease;	
	transition: all 0.2s ease;
}
.google-plus img:nth-child(1)
{ 
	top: 8px;
	left: 108px;
}
.google-plus img:nth-child(2)
{
	top: 6px;
	left: 104px;
}
.google-plus img:nth-child(3)
{
	top: 4px;
	left: 100px;
	right: 100px;
}
.google-plus .rotate1 {
	-webkit-transform: rotate(15deg); 
	-moz-transform: rotate(15deg);
	transform: rotate(15deg);
	-ms-transform:rotate(15deg);
	-o-transform:rotate(15deg);
}
.google-plus .rotate2 {
	-webkit-transform: rotate(0deg); 
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-ms-transform:rotate(0deg); 
	-o-transform:rotate(0deg); 
}
.google-plus .rotate3 {
	-webkit-transform: rotate(-15deg); 
	-moz-transform: rotate(-15deg); 
	transform: rotate(-15deg);
	-ms-transform:rotate(-15deg); 
	-o-transform:rotate(-15deg);
	cursor: pointer;
}
</style>

3.Javascript Code

jQuery(document).ready(function()
{ 	
	jQuery(".google-plus img").hover(function(){
		
		if(jQuery(this).hasClass('album'))
		{
			var parent = jQuery(this).parent();
			
			parent.find("img:nth-child(1)").addClass(" rotate1");			
						
			parent.find("img:nth-child(2)").addClass(" rotate2");
			parent.find("img:nth-child(3)").addClass(" rotate3");
			
			parent.find("img:nth-child(1)").css('left', '150px');
			parent.find("img:nth-child(3)").css('left', '50px');
		}
	},
	function(){
			
			var parent = jQuery(this).parent();
			parent.find("img:nth-child(1)").removeClass("rotate1");
			parent.find("img:nth-child(2)").removeClass("rotate2");
			parent.find("img:nth-child(3)").removeClass("rotate3");
			
			parent.find("img:nth-child(1)").css('left', '');
			parent.find("img:nth-child(3)").css('left', '');
	});	

});


Monday, August 8, 2011

blockqoute with before in css3

Create a simple CSS3 folded-corner effect without images. It works well in all modern browsers and is best suited to designs with simple color backgrounds.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

<style type="text/css">
blockquote.qoute {
 font: 14px/28px arial;
 background: #97C02F;
    color: #FFFFFF;
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 
                0 20px 80px -20px rgba(0, 0, 200, 0.3) inset;

}
blockquote.qoute:before {
    content: " ";
     position:absolute;
    top:0;
    right:0;
    border-width:0 26px 26px 0;
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15; 
    background:#658E15; 
    display:block;
 width:0;    
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
</style>
<blockquote class="qoute">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet.
 Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices 
vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet.
 Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices 
vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
</blockquote>

blockqoute with first-letter in css3

This CSS3 tutorial will show you how to create Blockqoute with first-letter. First apply open quote background on Blockquote then apply close quote background to the first-letter.

Cras vestibulum ante vel tellus feugiat in convallis purus iaculis. Donec eu auctor felis. Nullam gravida libero vitae dui varius id pretium felis vulputate.

1. CSS
<style type="text/css">
blockquote.qoute {
 font: 14px/28px arial;
 width: 400px;
 background: url(close-quote.gif) no-repeat right bottom; 
 text-indent: -18px;
}
blockquote.qoute:first-letter {
 background: url(open-quote.gif) no-repeat left top;
 padding-left: 18px; 
}
</style>
2. HTML
<blockquote class="qoute">
Cras vestibulum ante vel tellus feugiat in convallis purus iaculis.
Donec eu auctor felis. Nullam gravida libero vitae dui varius id pretium
felis vulputate.</blockquote>