Looking to make the web pages you create eye-catching, memorable, and up-to-date? Using translucency can help you do just that.
How to Apply Opacity
Throughout the evolution of browsers and html in general, designers and programmers have implemented these basic ways to provide transparency:
opacity;PNGimages;RGBA;- checkered images.
Each of the methods has its own characteristics. Depending on the situation, the task at hand and the desired effect, you decide which one to apply.
Opacity
When using opacity css property you should specify opacity of a certain element. Valid values from 0 to 1, where:
- 1 is set by default and indicates that the object is opaque (visible);
- 0 is fully transparent and becomes invisible;
- any number between 0 and 1 – the item is semi-transparent.
Note that as the values decrease it becomes more difficult to see the object.
Applying the opacity css property affects all of the content presented. It is not possible to edit individual blocks.
/* css */
body {
background-image: linear-gradient(-50deg, #e52b50, #df73ff);
}
.text {
padding: 9px;
background: #77dde7;
margin: 0 auto;
width: 55%;
opacity: 0.5;
}
Also note that transparency is given to dependent elements. For these objects you can increase transparency, but you can’t decrease it! As a result, the text placed on a translucent substrate will also be translucent.
In older versions of IE (before v. 7.0) this feature is not supported. It is possible to use the filter property instead.
filter: alpha(opacity=50);
But you have to keep in mind that filter is not in the html specification, it varies from 1 to 100 and can be applied to elements that have a fixed linear size (height or width) or an absolute position (position: absolute).
Background PNG image
Semitransparent image in PNG format is created and saved in the graphics editor. This file is specified as a background using the background property.
PNG format image can be used without changing the transparency parameter. To change the opacity level, you must change the image itself.
/* css */
body {
background: url(/fon.png);
}
.text {
padding: 9px;
background: url(/fon_transparent.png);
margin: 0 auto;
width: 55%;
}
If you need to change the color or transparency parameters using a graphical editor, another image is created and uploaded to the server again.
Unlike the previous Opacity method, transparency applies only to one element without affecting child elements. In addition, cross-browser transparency is understood by almost all browsers.
But you should take into account that if the user disables the display of images to save Internet traffic, your background will disappear. First and foremost you should pay attention to this when optimizing the mobile version of the site.
RGBA
There is a more current method, which is much easier than the previous 2. Its essence is to use the RGBA format for the background. The first 3 letters in English stand for the three base colors (red, green and blue); the last deciphered as alpha-channel and characterizes the transparency of the element.
As a result, the format of the record looks like this:
background-color: rgba(r, g, b, a);
The brackets contain the value of the color components, and you can find them out in the graphic editor. The last number indicates the desired transparency and corresponds to opacity.
When you apply background semitransparency using the background-color: rgba (r, g, b, a) property, there is no need to replace the images. The color and transparency level are changed in the parameters.
/* css */
body {
background: url(/fon.png);
}
.text {
padding: 9px;
background-color: rgba(127, 255, 212, 0.5);
margin: 0 auto;
width: 55%;
}
The disadvantages include – not all browsers understand this format. The settings will display correctly in:
- Opera from version 10;
- Internet Explorer from 9;
- Safari from 3.2;
- Firefox from 3.
For users of older versions of the Internet Explorer it is recommended to enter the color data in the standard format for this browser. But keep in mind that then transparency will not be displayed. If transparency is a priority, you can apply the filter property, but the result of its use will be reflected not only on the background, but also on the text.
In spite of that, the RGBA color model is quite handy. Unlike the PNG method, you don’t have to re-fill the image to change its characteristics, just change the rgba parameters. Its advantage over opacity is that transparency is set to the background and does not apply to text.
Ribboned image
There’s another method for creating a sense of opacity. It was used in the past, when the capabilities of browsers were limited, and programmers had to find atypical solutions to achieve the desired effect.
The trick is to build a series of transparent and opaque dots (pixels) in the created background. Thus, applying this image as a background, we got a pseudo-transparent background. This method is similar to the PNG image.
The plaid semi-transparent image was used for the background when it was not possible to use the now familiar methods.
/* css */
body {
background: url(/fon.png);
}
.text {
padding: 9px;
background: url(/fon_checkered.png);
margin: 0 auto;
width: 55%;
}
Depending on the design intent, such an imitation can still look interesting. But using this approach should be observed in moderation. When reading this background fatigues the eyes much faster than the classic transparency. In addition, it becomes more difficult to perceive the text, there are ripples, possibly the appearance of moiré patterns.
Conclusions
How to use transparency to get a more expressive effect:
- Beneath the transparency layer, place a catchy, variegated image. A uniform background will forgive transparency.
- When choosing a method, consider the browsers your target audience uses. Then you can adjust the optimal design for most users who visit the site. Do not neglect cross-browser design.
For best results, you need to stick to the basic design of the resource and highlight only the necessary content.