Posts

Showing posts from August, 2011

HTML5 Game Magician - Fairy Rescue

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

Opacity image in CSS3

Image
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=

Scale image in CSS3

Image
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" s

Rotate image in CSS3

Image
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=&q

Google Plus Photo Album

Image
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 { backgrou

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; }

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>