Wednesday 28 September 2011

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

Friday 23 September 2011

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

Thursday 22 September 2011

Background shadow by CSS3


Background Shadow

Wednesday 21 September 2011

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

Tuesday 20 September 2011

CSS Hack

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;}
}

Saturday 17 September 2011

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; }

Friday 16 September 2011

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

Thursday 15 September 2011

Wednesday 14 September 2011

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.

Tuesday 13 September 2011

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;
    }

Monday 12 September 2011

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.

Thursday 8 September 2011

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.

Wednesday 7 September 2011

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.