Tabs using JQuery
imsatasiaFor 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…
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…
Stylesheet Media types
Media types for Stylesheet: all: Used for all media type devices aural: Used for speech and sound synthesizers braille: Used for braille tactile feedback devices embossed: Used for paged braille…
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{…
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; }…
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…
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…
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…