CSS visibility - cross-browser solution - 3.8 out of 5 based on 6 votes

In every level of the world we can see CSS transparency, we know how to give different elements of the side visibility and access to full cross-browser compatibility, so that the same robotic effect in different browsers.

How to set the transparency of any element

CSS3 has the power of opacity for creating transparent elements, so you can zastosovuvat to any elements. At given powerє value from 0 to 1, as a sign of transparency steps. De 0 - tse povna transparency, (for locking for all elements), and 1 povna opacity. The values ​​are written in fractions: 0.1, 0.2, 0.3 just.

Vikoristan example:

Cross-browser transparency

Not all browsers accept the same implementation of the higher opacity power. In some cases, it is necessary to win another name for power, or filter.

Power CSS3 opacity Mozilla browser 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

So good :) browser yak Internet Explorer up to version 9.0 does not take into account the power of opacity and transparency for which browser it is necessary to change the power of the filter and the alpha(Opacity=X) value, for which X - the whole number in the range of 0 to 100 for the help of which the transparency value is assigned. 0 is full transparency, and 100 is full opacity.

What is the cost Firefox browser up to version 3.5 win power -moz-opacity replace opacity.

Such browsers, like Safari 1.1 and Konqueror 3.1, inspired by the KHTML engine, use the transparency opacity for scanning: -khtml-opacity.

How do you set CSS transparency so that it looks the same in all browsers? To create a cross-browser solution for the transparency of elements, it is necessary to prescribe not only one power opacity, but the next set of powers:

filter: alpha(Opacity=50); /* Opacity for IE */ -moz-opacity: 0.5; /* Mozilla 3.5 thumbnail and below */ -khtml-opacity: 0.5; /* Konqueror 3.1 and Safari 1.1 trim */ opacity: 0.5; /* Help to solve browsers */

Transparency of various elements

Let's look at deyaki, apply the task of insight singing elements, which are most often vicorated on the side.

CSS image transparency.

Let's take a look at the options for creating a translucent baby. The attacking butt of the first picture does not have a transparency, the other can have a transparency of 50%, the third 30%.

Result:

CSS visibility when hovering over an image.

Often we need to look at the picture, otherwise there may be some other element at that moment, if the cursor is hovered over it. Zrobiti tse possible for Help CSS pseudo-class: hover. For which of our pictures it is necessary to prescribe two classes, one is superb - if the picture is inactive and the other class is pseudo-class: hover, here it is necessary to indicate the transparency of the picture at the time of hovering over the cursor.

You can see the result in the demo.

Clear background with CSS.

Here it is necessary to remember that the transparency is expanding on all the contributions of the elements and the stink cannot be greater transparency of the lower contributions of the element.

Like a butt, we’ll create an option with a side background for an additional picture and a block with a background for an additional color and transparency of 50%.

Example code:

Axis to the result of the placed code:

orem Ipsum is simply dummy text printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
This is a good fact that you should be aware of the readable content of a page when looking at its layout. The proof of Lorem Ipsum's win is those who can win more or less large-scale promotion, so you can win "Press here, content here", making it look like readable English. A lot of working packages and web pages of web pages that rank Lorem Ipsum as their defective text text, and search for "lorem ipsum" will search for a lot of websites that are in their infancy. Various versions may have evolved over the years, sometimes by accident, sometimes on purpose (injected humor and the like).

Otzhe, today's mova pide about transparency in html sides. You sang along with the transparent merging blocks, whether it was a photo gallery or a form of authorization on some popular site. Zastosuvannya prozorostі in html you can know impersonal. So how can you fight and de її can win?

Well, for starters, we can see that the document we have is not only one flat area of ​​the monitor - it looks like 3 worlds, about which I guessed at the article "Z-index". Vidpovidno navit zovsim prozory ball, leaning on the top of the stack of fermentation, blocking access to other elements. Whom has all one of the main zastosuvan prozorikh blocks. Irrespective of those that sound victorious, the effect of shading is observed, I will repeat the prozory ball of practice just the same. So, for example, there are a lot of popular photo galleries, a shading ball is organized in which photos are displayed, and the elements of managing them. Everything else on the side of the page appears "closed" (single) with a ball that closes access to all other elements on the side. Tobto. five of the sides, having pressed on the yakes, the force did not come out - the whole text was closed with a lining. To turn to the body of the site, ring out the control elements to close the gallery, form the entrance just fine. To display/attach to transparent blocks for additional javascript. Here, unfortunately, there is no alternative to youmu. Without yogo vikoristannya koristuvach or else you can’t bang transparent block, otherwise you can’t close it without filling the flow side. I'll designate what wins for the purpose of power visibility or display.

