Slider effect in CSS

<marquee behavior="slide" direction="left">This is an example of slider</marquee>

<p style="font-size:12px; font-family:arial;"><a href="#">HTML code</a></p>

Example




This is an example of slider

Free SEO Services

free seo software

Relative Positioning

The content of a relatively positioned can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Read More>>

Absolute Positioning

Absolute position element is positioned relative to the first  element which has a position other than static.

Ex:-

.position
{
position:absolute;
right:150px;
top:50px;
}
Read More>>

CSS Positioning

1)Absolute Positioning
2)Relative Positioning
3)Fixed Positioning
4)Static Positioning

Background shadow by CSS3

Background Shadow

Rainbow Effect

<div class="rainbow">Hii</div>


.rainbow  {
 /* fallback */
 background-color:#063053;
 /* chrome 2+, safari 4+; multiple color stops */
 background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange));
 /* chrome 10+, safari 5.1+ */
 background-image:-webkit-linear-gradient(,green,blue,purple,orange);
 /* firefox; multiple color stops */
 background-image:-moz-linear-gradient(top,red,green,blue,purple,orange);
 /* ie10 */
 background-image: -ms-linear-gradient(red,green,blue,purple,orange);
 /* opera 11.1 */
 background-image: -o-linear-gradient(red,green,blue,purple,orange);
 /* The "standard" */
 background-image: linear-gradient(red,green,blue,purple,orange);
}

Rounded corners for IE

 <div class="rounded-corners"> This rounded corner will

also work in IE </div>


.rounded-corners{border: 1px solid #fff;
padding: 60px 0; margin:20px;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 0px 0px;
-moz-box-shadow: #666 0px 0px 0px;
box-shadow: #666 0px 0px 0px;
background: #333333;
background: -webkit-gradient(linear, 0 0, 0 bottom,

from(#333333), to(#cccccc));
background: -webkit-linear-gradient(#333333, #cccccc);
background: -moz-linear-gradient(#333333, #cccccc);
background: -ms-linear-gradient(#333333, #cccccc);
background: -o-linear-gradient(#333333, #cccccc);
background: linear-gradient(#333333, #cccccc);
-pie-background: linear-gradient(#333333, #cccccc);
behavior: url(PIE.htc);}


Rounded-corner-generator

CSS Hack

Read More>>

Hacking for Chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass { background-color: #FF0000; }

Hacking for Safari only

@media all and (-webkit-min-device-pixel-ratio: 0) { selector { property: value; } }

Hacking for Safari 3 only

selector:not(:root:root) { property: value; }

Hacking for IE6- only

/*\*/ * .class { margin:20px 0; } /**/  }

Hacking for IE5/Mac only

/*\*//*/ .class { height:320px; } /**/

CSS hack for Safari

@media screen and (-webkit-min-device-pixel-ratio:0){
#div {margin-right: 10px;}
}

CSS hacking for Chrome

@media screen and (-webkit-min-device-pixel-ratio:0) { .ClassExp {color: #000; } #myId {color: #000;} p, a, li {text-shadow: 3px 3px 3px #fff; }

CSS hack for IE8

@media \0screen {
  .width{width: 340px;}
}

CSS hack for IE8

.example
{
 color /*\**/: blue\9
}

CSS hacks for IE7

Below is the another hack for IE7 you can try with the 1st code or the 2nd


1)*:first-child+html {} * html {}

2)*:first-child+html {}

CSS IE7 Hacking

<!--[if IE 7]>
<div class="exp">test</div>
<![endif]-->