jquery-jcarousel-lite-and-jquery-captify.zip
1
Dynamic Sizing:
.button-small { font-size: 10px; padding: 5px 10px !important;}.button-medium { font-size: 12px; padding: 8px 12px !important;}.button-large { font-size: 16px;}.button-xlarge { font-size: 24px;}<a href="#" class="button-small">This is a small button</a><a href="#" class="button-medium">This is a medium button</a><a href="#" class="button-large">This is a large button</a><a href="#" class="button-xlarge">This is a XL button</a>Drop that Shadow
shadow { box-shadow: 0px 0px 4px 2px #aaa; -webkit-box-shadow: 0px 0px 4px 2px #aaa; -moz-box-shadow: 0px 0px 4px 2px #aaa;}<a href=”#” class=”shadow”>shadow</a>
A Gradient Twist
.alt-gradient { background-color: #ee432e; background-image: -webkit-gradient(linear, left top, left bottom, from(#ee432e 0%), to(#c63929 50%)); background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%); border: 1px solid #951100;}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
css3 color gradient . New experience of css3 . just copy this code and paste it into your head section .
.css-grd {
background: #2a6da9;
background: -moz-linear-gradient(top, #55aaee, #003366);
background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));
color: #000000;
height: 35px;
padding: 5px;
}
<div class=”css-grd”> </div>
Enjoy …
