Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   Exploring CSS3 With Examples (http://www.go4expert.com/articles/exploring-css3-examples-t30209/)

MinalS 11Aug2014 20:57

Exploring CSS3 With Examples
 
Cascading Style Sheets (CSS) are useful for designing the web pages in an application. But it does not contain the advanced design features for web application. To overcome the issues, the CSS3 was introduced in designing web pages. CSS3 has the latest standard for the CSS.

CSS3 has been split up into modules. Each module has different features and styles. Some of the new modules are explained in this article. The list of some of the modules is mentioned below:
  1. Borders
  2. background – size Property
  3. Gradients
  4. Text Effects
  5. 2D Transforms
  6. 3D Transforms
  7. Transitions

1. CSS3 Borders



In CSS3 borders can be created around the elements. User can add rounded borders, add shadows and use an image as border. There are some properties associated with the border type.

a) border – image: The property is used for setting the border image, border width, border outset and repeat.

The following code snippet demonstrates the property.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    div
    {
    border : 15px solid transparent;
    width : 200px;
    padding : 10px 20px;

    }
    # stretch
    {
    border – image : url (border.png) 30 30 round;
    }
    </style>


</head>

<body>
    <div id="”stretch”">
        Here is the stretched image
    </div>
</body>
</html>

The output for the image is as shown below:

http://imgs.g4estatic.com/css/css3/image001.png

Here is the image used:

http://imgs.g4estatic.com/css/css3/image003.png

b) border – radius: The property is used for setting the four border of the image.

The following code snippet demonstrates the property.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    div
    {
    border: 2px solid #a1a1a1;
    padding: 10px 40px;
    background: #dddddd;
    width: 300px;
    border – radius: 25px;

    }
    </style>


</head>

<body>
    <div>
        The property allows to add rounded corners to the element
    </div>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image005.png

c) box shadow: The property attaches one or more drop shadows to the box. The property is a comma separated list of shadows.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    div
    {
    width: 300px;
    height: 100px;
    background – color: yellow;
    box – shadow: 10px 10px 5px #880088
    }
    </style>


</head>

<body>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image007.png

2. background – size Property



CSS3 contains several new background properties that allow the greater flexibility over the images. Some of the properties are explained below:

a) background – size: The property is used to specify the size of the images at the background.

The following code snippet demonstrates the property in CSS3.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    body
                    {
    background: url (“ autumn Leaves.jpg”);
    background – size: 60px 8px;
    background – repeat: no repeat;
                    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <p>The demo is for the image position in CSS3.</p>

        <p>Original image is : <img alt="Flowers”" height="”150”" src="%E2%80%9Dautumn" width="”250”"></p>
    </form>
</body>
</html>

The output for the image is as shown below:

http://imgs.g4estatic.com/css/css3/image009.png

b) background – clip: The property is used to clip the image in the display. The following code snippet demonstrates the property.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    div
    {
    width:400px;
    height: 300px;
    padding: 50px;
    background – color: Aqua;
    background – clip: content – box;
    border: 2px solid #888888;
    }
    </style>


</head>

<body>
    <div>
        The image can be clipped for viewing. The new clipped image can be added to the web page
    </div>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image011.png

c) background – origin: The property defines the background position property of the image. If the property of the image is fixed, the effect will not be displayed.

The following code snippet demonstrates the property.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    div
    {
    width: 100px;
    height: 150px;
    padding: 100px;
    border: 1px solid black;
    background - position: left;
    background - image: url ( “Graden.jpg”);
    }
    #div1
    {
    background – origin: border – box;
    }
    #div2
    {
    background – origin: content – box;
    }
    </style>


</head>

<body>
    <p>background –origin: border – box</p>

    <div id="”div1”">
        The image is viewed as the border box.
    </div>

    <p>background – origin: content – box</p>

    <div id="”div2”">
        The image is displayed as content box
    </div>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image013.png

3. CSS3 Gradients



The gradient lets us to display transitions between two or more specified colors. Images were used in the earlier versions of the style sheet. With the use of CSS3, the download time and bandwidth is reduced.

CSS3 defines two types of gradients as follows:
  1. Linear gradients
  2. Radial gradients