So how is transparency organized in html? Improving the clarity of the elements is not included in the CSS specification, so it is necessary to win over a sprinkling of instructions for its creation. Some browsers will work with one option, others with another. Ie vikoristovu vbudovanuyu filter functionality, and other browsers vikorivuyu power "opacity", which is set in the interval 0 (too clear object) to 1 (too opacity). For example, at a glance with 30% transparency, following writing " opacity:0.30; filter: alpha (opacity = 30); Powerfulness, as it can be seen from the butt, is similar - only in the first case there is a number of victories from 0 to 1, the other one has a record. An example of such a block:

At the butt there is a block showing the video, which is activated when the bear is pressed on the thumbnail of the video clip. The height is not set for the block; In connection with the chim won are calculated dynamically when the video is played. The butt of the vikoristannya tsієї tekhniki can be found on the main page of the site ruscircus.ru, over which I have worked in my own time.

Axis, vlasne, and the whole secret of transparency in html. We use z-index and opacity to subtract the transparency effect. And yet you can know someone without a face - here everything is surrounded only by your imagination.

08.02.2013 Let's look at the food, the tasks at the comments, and about those who grow up on the transparent block of opacity. Everything is simple here, it’s not for nothing that I asked the material for the material about the z-index, it’s necessary to create one more block, with a larger z-index, lower for the transparent one. The axis at once, for a sprat of khvilin, throwing on the butt. Blocks:

I functions in javascript

The first function is displaying a transparent block (at once from a textual opaque block) - it can be attached to a button. sent, etc.. Another function I have tied to the click of a bear on the block with the text - there is a clear block.

I am able to bring clarity to those who are working. Well, if not, put food.

Creating transparent backgrounds in HTML and CSS (effectively opacity and RGBA)

The effect of drink transparency remember the element well on the background little one and widen it in different operating systems, so that it looks stylish and beautiful. The smut of the mother under the intoxicating blocks is not a monophonic baby, but an image, in the very same way, the transparency becomes commemorative.

Such an effect can be achieved in a variety of ways, including old-fashioned methods, like a scumbag, a mapped image, and power opacity. And just as a little blame for the need to work in the block, it’s as if it’s rotten, for these methods there are unacceptable reverse sides.

Let's look at the transparency of the text and the background - it's right to highlight in the design of the site:

The main feature of the power of authority lies in the fact that the significance of transparency is on all daughter elements in the middle, and not only on aphids. Tse means that the background and the text will become translucent. You can increase transparency by changing the opacity command from 0.1 to 1.

HTML 5 CSS 3 IE 9

In web design, the transparency is also often stagnant, and it reaches for the RGBA color format, which is more appropriate for the background of the element.

Sound at the design, let's make it easier to see the elements, and the text is opaque for saving readability. The power of opacity is not suitable here, because the text in the middle of the element will also be often visible. It is best to use the RGBA format, part of which is the alpha channel, or in other words, the value of transparency. As the meaning is written rgba, then at the temples, through which the meanings of the red, blue and green components of the color are redone. Let's leave transparency, as it is set from 0 to 1, with which 0 means full transparency, and 1 color opacity - rgba syntax.

Napіvprozora tlo HTML 5 CSS 3 IE 9

To create the transparency effect in CSS, the power of opacity is used.

Browser IE8 and earlier versions support alternative power - filter:alpha(opacity=x) , so "x" can accept a value from 0 to 100 , a smaller value will make the element clearer.

All other browsers respect the standard CSS power of opacity, so they can accept values ​​like 0.0 to 1.0, the lower the value, the more transparent the element will be:

try

Transparency when hovered

Pseudo-class:hover allows you to change the appearance of the elements when hovering over the mouse. We are speeding up the possibility, so that the image, when hovering the mouse, loses its clarity:

try

transparency to the background

There are two possible ways to create an element: the power of opacity, described above, and coloring the background in RGBA format.

You may already know the color model of the RGB format. RGB (Red, Green, Blue - red, green, blue) is a color system that defines the way of mixing red, green and blue colors. For example, for setting a yellow color for the text, you can speed up whether you are one of the upcoming stuns:

Color: rgb(255,255,0); color: rgb(100%,100%,0);

Colors, tasks for the help of RGB, are taken into account according to sixteenth values, which we have chosen, which allow us to change the alpha channel of transparency. Tse means that the background of the element with alpha transparency is visible to those that are under it.

The ambiguous RGBA color is similar to the syntax of the standard RGB rules. However, apart from that, we will need to specify the RGBA value (replacing RGB) and set an additional tenth transparency value after the color value in the gap between 0.0 (full transparency) to 1 (full opacity).

Color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);

The difference between the power of opacity and RGBA lies in the fact that the power of opacity zastosovuyu transparency to the whole element, so that the whole of the element becomes transparent. And RGBA allows you to set the transparency to the outer parts of the element (for example, only the text or the background):

Body ( background-image: url(img.jpg); ) .prim1 ( width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter : alpha(opacity=70);/*for IE8 and later versions*/ text-align: center; 1px solid black; font-weight: bold; text-align: center; ) Try »

