Vlad Merzhevich
The effect of translucency of the element is clearly visible in the background image and has become widespread in different operating systems because it looks stylish and beautiful. In web design, translucency is also applied and achieved through the opacity property, or the RGBA color format that is set for the background.
Gradient block
Make the block shown in fig. 1. The block contains a semi-transparent gradient frame with a gradient background under the heading and a small pointer. The background on the page is shown only for clarity of the translucency effect, you can specify any of your own images. The minimum block height is 100px.
How do I make a layer semi-transparent?
To change the transparency of an element, apply the style opacity property with a value from 0 to 1, where 0 corresponds to full transparency, and 1, on the contrary, to the opacity of the object. In the browser Internet Explorer this property does not work, so you have to use filter specifically for it, a property that is not part of the CSS specification. Example 1 shows how to set layer transparency for all browsers.
Translucent background
Vlad Merzhevich
Partial transparency, when used correctly, looks very impressive in website design. The main thing is that under the translucent blocks there is not a single-color pattern, but an image, in this case the transparency becomes noticeable. This effect is achieved different ways And if you remember everything, including the old-fashioned methods, then it is using a PNG image as a background, creating a checkered image and the opacity property. But as soon as it becomes necessary to make a translucent background in a block, these methods have an unpleasant flip side... I will do small overview to make it clear what in question, as well as for those readers who are not familiar with unconventional options for creating a translucent effect.
How to set the table to semi-transparent, but some of the cells are not?
To change the transparency of an element in CSS3, the opacity property is provided, its value can vary from 0 to 1. Zero corresponds to the full transparency of the element, and one, on the contrary, to opacity. Modern browsers work quite correctly with this property, with the exception of Internet browser Explorer, so for it you have to use a special filter property with the alpha value (Opacity = X), where X can vary from 0 to 100.
/* 06.07.2006 */
CSS transparency (css opacity, javascript opacity)
Transparency is the topic of this article. If you are interested in how to make html page elements transparent using CSS or Javascript, and how to achieve cross-browser behavior (the same work in different browsers) taking into account Firefox, Internet Explorer, Opera, Safari, Konqueror browsers, then you are welcome. In addition, consider ready-made solution gradually changing transparency using javascript.
CSS opacity
CSS opacity symbiosis
By symbiosis I mean unification different styles for different browsers in one CSS rule for getting desired effect, i.e. for cross-browser implementation.
Filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50); / * IE 5.5 + * / -moz-opacity: 0.5; / * Mozilla 1.6 and below * / -khtml-opacity: 0.5; / * Konqueror 3.1, Safari 1.1 * // * CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 * /
In fact, the first and last rules are needed, for IE5.5 + and browsers that understand CSS3 opacity, and the two rules in the middle obviously do not make the weather, but they do not really interfere (decide for yourself whether you need them).
Javascript opacity symbiosis
Now let's try to set transparency through a script, taking into account the peculiarities of different browsers described above.
Function setElementOpacity (sElemId, nOpacity) (var opacityProp = getOpacityProperty (); var elem = document.getElementById (sElemId); if (! Elem ||! OpacityProp) return; // If the element with the specified id does not exist or the browser does not support any of the known functions of how to control transparency if (opacityProp == "filter") // Internet Exploder 5.5+ (nOpacity * = 100; // If transparency is already set, then change it through the filters collection, otherwise add transparency through style.filter var oAlpha = elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (opacity =" + nOpacity + ")"; // In order not to overwrite other filters, use "+ =") else // Other browsers elem.style = nOpacity; ) function getOpacityProperty () (if (typeof document.body.style.opacity == "string") // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 and earlier, Firefox 0.8 return "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match (/ MSIE ([\ d.] +); /)> = 5.5) // Internet Exploder 5.5+ return "filter"; return false; // no transparency }
The function takes two arguments: sElemId - the id of the element, nOpacity - a floating point number from 0.0 to 1.0 specifying the CSS3 opacity.
I think it might be worth clarifying the IE-related part of the setElementOpacity function.
Var oAlpha = elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (opacity =" + nOpacity + ")";
You might wonder why not set transparency by assigning (=) to the elem.style.filter = "..."; ? Why use "+ =" to add a filter property to the end of a line? The answer is simple, so as not to "overwrite" other filters. But at the same time, if you add a filter in this way a second time, then it will not change earlier set values of this filter, but will simply be added to the end of the property line, which is not correct. Therefore, if the filter is already installed, then you need to manipulate it through the collection of filters applied to the element: elem.filters (but keep in mind, if the filter has not yet been assigned to the element, then manage it through this collection impossible). The elements of the collection can be accessed either by filter name or by index. However, the filter can be specified in two styles, IE4 short style, or IE5.5 + style, which is taken into account in the code.
Smooth change of element transparency
Ready-made solution. Using the opacity.js library
Basic steps:
- We connect the library of functions;
- We define rules using the method fadeOpacity.addRule ();
- Calling the method fadeOpacity () to change the transparency from the start value to the end value, or fadeOpacity.back () to return to initial value the level of transparency.
Chew
How to connect the library, I think, can be seen from the example above. Now it is worth clarifying the definition of the rules. Before calling the methods for smoothly changing transparency, you need to determine the rules by which the process will be executed: you need to define the initial and final transparency, and also, if desired, specify the delay parameter that affects the speed of the transparency change process.
Rules are defined using the method fadeOpacity.addRule
Syntax: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)
Arguments:
- sRuleName - the name of the rule, set arbitrarily;
- nStartOpacity and nFinishOpacity - starting and ending transparency, numbers in the range from 0.0 to 1.0;
- nDelay - delay in milliseconds (optional, defaults to 30).
The fading of transparency itself is called through the fadeOpacity (sElemId, sRuleName) methods, where sElemId is the element id, and sRuleName is the name of the rule. To return transparency to the initial state the fadeOpacity.back (sElemId) method is used.
: hover to easily change transparency
I also note that for a simple change of transparency (but not a gradual change), the pseudo-selector is just right : hover, which allows you to define styles for an element when you hover over it.
Note that the picture is placed inside element A. The fact is that Internet Explorer up to version 6 understands the: hover pseudo-selector, only applied to links, and not to any elements, as it should be in CSS (in IE7 the situation is fixed).
Transparency and jagged text in IE
WITH Windows release XP introduced anti-aliasing screen fonts method Cleartype and with it the side effects in IE when using this anti-aliasing method. In our case, if transparency is applied to an element with text when the ClearType anti-aliasing method is enabled, then the text stops displaying normally (bold text - bold, for example, doubles, various artifacts may also appear, for example, in the form of lines, jagged text). In order to fix the situation, for IE you need to set background color, CSS property background-color, the element to which the transparency is applied. Fortunately, IE7 has fixed the bug.
Transparency in CSS is a pretty trendy technique in Lately which causes difficulties in cross-browser implementation. Still does not exist universal method that would allow for transparency for all browsers. Recently, however, the situation has improved markedly.
This article takes a detailed look at existing approaches, and provides code examples and explanations to help you achieve the same result in all browsers with minimal effort.
Another point worth mentioning is that although transparency has been around for several years, it has never been part of the CSS standard. This is a non-standard property and should be part of the CSS3 specification.
Old approach
In old Firefox versions and Safari needs to apply the property like this:
#myElement (-khtml-opacity: .5; -moz-opacity: 0.5;)
The -khtml-opacity property was used in older versions of webkit browsers. This property is deprecated and is no longer needed unless you are sure that a significant portion of your site's traffic comes from visitors using Safari 1.x, which is of course unlikely.
V next line used the -moz-opacity property which worked for very early versions Mozilla engine. Firefox ended support for it in version 0.9.
CSS transparency in Firefox, Safari, Chrome and Opera
For most modern browsers, it is sufficient to use next property:
#myElement (opacity: .7;)
In the above example, the element is set to an opacity value of 70% (30% opacity). That is, if we set the value to one, then the element will be opaque, and, accordingly, setting this value to zero will make it invisible.
The opacity property handles 2 decimal digits. That is, the value ".01" will differ from the value ".02", although it is not very noticeable.
CSS transparency for Internet Explorer
As usual, Internet Explorer is not on friendly terms with other browsers. In addition, we now have three versions of this browser in fairly widespread use, the setting of transparency in each of which is different and sometimes requires additional efforts to obtain a positive result.
#myElement (filter: alpha (opacity = 40);)
This example uses the filter property, which works in versions 6-8, but there is one limitation for versions 6 and 7: the element must have its hasLayout property set to true. This property is present only in IE and you can read more about it, for example, on Habré.
Another way to set transparency using CSS in IE8 is to use the following approach (note the comments):
#myElement (filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 40); / * works in IE6, IE7 and IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 40)"; / * IE8 only * /)
The first line will work in all versions currently in use, the second only in IE8. Note that the second line uses the -ms- prefix and the value is quoted.
Setting and changing CSS transparency using JavaScript or jQuery
You can use the following code to set transparency:
Document.getElementById ("myElement"). Style.opacity = ".4"; // for most browsers document.getElementById ("myElement"). style.filter = "alpha (opacity = 40)"; // for IE
Of course, in this case it is much easier to use jQuery, in addition, it will work in all browsers:
$ ("# myElement"). css ((opacity: .4)); // works in all browsers
You can animate this property:
$ ("# myElement"). animate ((opacity: .4), 1000, function () (// Animation complete; this code works in all browsers.));
RGBA function
It is planned to support the alpha channel in CSS3 using the rgba function. This feature works in Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. It is used like this:
#rgba (background: rgba (98, 135, 167, .4);)
In this case last parameter indicates the level of opacity.
HSLA function
Like previous function CSS3 also lets you set a semi-transparent color using the HSLA function, whose parameters are Hue, Saturation, Lightness, and Alpha.
#hsla (background: hsla (207, 38%, 47%, .4);)
An important point when using the rgba and hsla functions is that the opacity setting is not applied to the child elements, while the opacity property is inherited.
How to set transparent color in css? At the moment, there are 3 ways to do this.
Method 1 - the transparent value
If you set the value of the text or background color to transparent, then the color will be completely transparent, that is, invisible. Example:
Color: transparent;
Such text will not be visible on the page.
Method 2 - rgba color mode
And this is already a css3 innovation. Previously, there was no such mode in web development, there was only rgb. You probably know how to write color in this format. To do this, you need to specify in parentheses three values from 0 to 255, indicating the saturation of one of the three primary colors (red, green, blue). For instance:
Background: rgb (230, 121, 156);
The rgba format is no different, only a fourth value is added - the degree of transparency of the element from 0 to 1. In general, this notation format is mainly used to specify a semi-transparent color, not completely transparent. To achieve full transparency, you just need to write 0 as the fourth value.
Background: rgba (0, 0, 0, 0);
In this case, the remaining 3 digits do not play a special role.
The semi-transparent color can be set if the fourth parameter is set to a value from 0.01 to 0.99. I already wrote a little about setting the translucency of the background in, you can read it if you are interested.
Method 3 - opacity
Another property from css3 technology. But I want to warn you right away that it works a little differently. Opacity is used to set the opacity to the entire block to which it is applied. Thus, the readability of the text and the perception of pictures deteriorate. So, I see the meaning to apply the property only for blocks in which there is no text or any other information. Values can be set from 0 to 1, as is the case with the fourth parameter when specifying a color in rgba format.
In general, on this moment these are all the ways I know of setting a transparent color in css. Why this is needed is another question. What is underneath can be seen through the transparent background. Sometimes this has to be done by design. In general, the technique with translucency is very common today.
Transparent background
As you probably know, background is a css property that allows you to set a background color or load an image to act as a background.
Set transparency for css background
So, this is all very easy thanks to the rgba color notation format. If you are working with graphic editors then you probably know that color mode rgb stands for red, green and blue. So, rgba is practically the same, only one more parameter is added - transparency. It is written like this:
Background-color: rgba (173, 57, 22, 0.5)
First, we explicitly indicate that we are setting the color in rgba mode. Then we specify the saturation values of the three primary colors from 0 to 255, where 255 is the highest saturation. The fourth parameter is our transparency. A value from 0 to one is written here. 1 is fully opaque and 0 is fully transparent. Accordingly, if you set it to 0, then the background color will not be visible at all.
Now you know how to set transparency for the background property in css. To do this, you need to use the rgba color mode. There is also the opacity property, but it applies to the entire element as a whole. That is, when opacity is applied, transparency can also be applied to the text, making it unreadable.
Transparent background for example
The advantages of a translucent background are easy to show with an example. For example, we have general background pages. This is what the block would look like if it were given a solid black color:
Now let's set the same black color to the block, but indicate it using the rgba color format, specifying the last value in 0.7, for example. It turns out like this: 
Now the background of the block is visible and visible through it background picture... This picture and background are for illustration purposes only. As you can imagine, transparency in css background can come in handy when you need the background of a nested element to show through without obscuring other backgrounds located in other layers.
Set the color itself with using rgba not difficult. As already mentioned - the first three letters mean three primary colors: red, green and blue, or rather their share (from 0 to 255). Prescribing different meanings you can get millions different colors, and translucency will allow you to come up with a lot more beautiful effects for the site, if necessary.
Property CSS opacity responsible for the transparency of elements (images, text, blocks) in html.
CSS opacity syntax
Where value can take real values in the range from 0.0 to 1.0. A value of 1.0 means no transparency (default).
Example # 1. Transparent image in html
The first image is displayed without transparency, the second with 0.5 transparency
Element translucency
Making the image semi-transparent on hover!
DemoDownload sourceThank you for your attention!
Next article
How to create div block with scrolling?
