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]-->

CSS hack for IE6

* html .width {width: 276px;}

OR

* html {}

Firefox3

html>/**/body .selector, x:-moz-any-link, x:default {
  color:lime;
}

CSS Hacks for Firefox

Firefox2

html>/**/body .selector, x:-moz-any-link {
  color:lime;
}

Example of Ordering in the CSS3 Properties

Styles For The Button using CSS3

To create buttons you can use some simple codes for that using CSS3. Any type of image is not required if you create simple buttons or gradient buttons using CSS3.

Exp:

<div class="button">Hello!</div>

.button {
    display: inline-block; margin:20px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px #960;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow:0 1px 2px #960;
    -moz-box-shadow: 0 1px 2px #960;
    box-shadow: 0 1px 2px #960;
    /*    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);*/

}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

Blurred Edges in CSS3

Using multiple shadowsin CSS3 slightly transparent text can be blurs the edges of text without the any images. A transition can fade the text out and can track out the letters, and change the font size.

Multiple Backgrounds

In the past, having layered backgrounds required you to create more than one element. But now, with CSS3 you can have multiple backgrounds on a single element. This will eliminate a huge annoyance that we have had to deal with in the past. Here’s how it works:
view source

    #exp {
    background:
    url(topbg.jpg) top left no-repeat,
    url(middlebg.jpg)center left no-repeat,
    url(bottombg.jpg) bottom left no-repeat;
    }

Multi-Column Layout

Another CSS3 feature that developers and designers, can  start using is the Multi-Column Layout. It offers a new way to arrange text in more of a “news paper” way. You have the choice to select the number of columns, the column width, gap between two columns, and column separator. A feature like this was not possible before CSS3. Here is how you do it:
   #exp4{
   text-size: 12px;
  -moz-column-gap: 1em; /* For Mozilla: */
  -moz-column-rule: 1px solid #000;
  -moz-column-count: 3;
    -webkit-column-gap: 1em;  /* For WebKit: */
  -webkitcolumn-rule: 1px solid #000;
  -webkit-column-count: 3;
  }

*Note:The column-space-distribution is not yet  implemented, this feature is to describe how to distribute leftover space.IE browsers like IE6,IE7,IE8 are not supporting.

Box Shadow

Before CSS3, we had to either use a shadow image or JavaScript to apply a shadow or we used to create the shadow directly in the image. With CSS3 Box Shadow we can apply shadows to almost every element of our website. Here is the example:
    #exp3 {
    background: #FFF;
    border: 1px solid #000;

    -moz-box-shadow: 5px #999; /* For Mozilla: */
      -webkit-box-shadow: 5px #999;  /* For WebKit: */
   }

Border Images

This is some upcoming features, having border images will allow developers and designers to take there website to the next level. You can be as creative as you want and can apply it as a border without extra elements.
   #exp2
  {
   border-image: url(border.png) 30 30 30 30 round round;
   }

CSS3 is introducing Background-size

There is one new property introduced by the CSS3 Background-size. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or bycover.Most of the popular browsers are now supporting background-size, including Firefox, Safari, Chrome, Internet Explorer and Opera, without the need for vendor prefixes. of code:

Example:
       #exp1 {
        height: 150px;
        width: 150px;
        border:  1px solid #cccccc;
        /* For Mozilla: */
        -moz-border-radius: 10px;
        /* For WebKit: */
        -webkit-border-radius: 10px;
    }

Multi-column in CSS3

There is lots of further improvements in CSS3. Now the CSS3 is supporting multi-column layout.

Multiple Columns using CSS3

CSS3 Create Multiple Columns supports only Mozilla,Chrome,Safari.The column-gap

property specifies the gap between the columns:
Specify the required pixels to get the exact gap.
IE doesnt support the multiple columns property.
There are few properties to be used in multiple columns like
column-count
column gap
column-rule

Mozilla supports Web Open Font Format(WOFF) by menas of font-face

Mozilla has joined a growing list of organizations to throw their support behind the Web Open Font Format (WOFF) and will support the embedding of WOFF fonts via @font-face from Firefox 3.6 onwards, or if you’re a developer and want to play around with this now, just download a recent nightly build or beta.

CSS3 Transitions

CSS3 transitions effects that allows an element change gradually from one style to another.It requires simple properties like width,height and time(duration).


How does Css3 Transitions work?


Specify the required Css property add according the effect you want.Mention the duration of the effect you want.Properties of the Transition are like transition-duration, transition-timimg-function,transition-delay.


eg. of Transitions
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

IE9 supports for Css3 2D Transforms

The Css3 2D Transforms in supported by browsers Firefox,Chrome,Safari,Opera,IE9.
The latest Internet Explorer 9 Platform Preview adds further support for CSS3 like 2D Transforms.

Opera adds support to Css3 and HTML5

Opera has today issued a pre-alpha release of Opera 10.5 offering increased support for CSS3 and HTML5 as well as vastly increased JavaScript performance and improvements to the browser’s user interface.

How the rounded corners works without using images

Rounder corners can be created independently using the four individual border-*-radius properties (border-bottom-left-radius, border-top-left-radius, etc.) or for all four corners simultaneously using the border-radius shorthand property.

How to put Multiple Background

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.
Browser supports are  Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Rounded curves using css3 code

Css3 is introducing new property background-size.This property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover.This property allows you to change the size of the background image to better fit your page. It is often be  as the background stretch property.