SIDEBAR
»
S
I
D
E
B
A
R
«
CSS3 and what it does
by sheri

CSS3 and what it does

CSS3 is known to contain the definition of advanced features of CSS. With CSS3 you can really spice up your web page. Nowadays, CSS3 and HTML5 are on boom for their well known extraordinary features that can really make your web page like never before. With the advent of CSS3 and HTML5 the developers can really perform a lot of new things that will probably attract more visitors to your web page. Well, coming back only to CSS3, it has introduced many new features that enable developers to develop such apps and the web pages with better functionality, speed, performance and enhance your experience of surfing your web page on the internet. CSS3 has been modularized to provide a better understanding and to make it easier to update the individual modules separately rather than doing it altogether.

Below, are a list of few things that you can perform using CSS3 :

  • Border Radius : Border Radius allows you to round up your border corners. By specifying its value in pixel you can make it’s border corner rounded.
    1. If you want to make them equal from all the corners then you have to specify the following code,

    -webkit-border-radius: 20px;
    border-radius: 20px;2.

If you want to make all the four corners radius unequal, then use the following attribute to specify the values,
-webkit-border-radius: 20px 30px 40px 50px;
border-radius: 20px 30px 40px 50px;

 

  • Box Shadow : Box Shadow puts a shadow behind the box on the web page. The attribute value that you have to enter is in this order – horizontal length, vertical length, blur radius, spread and color you want to specify. For example,
    -webkit-box-shadow: 10px 20px 5px 12px #444444;
    box-shadow: 10px 20px 5px 12px #444444;

 

  • Text Shadow : Text Shadow property allows you to put a shadow of the text written. You can specify its horizontal length, vertical length, blur radius and the shadow color. For example,
    text-shadow: 10px 20px 10px #e01de0;
    filter: dropshadow(color=#e01de0, offx=10, offy=10);

 

  • Multiple Columns : Multiple column is a very cool property to use in CSS3. It allows you to specify your text in a number of columns. For this you have to specify the number of columns in which your text has to be displayed and the space between the two columns. For example,
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;

 

  • CSS3 Resizing : CSS3 Resizing property help you to resize your box on the web page. The browser which supports are Firefox 4+, Chrome and Safari. The CSS code for this is as follows,
    div
    {
    resize: both;
    overflow: auto;
    }

 

  • CSS3 Multiple Background Images : CSS3 allows you to display more than one background image onto your web page at a single time. Adding more than one image to the background sometimes makes your web page looks untidy so you must take care while choosing out the images for your web page’s background. The CSS code for this is as follows,
    body
    {
    background-image: url (img1.gif), url(img2.gif);
    }

 

  • CSS3 Word Wrapping : CSS3 word wrapping allows you to wrap the word onto your text area or web page. This property is very useful so as to make the text more readable at a single attempt. CSS for this is  as follows,
    p
    {
    word-wrap: break-word;
    }

 

  • CSS Gradient : CSS3 can produce a lot of gradients. You can generate a lot of gradients from this online tool (http://www.colorzilla.com/gradient-editor/). This generator includes more than 135 gradient presets.

 

The above specified properties or functions are a few properties or modules specified under CSS3. We have mentioned a very few and basic properties that you can learn and perform on your web page.  There are a lot of more functionalities that you can perform using CSS3. You can also perform 2d transformation and 3d transformation by using CSS3.


Comments are closed

SIDEBAR
»
S
I
D
E
B
A
R
«
© Copyright cssblaze.com