Today, creating website design is becoming a real art. This is 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 unlike others, to attract the attention of visitors and direct it to certain elements, a huge number of methods and tools are used. Among them there is a very popular css property - transparency. This technique is quite fashionable and spectacular, and therefore is often used. You can give transparency to various objects of the site page - text, a whole block or picture, for example. It is also achieved in various ways. Consider them below.
Item transparency settings
There are several options for adjusting the degree of transparency of elements. They are used depending on specific goals, as well as the browser for which the design is “customized”. These include the following properties:
- opacity;
- filter;
- PNG image as background.
The values of the css property "transparency" are changed as follows: the larger the number, the lower the level of transparency of the element. In opacity, it varies from 0 to 1, in filter, from 10 to 100. The latter is used for the Interet Explorer browser, and for all others, the opacity property is used.
Image transparency (variable)
Let's start with the option when transparency will appear when you hover over an element of the mouse cursor.
Consider how to set the transparency of the picture. CSS offers two options. To do this, you need to register it directly in the html-document code as follows:
- Specify the path to the image.
- We determine the transparency options when you hover and no. To do this, we use the onmouseover and onmouseout properties, in which we prescribe the values of opacity and filter.
The same characteristics can be registered in the css-document, and in the source code add only a link to it. The results will be the same.
Transparency of text and page blocks
As for the text or block (div transparency), css suggests using an option similar to creating image transparency, that is, use a connected css file in which the necessary parameters will be set. You can go in a simpler way. When setting the styles of the div style block or text p, write 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 needs to be set on an ongoing basis. In this situation, the solution is even simpler than hovering over the mouse.
For the css element, transparency will be set by the following code. In the div style block, specify the values for background (for example, # ff8800), opacity (e.g. 0.5), as well as width and padding.
For a picture, we add opacity and filter to the code, and also indicate the path to the image.
RGBA method
There are other options for using this css property: transparency can be applied to the background color of any design element. To do this, use the RGBA method. The first three letters indicate the main colors (red, whole, blue), and the last - alpha, which sets the level of transparency. Using the RGBA format, we prescribe the degree of transparency, indicating it in the last digit. For example, like this: background: rgba (240,2,33,0.4035).
Conclusion
Thus, using the simple but effective css “transparency” property during the work on the site’s design, you can make its elements more interesting and more noticeable with a minimum of effort. The described options for specifying transparency characteristics will help you with this.