Css3-xhtml

Properties :

1) A. border-radius-  like rounded corners.

Syntax:

• -webkit-border-radius: 10px;  
• -moz-border-radius: 10px;  
• border-radius: 10px;  

 
 Example:

 

B. Circle: we can also create circles with this property.

Syntax:
·  -moz-border-radius: 50px;
·  -webkit-border-radius: 50px;
·   border-radius: 50px;

Example:

 

 

2) A. box-shadow:  which allows to apply depth of the elements.

Syntax:
·  -webkit-box-shadow: 1px 1px 3px #292929;
·  -moz-box-shadow: 1px 1px 3px #292929;
·  box-shadow: 1px 1px 3px #292929;
box-shadow accepts four parameters:

• x-offset -1px
• y-offset - 1px
• blur - 3px 
• color of shadow - #292929

Example: 

B. box-shadow in color :  use  blue and green color to magnify each shadow.

Syntax:
·  -webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
·  -moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
·  box-shadow: 1px 1px 3px green, -1px -1px blue;
Example:

C. Clever Shadows: By using shadows to the(:before )and (:after) in pseudo-classes, we can create shadow.

HTML:
<div class="box">
<img src="box.jpg" alt="clever" />
</div>
Syntax: css
.box:after { content: ‘ ‘;  position: absolute;
z-index: -1; /* hide shadow behind image */
 /* The Shadow */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);               
width: 70%;
 left: 15%; /* one half of the remaining 30% (see width above) */
height: 100px;
}
Example:

                

D. Flexible Box Model:

The flexible model allows us to get away from the floats. It will wrap according to the properties.
Let’s create a simple two-column layout.
HTML:
<div id="container"> 
<div id="column1"> Column1content here </div> 
<div id="column2"> Column2 content here </div>
</div>
Syntax: css
#container {
background: none repeat scroll 0 0 #EEEEEE;
display: -moz-box;
height: 350px;
margin: auto;
width: 870px;
}
#column1 {background: #33FFFF ;}
#column2 {background: #9900CC ;}
Example:

When we fix width of the content area #column1, let see what will happen.
Syntax: css
#column1 {background: #33FFFF; width: 700px ;}
Example:

Note:
 Still the second column hasn’t taken all of the remaining space. By using the new box-flex property, the instruct element will take up all available space.
Syntax:
#column2{background:#9900CC;display: block; /* cause is HTML5 element */ 
/* take up all available space */ 
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
Example:

 

3) A. text-shadow:

Text-shadow is quite similar to box-shadow. it must be applied to text by using same four parameters:

• x-offset
• y-offset
• blur
• color of shadow

Syntax:
·  h1 {  text-shadow: 0 1px 0 #fff;  color: #292929; }
 Example:
               

 

 

B. Text-Outline:

By using a comma as the separator, we can apply multiple shadows,
webkit offers a stroke effect for creating the outline for the text.
Syntax:
body { background: #ffffff; }
  h1 {text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
color: #ffffff;
  }
 Example:

C. Text-Stroke:

Webkit supports it (Safari, Chrome, iPhone). In this case, with white text, Firefox will display a seemingly blank page. You can either use JavaScript feature detection to get around this, or make sure that your base text color is not the same as the body’s background.
Syntax:
h1 {-webkit-text-stroke: 3px black; color: white ;}
Example:

D. text-overflow:

The text-overflow properties accept two values:

• clip
• ellipsis

This property can be used to cut off text that exceeds its container.
Syntax: css
.box {
Background-color:#eee;
-o-text-overflow: ellipsis;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border: 1px solid black;
width: 350px;
padding: 20px;
cursor: pointer;
            }
    HTML:
<div class="box">
This property can be used to cut off the over-flowing text that exceeds its container….. </div>
Example:

E. Resize: textarea

CSS3 module allows to resize a textarea . The browser support as of Firefox 4 and Safari 3. By default, webkit browsers and Firefox 4 allow to resize the textarea both in vertically and horizontally.
    HTML:
<textarea name="elem" id="elem" rows="5" cols="50"></textarea>
Syntax: css
textarea {
-moz-resize: vertical;
 -webkit-resize: vertical;
 resize: vertical;
}

Possible Values

• both: Resize vertically and horizontally
• horizontal: Limit resizing to horizontally
• vertical: Limit resizing to vertically
• none: Disable resizing

Example:

5) A. Multiple Backgrounds:

Use two images as background. You might use a texture, a gradient  color, and images in the background.
By using a comma as the separator, we’re referencing two separate background images. Notice how, in the first case, it’s placed in the top left position (0 0), and, in the second, the top right position (100% 0).
Syntax:
.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
Example:
                    

B. background-size:

Use for resizable background images, the property will accept two parameters: the x and y widths, respectively.
If we wanted a particular image to take up the entire background of the body element, then the code below will take up all available space direct the background image.
Syntax:

1. background: url(path/to/image.jpg) no-repeat;  
2. background-size: 100% 100%;  

6. Transition:

Without using JavaScript, CSS3 is the ability to apply animations to the instruct elements. IE9 still won’t support CSS transitions.
Let’s try for the simple effect. When you hover a link in a sidebar, the text will slide to the right ever slightly.
HTML:
<ul>
<li> <a href="#"> One Over Me </a></li>
<li> <a href="#"> Two Over Me </a> </li>
<li> <a href="#"> Three Over Me </a> </li>
<li> <a href="#"> Four Over Me </a> </li>
<li> <a href="#"> Five Over Me </a> </li>
</ul>
Syntax: css
ul a { 
-webkit-transition: padding .5s; 
-moz-transition: padding .5s; 
-o-transition: padding .5s; 
transition: padding .5s; 
}
a: hover { padding-left: 6px; }
Note: We don’t directly apply the transition to the hover state of the anchor tag, because, if we did, the animation would only take effect during mouse over. On mouse out, the element would immediately return to its initial state.
Transition will accept three parameters:

• The property to transition. (Set this value to all if needed)
• The duration
• The easing type

jQueryexample