Note: RGBA values ​​are not supported by IE8 or older browsers. To make the color fallback for older browsers, so as not to trim the color values ​​with alpha channels, set it to the first RGBA value: background: rgb(255,255,0); background: rgba(255,255,0,0.5);

/* 06.07.2006 */

CSS transparency (css opacity, javascript opacity)

The effect of transparency is the theme of this article. How do you know how to make the elements of the html-side transparent, how to use CSS or Javascript, and how to achieve cross-browser compatibility (same work in different browsers) with browser improvements in Firefox, Internet Explorer, Opera, Safari, Konqueror, you are welcome. Until then, let's take a look at the solution of the step-by-step change of clarity for the help of JavaScript.

CSS opacity (CSS transparency)

CSS opacity symbiosis

Under the symbiosis, I may want to combine different styles for different browsers in one CSS rule to remove the necessary effect, that is. for implementation of cross-browser compatibility.

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, we need the first and last rules, for IE5.5+ and browsers, to understand CSS3 opacity, and the two rules in the middle obviously don’t shy away, but don’t even respect (it’s up to you, you need to stink).

Javascript opacity symbiosis

Now we can try to install transparency through the script with fixing the features of different browsers, described above.

Function setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Still don't use the element and assign an id, otherwise the browser doesn't support the native function of the way to clear visibility if (opacityProp=="filter") // Internet Exploder 5.5+ (nOpacity *= 100; // If transparency is already set, then it can be changed via the filters collection, otherwise transparency can be added via 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, we can "+=") 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 younger, 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 clarity }

The function takes two arguments: sElemId - the id of the element, nOpacity - a speech number from 0.0 to 1.0, which sets the transparency of the CSS3 opacity style.

I think it's a good idea to explain some of the setElementOpacity code that comes before IE.

VaroAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";

You can blame the food, but why not install the transparency with a path to attract (=) power elem.style.filter = "..."; ? How to win "+=" to add to the end of the power row filter ? The answer is simple, so as not to "overwrite" the other filters. And if so, if you add a filter in such a rank all of a sudden, you won’t change the value of that filter earlier, but if it’s just adding to the end of the rows of power, it’s not correct. To that, as a filter before insertions, it is necessary to manipulate it through the collection of stashes to the element of filters: elem.filters (but check, as the filter has not yet been assigned to the element, then it is impossible to manipulate it through the given collection). Access to the elements of the collection is possible either on the filter name or on the index. However, the filter can be set to two styles, the short IE4 style, or the IE5.5+ style, which is covered in the code.

Smooth change of transparency of the element

Solution ready. Victory library opacity.js

fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/sweet_cherry.jpg" width="98" height="97" />

Basic cuts:

1. Connecting the library of functions;
2. Viznazhemo rules vikoristovuyuchi method fadeOpacity.addRule();
3. We click method fadeOpacity() change the transparency from the cob value to the end value, or fadeOpacity.back() turn to the cob value of equal clarity.

Rozzhovuemo

How to connect the library, I guess, it can be seen from the butt more. Now the next step is to explain the purpose of the rules. The first step is to change the method of smoothly changing the transparency, it is necessary to designate the rules that will be used for the process: it is necessary to designate the openness to the beginning and end of the window, and to navit, for the error, to indicate the fading parameter, which injects the speed into the process of changing the transparency.

Rules are assigned to an additional method fadeOpacity.addRule

Syntax: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Arguments:

• sRuleName - the name of the rule that is set enough;
• nStartOpacity and nFinishOpacity - cob and end opening, numbers in the range from 0.0 to 1.0;
• nDelay - delay in miliseconds (neobov'yazkovy argument, for locking, until 30).

The visibility fader itself can be done through the fadeOpacity(sElemId, sRuleName) method, where sElemId is the id of the element, and sRuleName is the name of the rule. To rotate the visibility of the exit camp, the fadeOpacity.back(sElemId) method is switched.

:hover for simple change of visibility

I’ll also designate that for a simple change of transparency (but not step-by-step change), the pseudo-selector itself is suitable :hover, which allows you to assign the style of an element at the moment of hovering over a new mouse.

Please note that the image is placed in the middle of the A element. On the right, in Internet Explorer up to version 6, the :hover pseudo-selector is understood, only 100% posilan, and not be-such elements, like to lie with CSS (in IE7, the position has been corrected).

Clarity and jagged text in IE

The exit of Windows XP was the smoothing of screen fonts by the method clear type, and at the same time side effects in IE when using the smoothing method. In our opinion, as the transparency to the element with the text is blocked when the ClearType smoothing method is enabled, the text stops displaying normally (bold text - bold, for example, to double, different artifacts can appear like that, for example, in a figure that looks like jagged text). In order to correct the position, for IE you need to set the background color, CSS power background color, an element to which transparency is stagnant. Luckily in IE7 the bug has been fixed.