Creating differenet shapes in CSS 3

Square :

#square {
    width: 100px;
    height: 100px;
    background: orange;
}

Rectangle :

#rectangle { 
    width: 200px; 
    height: 100px; 
    background: orange; 
}

Circle :

#circle { 
    width: 100px; 
    height: 100px; 
    background: orange; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
}

Oval :

#oval { 
    width: 200px;
    height: 100px;
    background: orange;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px; 
}

Read more →

CSS3 : Box Shadow

CSS3 now provides us with the box-shadow property, which can be used to create multiple shadows on any block level element programmatically. This saves a lot of time spent in image editing software and removes those nasty nested divs, but it isn't supported by Internet Explorer, so what is best for us to do?

Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix).

Used in casting shadows off block-level elements

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

Syntax :

box-shadow: h-shadow v-shadow blur spread color inset;

1. h-shadow : The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
2. v-shadow :The vertical offset of the shadow, For above the box use  negative and for below use positive.
3. blur :The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
4. spread :The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
5. color :  (optional) The color of the shadow.
6. inset : (optional) Changes the shadow from an outer shadow (outset) to an inner shadow

Example :1

div#myDIV
{
background-color:orange;
width:200px;
height:100px;
box-shadow:10px 10px black;
}

Example :2

div#myDIV
{
background-color:orange;
width:200px;
height:100px;
box-shadow:20px 20px 10px black;
}

---

This all the CSS for various web browser collected in one rule:

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Read more →

Javascript slideshows, carousels and sliders

Javascript slideshows, carousels and sliders

1. SpaceGallery
2. Noobslide (Based on Mootools )
3. SmoothGallery 
4. jQuery Multimedia Portfolio
5. jCarousel 
6. Glider 
7. Carousel Slideshow
8. Multidirections Image Scroller
9. Pikachoose
10. SlinkySlider
11. Easy Slider
12. CrossSlide (Based on jQuery)
13. Ultimate JavaScript Slider and Scroller
14. SlidesJS (Based on jQuery)

Read more →

Javascript tab plugin list

Javascript tab plugin list

1. SimpleTabs - Unobtrusive Tabs + Ajax (v1.0)
2. Perspective Tabs (Mootools)
3. MooTabs (MooTools)
4. idTabs (jQuery)
5. DOMTab – Navigation tabs with CSS and DOMscripting
6. jQuery UI Tabs
7. jQuery Accessible Tabs Plugin
8. Tabify (jQuery)
9. Nanotabs
10. jQuery Pager 
11. jQueryGlobe
12.  mb.tabset (jQuery)

     

     

     

     

     

     

     

     

     

     

Read more →

Sliding div left side

Sliding div left side with jquery animate method.Following are the step to do that

JAVASCRIPT CODE

$(document).ready(function() {
     $('button').click(function() {
       $("#slidingDiv").animate({width: 'toggle'});
     });
});

CSS CODE 

#slidingDiv{
     width: 200px;
     height: 50px;
     background-color: red;
} 

HTML CODE

<body>
   <button>CLICK ME</button>
   <br />
   <div id="slidingDiv"></div>
</body>

Read more →