CSS3 Desinging : Cricket Player

INDIA

The above Picture was completely developed using pure CSS3 features and much more when we can combine such designs with animations of CSS3 the scope is beyond we can imagine. The development of the image above developed is pointing to the scope of CSS in future web design trends.

---

Code of the Snippet

Paste this inside header part or your CSS style sheet

<style type="text/css">
/*******************************/
div#cap1{
position:absolute;
left:50px;
top:10px;
width:50px;
height:40px;

Flash like animation: Animated Side panel

Usually what we can find in a web page is some content and menu-bars links etc .Here i have developed a Side Panel of links with some CSS animation on it. The animation for the links is developed using pure CSS.

-No Images

-No JavaScript
-No HTML5
-No Flash
Pure CSS (CSS3)

menu_item_1

1.submenu of menuitem1
2.submenu of menuitem1

menu_item_2

1.submenu of menuitem2
2.submenu of menuitem2

menu_item_3

1.submenu of menuitem3
2.submenu of menuitem3

menu_item_4

1.submenu of menuitem4
2.submenu of menuitem4

Code of the Snippet

Paste this inside header part or your CSS style sheet

<style type="text/css">
/*****************************/
.menu{
position:relative;
left:100px;
top:10px;
margin-bottom:40px;

Flash like animation: Number Counter

We have seen several digital electronics devices , they are using 7 pieces in their device to represent every numbers,that idea is what i used behind this animation .The animation for countdown of the numbers(which is above) is developed using pure CSS. We can make digital clocks using this type of animation.

-No Images

-No JavaScript
-No HTML5
-No Flash
Pure CSS (CSS3)

Code of the Snippet

Paste this inside header part or your CSS style sheet

<style type="text/css">
/******************************/

.element_1{         /*left_top*/
background-color:#000000;
position:absolute;
width:10px;
height:100px;

Flash like animation: Butterfly

The animation is completely developed using CSS3 code and no graphical image is used in this animation.

-No JavaScript
-No HTML5
-No Flash
Pure CSS (CSS3)

=
=
=
=

=
=
=
=

---

Code of the Snippet

Paste this inside header part or your CSS style sheet

<style type="text/css">
/*****************************/
.part_one
{
text-align:center;
color:#ffffff;
background: #33FF00;
border-right:#0000CC solid;
border-bottom:#0000CC solid;