Applying styles to alter graphic effects

Applying transparency, opacity

The opacity (also known as transparency) of an element in CSS provides the ability to make the element effectively see through.

The value used in setting the opacity is a ratio from 0 to 1.0. A setting of 0 indicates that the element is fully transparent, essentially invisible.

A value of 1.0 indicates that the element is fully opaque, the default when no opacity value is specified

The following code demonstrates the use of the opacity:

<head>
<style type="text/css">
    /*Applying transparency-opacity  */
    #transOpacity {
        border:1px solid green;
        opacity:0.5;
    }
</style>
</head>
<body>
    <h3>Applying transparency/opacity </h3>
    <p id="transOpacity"> SOME TEXT WITH OPACITY (opacity:0.5;)</p>
</body>

Applying a background image

An HTML element can contain a background image by specifying the background-image property. The background property itself has many other options to control its size and repeating pattern.

The following Table shows the configuration options for the background image:

Property Description
size Changes the dimensions of the image
repeat Specifies whether the image should be repeated/tiled through the available space of the box
clip Specifies whether the image should be clipped at a border
position-x/position-y Specifies the origin position of the image within the box

The following code demonstrates the use of the background-image properties:

<head>
<style type="text/css">
    /* Applying a background image */
    #bgImage {
        width:250px;
        height:150px;
    
        background-image: url(image.jpg);
        color:white;
    }
    #bgImage2 {
        background-image: url('image.jpg');
        background-size: 20px;
        /*Apply the background-repeat*/
        /*repeat-y - vertically, repeat-x - horizontally*/
        background-repeat: repeat; 
        width: 200px;
        height: 200px;
        text-align: center;
        color: white;
        }
</style>
</head>
<body>
    <h3>Applying a background image</h3>
    <div id="bgImage">
        <p>  SOME WHITE TEXT </p> 
    </div>
    <div id="bgImage2">
        <p>  SOME WHITE TEXT <br /> background-repeat: repeat;</p>
    </div>
</body>

Applying gradients

A gradient effect changes the color of an object gradually from one spectrum to another.

There are two types of gradient effects supported:

  • the linear gradient where the color changes in a line across the object in any direction.
  • the radial gradient where the color starts in the center and changes toward the outer edges.

The following Table outlines the linear-gradient parameters:

Parameter Description
h-shadow Specifies the position of the horizontal shadow. The value can also be a negative number.
v-shadow Specifies the position of the vertical shadow. The value can also be a negative number.
blur Specifies the distance of the blur effect. This parameter is optional and defaults to 0.
spread Specifies the size of the shadow.
color Specifies the color of the shadow.
inset Specifies that the shadow should be inside the box instead of outside the box.

The following code shows the use of the linear-gradient properties:

<head>
<style type="text/css">
    #bgImage3 {
        background:linear-gradient(red,gray);
        /* background:repeating-linear-gradient(#d1aaaa,#dbdbdb,#ffd2d2); */
        }
</style>
</head>
<body>
    <h3>Applying gradients</h3>
    <div id="bgImage3">
        <p>  SOME WHITE TEXT <br /> background:linear-gradient(black,gray);</p>
    </div>
</body>

Applying clipping

The clip property allows you to specify what portion of an element is visible. The clip property takes only one parameter and the shape supported is the rectangle.

The following code demonstrates the clip property using the rect() function:

<head>
<style type="text/css">
    .clipper {
        position: fixed;
        clip: rect(25px, 100px, 100px, 25px);
     }
</style>
</head>
<body>
    <h2>Applying clipping</h2>
    <p>The clip property allows you to specify what portion of an element is visible.</p>
    <img src="image.jpg" style="height: 200px;width: 300px;" /><br />
    <h4>Image with clipping using ----- > clip: rect(25px, 100px, 100px, 25px);</h4>
    <img class="clipper" src="image.jpg" style="height: 200px;width:300px;" />
</body>

Ads Right