DOWNLOAD CODE PACK

Posted: March 6, 2012 in Uncategorized

horizontal-drop-down-menu.zip

dl-tags-vs-table.zip

jquery-jcarousel-lite-and-jquery-captify.zip

design-to-web-page.zip

jquery-page-transitions.zip

PHP rss-feed-parser.zip

cool-menu.zip

Css3-animations.zip


Free Page Rank Tool

CSS+BUTTON

Posted: March 6, 2012 in Uncategorized

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

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

CSS3

Posted: March 6, 2012 in Uncategorized

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 …

Welcom to Gooles…….

Posted: March 1, 2012 in Uncategorized

click here and be surprise