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

Arrow using CSS

For Live Demo: Click here

CSS Code:

body { margin:0px auto;}

#content{margin:0px auto; width:200px;}

#arrow-top
{
	width:0px;
	height: 0px;
	
	border-bottom: 30px solid #999;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
}

#arrow-right
{
	width:0px;
	height: 0px;
	
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 30px solid #777;	
}

#arrow-bottom
{
	width:0px;
	height: 0px;
	
	border-top: 30px solid #444;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
}

#arrow-left
{
	width:0px;
	height: 0px;
	
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-right: 30px solid #000;	
}

Categories
CSS

Stylesheet Media types

Media types for Stylesheet:


Categories
CSS HTML Tutorials

PopOut Details on Hover using CSS

For Live Demo: Click here

CSS Code:

body
{
	margin: 0;	padding: 0;
	background: #1d1d1d;
	font-size: 10px;
	font-family: verdana;
}

h1{ 
	font-weight: normal; 
	font-size:3em; 
	font-family: serif, verdana;
	color:#fff;
}

h3{ font-weight: normal; font-size:1.4em;}

img {border: 1px solid #666;}

.info p{ font-weight: normal; font-size:1.0em;}

ul.popout
{
	width: 700px;
	list-style: none;
	margin: 0 auto; padding: 0;
}

ul.popout li
{
	display:inline;
	width: 100px;
	float: left;
	margin: 20px; padding: 0;
	position: relative;
}

ul.popout li:hover {z-index: 99;}
 
ul.popout li img{
	position: relative;
	filter: alpha(opacity=40);
	opacity: 0.4;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

ul.popout li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
 

ul.popout li .info {
	position: absolute;
	left: -20px; top: -20px;
	padding: 80px 10px 10px;
	width: 120px;
	display: none;
	background: #fff;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

ul.popout li:hover .info {display: block;}

HTML Code:

  • popout details using css

    Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • popout details using css

    Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • popout details using css

    Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • popout details using css

    Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • popout details using css

    Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • popout details using css

    Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • popout details using css

    Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • popout details using css

    Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

  • popout details using css

    Heading

    Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.

For Live Demo: Click here

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”
Categories
CSS HTML jQuery Tutorials

Image Gallery Using JQuery

For Live Demo: Click here

HTML Code:

Notes:

  • em tag will be added by JQuery inside H2 tag.
  • If you are changing class name or id name, change it in both CSS and HTML code.
Categories
CSS HTML jQuery Tutorials

Simple Expand Collapse using JQuery

For Live Demo: Click here

HTML code snippet for content you want to hide or show:

Important Notes:

  • Use class=”expand” for heading
  • Use class=”collapse” for content you want to expand or collapse