The css property "transparency" is an easy way to make a site design more interesting.

Today, the creation of a website design is becoming a real art. It's not just a set of page elements of a certain color and size, fonts of different styles and thematic drawings. In order to make the site different from others, to attract the attention of visitors and to direct it to those or other elements, a huge number of methods and tools are used. Among them there is a very popular property css - transparency. This technique is quite fashionable and effective, and therefore it is often used. You can give transparency to various objects on the site page - text, whole block or picture, for example. It is also achieved in many ways. Let us consider them below.

Parameters for setting the transparency of elements

Parameters that allow to regulate the degree of transparency of the elements are several. They are used depending on specific purposes, as well as the browser, under which the design is "adjusted". These include the following properties:

• Opacity;
• Filter;
• PNG image as background.

The values of the css "transparency" property change as follows: the larger the digit, the lower the transparency level of the element. In opacity, it varies from 0 to 1, in filter - from 10 to 100. And the latter is used for the browser Interet Explorer, and for all others, the opacity property is used.

Transparency of the image (changing)

Let's start with the option, when the transparency will be shown when you hover over the mouse cursor element .

Consider how to set the transparency of a picture. CSS offers two options. To do this, it is necessary to write it directly in the code of the html-document as follows:

1. Specify the path to the image.
2. Determine the transparency settings when hovering over the cursor and not. To do this, we use the onmouseover and onmouseout properties, in which we set the opacity and filter values.

These same characteristics can be written in the css-document, and in the source code, add only a link to it. The results are the same.

Transparency of text and page blocks

As for the text or block (the transparency of the div), css suggests using an option similar to creating a transparent image, that is, using a css-file that is connected, in which the required parameters will be set. You can go in a simpler way. When specifying the styles of the div style block or the p text, prescribe the following html code for the onmouseover and onmouseout elements. Both options work and give the desired result.

Transparency constant

In some cases, the transparency of an object, design element, or text is required to be set on an ongoing basis. In this situation, the solution is even easier than when you hover the mouse cursor.

For the css element, the transparency is given by the following code. In the div style block, we assign values for background (for example, # ff8800), opacity (eg, 0.5), as well as width and padding.

For the image in the code, we enter the values of opacity and filter, and also specify the path to the image.

RGBA method

There are other options for using this property css: transparency can be applied to the background color of any design element. For this, the RGBA method is used. The first three letters indicate the main colors (red, solid, blue), and the last one - alpha, which sets the level of transparency. Using RGBA-format, prescribe the degree of transparency, indicating it in the last digit. For example, this is the case: background: rgba (240,2,33,0,4035).

Conclusion

Thus, using a simple but effective property css "transparency" in the course of working on the site design, you can make its elements more interesting and more visible, with a minimum of effort. The described options for specifying transparency characteristics will help you in this.