CSS

Posted: March 6, 2012 in Uncategorized

Just copy and paste below code into your site.

<style type=”text/css”>

body {background:url(bg.gif) repeat}
#main { width:500px; height:500px;  margin:160px auto 0; text-align:center}

a.test {
font:bold 30px Tahoma, Geneva, sans-serif; margin-bottom:20px; display:block;
color:#AAA;
-moz-transition-property: color;  /* FF4+ */
-moz-transition-duration: 1s;
-webkit-transition-property: color;  /* Saf3.2+, Chrome */
-webkit-transition-duration: 1s;
-o-transition-property: color;  /* Opera 10.5+ */
-o-transition-duration: 1s;
-ms-transition-property: color;  /* IE10? */
-ms-transition-duration: 1s;
transition-property: color;  /* Standard */
transition-duration: 1s;
}
a.test:hover {
color:#F00;
}

.box {
height:100px; width:200px; background:#ed1b24; text-align:center; color:#fff; padding:8px; margin:0 auto;
-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
-moz-transition: background  1s, width 1s;
-webkit-transition: background 1s, width 1s;
-o-transition: background  1s, width 1s;
-ms-transition: background 1s, width 1s;
transition: background 1s, width 1s;
}
.box:hover {
background:#3853a4; width:270px
}

a.more {
padding:10px 20px; color:#ABABAB; font:bold 30px Tahoma, Geneva, sans-serif; text-decoration:none; border:2px dotted #ABABAB; margin-bottom:20px;
-moz-transition: all 1s ease;  /* FF4+ */
-o-transition: all 1s ease;  /* Opera 10.5+ */
-webkit-transition: all 1s ease;/* Saf3.2+, Chrome */
-ms-transition: all 1s ease;  /* IE10? */
transition: all 1s ease;
}

a.more:hover {border:2px dotted #000; color:#3853a4}

</style>

<script type=”text/javascript” src=”jquery.js” ></script>
<script type=”text/javascript” src=”jquery-ui.js” ></script>
<script type=”text/javascript” src=”modernizr.js” ></script>

<script type=”text/javascript”>

if (!Modernizr.csstransitions) {
$(document).ready(function(){
$(“.test”).hover(function () {
$(this).stop().animate({ color: “#F00” },700)
}, function() {
$(this).stop().animate({ color: “#AAA” },700)}
);
$(“.more”).hover(function () {
$(this).stop().animate({ borderColor: “#000”, color: “#3853a4”  },700)
}, function() {
$(this).stop().animate({ borderColor: “#ABABAB”, color: “#ABABAB”  },700)}
);
$(“.box”).hover(function () {
$(this).stop().animate({ backgroundColor: “#3853a4”, width: “270px” },700)
}, function() {
$(this).stop().animate({ backgroundColor: “#ed1b24”, width: “200px” },700)}
);

});
}

</script>

</head>
<body>

<div id=”main”>

<a href=”http://dev.w3.org/csswg/css3-transitions/”>Transition me!</a>

<br>

<a href=”http://dev.w3.org/csswg/css3-transitions/”>Transition me!</a>

<br><br><br>

<div>
Hover me!<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
</div>

</div>
And download the jquery file from below link  . Enjoy.
Download

Advertisements
Comments
  1. You are my aspiration, I have few web logs and infrequently run out from post :). “To die for a religion is easier than to live it absolutely.” by Jorge Luis Borges.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s