1) Linear gradients: The property contains two color parameters that need to be defined. Color stops are the colors for rendering smooth transitions.

a) Linear gradient - top to bottom

The example of linear gradient shows the start from top to bottom. It starts from the color red and transit in color blue.

The code sample to demonstrate the effect is shown below:
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    #grad1
    {
    height: 100px;
    width: 250px;
    background: linear-gradient ( red, blue);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <h2>Linear gradient form top to bottom</h2>

        <div id="”grad1”"></div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image015.png

b) Linear gradient – left to right

The property is used to display the linear gradient starting from the left. It starts with red, and turns blue on the right.

The code snippet for the gradient is as shown below:
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    #grad1
    {
    height: 100px;
    width: 250px;
    background: linear-gradient ( to right, red, blue);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <h2>Linear gradient from left to right</h2>

        <div id="”grad1”"></div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image017.png

c) Linear gradient – diagonal

The property is used to display gradient diagonally both horizontal and vertical starting positions.

The code snippet for the property is as shown below:
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    #grad1
    {
    height: 100px;
    width: 250px;
    background: linear-gradient ( to bottom right, red, blue);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <h2>Linear gradient diagonal</h2>

        <div id="”grad1”"></div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image019.png

d) Linear gradient – using angles

The property is used to control over the direction of the gradient through angles instead of directions. The angle is specified as an angle between the gradient line and the horizontal line. The value 0 deg creates the bottom to top gradient, whereas the value 90 deg creates the left to right gradient.

The following code snippet demonstrates the property.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    #grad1
    {
    height: 100px;
    width: 250px;
    background: linear-gradient ( 0deg, red, blue);
    }
    #grad2
    {
    height: 100px;
    width: 250px;
    background: linear-gradient ( 90deg, red, blue);
    }

    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <h2>Linear gradient – using different angles</h2>

        <div id="”grad1”">
            0 deg
        </div><br>

        <div id="”grad2”">
            90 deg
        </div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image021.png

e) Linear gradient – Transparency

The property is used to provide shading effects. The rgba() function is used to define the color stops. The last parameter has the value from 0 to 1. The parameter is used to define transparency. The value 0 indicates full transparency and 1 indicates full color.

The following code snippet demonstrates the property.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    #grad1
    {
    height: 100px;
    width: 250px;
    background: linear-gradient( to right, rgba(255,0,0,0), rgba(255,0,0,1));;
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <h2>Linear gradient - Transparency</h2>

        <div id="”grad1”"></div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image023.png

2. Radial Gradient

The radial gradient is defined through the center. User needs to define two color stops to create the gradient. The center, shape and size for the image can be defined. By default, shape is ellipse, center is center, and size is the farthest corner.

a) Radial gradient – evenly spaced color stops

A radial gradient with evenly spaced color stops. It is the default value.

The following code snippet is used to demonstrate the property.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    #grad1
    {
    height: 100px;
    width: 250px;
    background: radial - gradient(red, green, blue);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <h2>Radial gradient – evenly spaced color stops</h2>

        <div id="”grad1”"></div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image025.png

b) Radial gradient – Differently spaced color stops

The property is used to place the different color at specified color percentages.

The following code snippet demonstrates the property
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    #grad1
    {
    height: 100px;
    width: 250px;
    background: radial - gradient(red 10%, green 20%, blue 50%);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <h2>Radial gradient – Differntly spaced color stops</h2>

        <div id="”grad1”"></div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image027.png

4. CSS3 Text Effects



The different features can be applied to the text in CSS3. Some of the properties like text – shadow and word wrap are explained in detail.

1) Text Shadow

The property is used to apply the shadow to the text. User can define horizontal shadow, vertical shadow, blur distance and color of the shadow in the parameter list.

The following code snippet demonstrates the shadow effect.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    h1
    {
    text – shadow: 10px 5px 5px #FF0000;
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <h1>The Shadow Effect</h1>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image029.png

2) Word – wrap

The property allows the user to force the text to add up in the specified area.

