Introduction

Cascading Style Sheets, also known as CSS is a type of style sheet language that is used to create and design customized web pages with a functionality to create multiple pages using the same style. CSS is primarily created to bifurcate the document content from document presentation, including elements such as layout dimensions, look, colors and fonts. Almost every web browser available in the market knows and possesses ability to handle CSS. CSS is best Web page formatting language available till date. A very few no. of popular browsers can’t handle it as well as they should but, plenty of support is available and developers are tending to use it much more often. It provide ability to define colors, backgrounds, borders, margins, alignment, fonts, sizes and lots of other things for almost any part of web page(s).

Talking about what’s the latest in CSS, it the CSS3. CSS3 introduces bunch of new opportunities for developers to create an emphatic designs, leveraging web development and more diverse style sheets for variety of occasions and more.

Some different CSS3 techniques that work well in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera), but unluckily users of Internet Explorer are out of luck. IE will still render the backgrounds and native CSS as usual; it just won’t understand the CSS3 style properties.

Since CSS3 is not fully supported yet, developers are suggested to use browser specific extensions:

• Mozilla/Firefox/Gecko: -moz-
• Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)

Exciting new functions and features are brought up by CSS3:

• BORDERS:
  1. Border Color:

     CSS3 introduced some beautiful options for multiple border colors using CSS property : Border-color. Here’s example :

     Code:
     <div style=”width: 200px;border: 8px solid #FF0000; -moz-border-bottom-colors: #F08080 #CD5C5C #A52A2A #B22222 #800000 #FFE4E1#BBBBBB #CCCCCC #FFE4E1 #bbb #ccc; -moz-border-top-colors: #F08080 #CD5C5C #A52A2A #B22222 #800000 #FFE4E1 #BBBBBB #CCCCCC; -moz-border-left-colors: #F08080 #CD5C5C #A52A2A #B22222 #800000 #FFE4E1 #BBBBBB #CCCCCC; -moz-border-right-colors:#F08080 #CD5C5C #A52A2A #B22222 #800000 #FFE4E1 #BBBBBB #CCCCCC; padding: 5px 5px 5px 15px; background-color: #F08080; width:447px;font-size:36px;”> Sample for Border Colors……..</div>

     

  2. Rounded Borders:

     CSS3 provides variety of ways to create rounded corners on boxes. This easiest terminology is the addition of “extra mark-up” that can be applied directly on the web page(s), while the classical approach is to add the mark-up through DOM manipulation. CSS3 added another cool feature: “border-radius” which can eliminate the need (for images) to create rounded corners in most cases. This function has been implemented in Mozilla FF and Safari.

     Code:
     <div style="background-color: #F08080; width:447px;font-size:32px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border: 5px solid #999999;
     padding: 10px;"> Sample for Rounded Borders……..</div>

     

     Border Radius can also be customized as follows:

     • moz-border-radius-topleft / -webkit-border-top-left-radius
     • -moz-border-radius-topright / -webkit-border-top-right-radius
     • -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
     • -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
  3. Border Shadows: The border shadow effect accepts multiple values.
     • First ,  the color of the shadow. It will accept four length values, and the first two are the x (horizontal) offset and the y (vertical) offset.
     • The next value is the amount of blur added to the shadow.
     • The fourth and final value is the spread amount of the blur. Box shadow will also accept an inset keyword that will create an inset shadow.

     This really helps developers to use CSS for creating image like elements helping to increase performance incredibly by reducing the use of images in their web page.

     Code:
     <div style=" margin:150px; background-color: #F08080; width:447px;font-size:32px;
     box-shadow: #333 5px 5px 8px;
     -moz-box-shadow: #333  5px 5px 8px;
     -webkit-box-shadow: #333  5px 5px 8px;
     border: 5px solid #804040;
     padding: 10px;"> Sample for Border Shadows……..</div>

     

  4. Border Images:

     This is another very compelling property in CSS3. It is capable of creating really cool visual effects that makes the exact slicing of images (and their positioning around an element) quite easy. The most obvious use of them exists in constructing beautiful scalable buttons.

     Code:
     <div style="margin: 0 30px; width: 227px; padding: 14px;
     -moz-border-image: url(‘border-img.png’)32 32 32 32 round round;
     -webkit-border-image: url(‘border-img.png’)32 32 32 32 round round;
     border-image: url(‘border-img.png’)32 32 32 32 round round; border: 1em double #000; background-color: #F08080; width:447px;font-size:32px;
     padding: 10px;">Sample for Border Images……</div>

     

• TEXT EFFECTS
  1. Text Shadow:

     Shadow to text is another CSS3 feature that can be added to the webpage(s). It can eliminate some images to speed up the webpage’s loading, and at the same time, make webpage(s) more beautiful. It can be used to create a slightly blurred, slightly moved copy of text, which ends up looking somewhat like a real-world shadow. Shadow effects are applicable exactly in the same order as they’re specified. They don’t increase the size of a box, though they can extend past their boundaries, and their stack order is the same as the element itself.

     Code:
     <div style=" color: #A1A1A1; margin: 150px; background-color: #F08080; width:447px;font-size:32px; text-shadow: 5px 3px 4px #000; border: 5px solid #804040;padding: 10px;"> Sample for Text Shadows……..</div>

     

  2. Text Wrap:

     CSS3 introduced word wrap feature. So often long words break the web design. The CSS3 word-wrap property allows long words to be broken and wrapped onto the next line. It takes in two values; normal or break-word. In the first paragraph below, normal is used. This is the same as if the property wasn’t used, i.e. the long word breaks out of the box as there isn’t enough width for it to be fully contained in the box. In the second paragraph, break-word is used and the long word is broken into two pieces, so that the second part wraps onto the next line.

     Code:
     <div style="padding:5px; margin:50px; width:670px;font-stretch: extra-expanded; font-size:26px">
     <strong>Word Wrap</strong><br /><br />
     <div style="background-color: #F08080; width:447px;font-size:20px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border: 5px solid #999999;
     padding: 10px;">
     Sample for word wrap………This is veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery long word</div>
     <br />
     <div style="background-color: #F08080; width:447px; font-size:20px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border: 5px solid #999999;
     padding: 10px; word-wrap: break-word;">
     Sample for word wrap………This is veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery long word</div>
     </div>

     

  3. Text – Overflow:

     The text-overflow property allows developers to handle with clipped text: i.e, text that does not fit into its box. If text is too long for the overflow/clipping area and the content is to be visually clipped, this property allows the clipped content to be visually represented by the string “…” (called an “ellipsis”) in the non-clipped area.

     Code:
     <style type="text/css">
     div.textOverflowExample {
        white-space: nowrap;
        width: 14em;
        height: 1.6em;
        overflow: hidden;
        border: 1px solid #000;
        background-color: #fff;
        background-color: #F08080; width:447px; font-size:20px;
        border: 5px solid #999999;
     padding: 10px;
     border: 5px solid #999999;
     padding: 10px;
       
     }
     div.textOverflowExample:hover {
        -o-text-overflow: inherit;
        text-overflow: inherit;
        overflow: visible;
     }
     </style><div class="textOverflowExample">This is text overflow sample……Move your mouse cursor to see it’s effect……</div>

  
  

  To conclude even though CSS3 specifications are still on their way, some of its features have already recognized by latest web browsers. This has provided a great-great opportunity to web developers to experiment and head-up new features well in advance. Some of the features are compiled here that can speed up and bring web developers to the cutting edge of CSS3 development. Stay tuned for more…!