Tag transparency: CSS opacity rule
The design of the site and its dialogue with the visitor can be effectively performed using the effect of transparency. The CSS opacity rule provides the ability to set the transparency of the tag content from 0 to 1, that is, from full transparency to full opacity.
As a general rule, transparency is rectangular. But if you use the rule: background-color: transparent, and the shape of the image (for example, in the format * .png), which is different from the rectangular one, then you can achieve almost any effect.
Transparency Rule Syntax
Using the construction: opacity: 0.4 - in the description of the style identifier or class makes the transparency of the tag to which they are applied, 40%. The transparency value of the style is recorded with a digit from 0 to 1. The lower border means full transparency, that is, the tag will not be visible, and the upper border is full opacity, that is, everything that is under the tag will not be visible.
It should be noted that the CSS opacity rule affects both the background (color, image) and the frame and text in the tag. Because constructing, in particular, the dialog boxit is advisable to separate its background from the text on it (creating different styles for these elements) or choose colors that look good against the overall background of the page at the selected level of transparency.
Transparent element visibility
Even if transparency is zero, that is, the element is invisible, it is present in the browser window and can generate events.
In this case, in the picture with strawberries there is a tag in the form of a circle with a butterfly, and in it is a tag with the text Click Me! The transparency of the tag with the butterfly is 0.5, and with the text - 1, respectively, the text is completely opaque.
If in the text tag you set an event handler, for example, onclick, then no matter what level of transparency this tag has, a click on its location will always work.
Apply transparency rule
The logic of applying the rule of transparency in the classic quality CSS background, opacity = 0.3 - 0.5: a message or dialogue window pops up over the general background of the page, only covering it, and leads a dialogue with the visitor. This practice has already become habitual, that a site without this functionality is no longer considered modern.
Using different levels of transparency in the tags superimposed on each other will allow you to create original visual effects. Unfortunately, the transparency on devices that do not support the mouse does not allow to reveal some interesting visual ideas, but if you use the CSS delay rule with a delay, then the movement of the fingers on the smartphone screen, for example, can also be revived in unexpected ways.