The following code snippet demonstrates the property.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    p.show
    {
    width: 12em;
    border: 1px solid #FF0000;
    word – wrap: break – word;
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <p class="”show”">The paragraph is used to add the text. This is very big data. Please make sure it is added in the specified range.</p>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image031.png

5. CSS3 2D Transforms



CSS3 allows user to move, scale, turn, spin and stretch elements. Transformation is an effect to change shape, size and position. There are some methods associated with the 2D transform. The methods are explained in detail below:

1) The translate() method

The method is used to move the element from the current position depending on the parameters. The parameters are defined for the left ( X axis ) and right ( Y axis) position.

The following code snippet demonstrates the method.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    div
    {
    width: 100px;
    height: 100px;
    background-color: Aqua;
    border: 1px solid black;
    }
    div#div1
    {
    transform: translate ( 50px 100px);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <div id="”div1”">
            Hello. The div element is shown
        </div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image033.png

2) the rotate() method

The method is used to rotate the element clockwise at a given degree. If the negative value is used, the element rotates in counter clockwise direction.

The following code snippet demonstrates the method.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    div
    {
    width: 100px;
    height: 100px;
    background-color: Aqua;
    border: 1px solid black;
    }
    div#div1
    {
    transform: rotate (50deg);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <div id="”div1”">
            Hello. The div element is shown
        </div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image035.png

3) the scale() method

The method is used to increase or decrease the size depending on the parameters for the X axis and Y axis.

The following code snippet demonstrates the property.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    div
    {
    width: 100px;
    height: 100px;
    background-color: Lime;
    border: 1px solid black;
    }
    div#div1
    {
            margin: 100px;
    transform: scale (2,4);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <div id="”div1”">
            Hello. The div element is shown
        </div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image037.png

4) the skew() method

The method is used turn in a given angle depending on the parameters for the X axis and Y axis.

The following code snippet demonstrates the method.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    div
    {
    width: 100px;
    height: 100px;
    background-color: Aqua;
    border: 1px solid black;
    }
    div#div1
    {
            margin: 100px;
    transform: skew(30deg, 20deg);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <div id="”div1”">
            Hello. The div element is shown
        </div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image039.png

6. CSS3 3D Transforms



CSS3 allows user to format the elements using different 3D transforms. Some of the methods of 3D transform are mentioned below:

1) rotateX ()

The method is used to rotate the element around the X –axis at a given degree.

The following code to demonstrate the method is as shown below:
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    div
    {
    width: 100px;
    height: 100px;
    background-color: Red;
    border: 1px solid black;
    }
    div#div1
    {
    margin: 100px;
    transform: rotateX (120 deg);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <div id="”div1”">
            Hello. The div element is shown
        </div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image041.png

2) rotateY ()

The method is used to rotate the element around the Y – axis at a given degree.

The following code is used to demonstrate the method.
HTML Code:

<!DOCTYPE html>
<html>
<head>

    <style>
    div
    {
    width: 100px;
    height: 100px;
    background-color: Red;
    border: 1px solid black;
    }
    div#div1
    {
    margin: 100px;
    transform: rotateY (120 deg);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <div id="”div1”">
            Hello. The div element is shown
        </div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image043.png

7. CSS3 Transitions



The CSS3 transitions are used to add effect for changing the style without the use of any animation tool or scripts. They add the style that can be gradually changed. The two points that needs to be considered are as mentioned below:
  • The property that user wants to add an effect on
  • The duration of the effect is mentioned

User can add multiple changes to the property. Each value is separated by comma. The following code snippet demonstrates the various effects on width, height and transformation.
HTML Code:

<!DOCTYPE html>
<html>
<head>
    <style>
    div
    {
    width:100px;
    height:100px;
    background – color: Red;
    border: 1px solid black;
    transition: width 2s, height 2s, transform 2s;
    }
    div.hover
    {
    width:200px;
    height: 200px;
    background – color: Red;
    transform: rotate (180deg);
    }
    </style>


</head>

<body>
    <form id="”form1”" name="”form1”">
        <div>
            Hover to see the effect
        </div>
    </form>
</body>
</html>

The output for the code is as shown below:

http://imgs.g4estatic.com/css/css3/image045.png


All times are GMT +5.5. The time now is 20:08.