Categories
CSS HTML jQuery Tutorials

Cross Fading images using CSS3 Transition

For Live Demo: Click here

HTML Code:

Cross Fading images using CSS3 Transition

Click me to toggle

Categories
CSS HTML jQuery Tutorials

Tabs using JQuery

For Live Demo: Click here

CSS Code:

*{margin:0; padding: 0;}

body{
	margin: 0px;
	font-family: verdana;
	font-size: 12px;
	color: #ddd;
	line-height: 20px;
}

h2{
	font-size: 18px;
	font-weight: normal;
	color:#333;
	padding: 0 0 5px 0;
}

h3{
	font-size: 16px;
	font-weight: normal;
	color:#aaa;
	padding: 0 0 5px 0;
}

#wrapper{
	width: 600px;
	margin: 0px auto;
	padding: 15px;
}

ul{
	list-style: none;
}

li{
	display:inline;
	font-size: 14px;
	background-color: #ccc;
}
/*
li:first-child
{
	padding-left: 0px !important;
}
*/

li a{
	text-decoration: none;
	color: #333;
	padding: 5px 10px;
	background-color: #ccc;
	
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

li a:hover{
	color:#ccc;
	background-color: #666;
}

.selected{
	color:#ddd;
	background-color: #333;
	font-weight: bold;
	
	padding:8px 15px 5px 15px;
}

#content div,
#content2 div{
	margin-top: 2px;
	padding: 15px;
	background-color: #333;
	
	border-top: 4px solid #666;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
Categories
CSS HTML Tutorials

Border-Radius, Text Shadow, Box Shadow, RGBA using CSS3

For Live Demo: Click here

Border Radius

  • “border-radius: 15px;”
  • For Mozilla Browser: “-moz-border-radius: 15px;”
  • For Webkit Browser: “-webkit-border-radius: 15px;”

CSS Code:

.borderRadius
{
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}
Categories
CSS HTML JavaScript Tutorials

Search Form using CSS3 and JavaScript

For Live Demo: Click here

HTML Code:

  • On the page load input box will show text “Search….”
  • Clicking on input box will call javascript event “onfocus” and it will clear text “Search….”
  • Leaving input box will call javascript event “onblure” and it will add text “Search…” if the value for input box is “NULL”