Good day, web development geeks, as well as newbies. For those who do not follow IT trends, or rather web fashion, I would like to solemnly inform you that this publication on the topic: “How to make a transparent block with css tools” is just right for you. Indeed, in the current 2016, the introduction of various transparent objects into online services is considered a stylish move.

Therefore, in this article I will tell you about all existing methods creating transparency, starting from antediluvian solutions, I will focus on the compatibility of solutions with browsers, and also provide specific examples of program code. Now let's get to work!

Method 1. Antediluvian

When computers were still weak and “abilities” were not developed, developers came up with their own way of creating transparent background: Use transparent pixels alternately with colored pixels. The block created in this way looked like a chessboard when scaled, but at normal size it resembled some kind of transparency.

This, in my opinion, “crutch” certainly helps out in older versions of browsers that do not work modern solutions. But it is worth noting that the text display quality , inscribed in such, falls sharply.

Method 2. Not bothered

In rare cases, developers solve the problem of introducing a translucent image by inserting... a ready-made translucent image! For this purpose, images saved in PNG-24 format are used. The graphic format allows you to set 256 levels of translucency.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

However, this method is not convenient for several reasons:

1. Internet Explorer 6 does not work with this technology; you need to write script code for it;
2. You can't change background colors in css;
3. If the browser's image display function is disabled, it will disappear.

Method 3. Promoted

The most common and well-known way to make a block transparent is the property opacity.

The parameter value varies in the range, where at 0 the object is invisible, and at 1 it is fully visible. However, there are some unpleasant moments here too.

First, all child elements inherit transparency. This means that the entered text will also “shine through” along with the background.

Secondly, Internet Explorer again “turns up its nose” and, up to version 8, does not function with opacity.

To solve this problem, use filter:alpha (Opacity=value).

Let's look at an example.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Method 4. Modern

Today, professionals use the rgba (r, g, b, a) tool.

Previously, I told you that RGB is one of the popular color models, where R is responsible for all shades of red, G for shades of green and B for shades of blue.

In the case of the css parameter, the A variable is responsible for the alpha channel, which in turn is responsible for the transparency.

Main advantage last method– the alpha channel does not affect objects located inside the stylized block.

rgba(r, g, b, a) is supported starting from:

• Opera version 10;
• Internet Explorer 9;
• Safari 3.2;
• 3 versions of Firefox.

I want to note interesting fact! The beloved Internet Explorer 7 throws an error when combining properties background-color with the name of the colors (background-color: gold). Therefore, you should only use:

background-color: rgba (255, 215, 0, 0.15)

And now an example.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

In our store you will find all kinds of flowers.

Note that the text content of the block is fully visible (100% black), while the background is set to an alpha channel of 0.88, i.e. 88%.

This concludes the publication. Subscribe to my blog and don't forget to invite friends. I wish you good luck in learning web languages! Bye bye!

Transparency in CSS is quite a trendy technique lately, which causes difficulties in cross-browser implementation. There is still no universal method that would allow transparency to be implemented for all browsers. However, recently the situation has improved markedly.

This article provides a detailed look at existing approaches, as well as code examples and explanations that will help you achieve the same result in all browsers with minimal effort.

One thing worth mentioning is that while transparency has been around for several years, it has never been part of the CSS standard. This is a non-standard property that should be part of the CSS3 specification.

Old approach

In older versions of Firefox and Safari, you must apply the property as follows:

#myElement ( -khtml-opacity: .5; -moz-opacity: 0.5; )

The -khtml-opacity property was used in older versions of webkit browsers. This property has been deprecated and is no longer needed unless you are confident that a significant portion of your site's traffic comes from visitors using Safari 1.x, which is of course unlikely.

The next line uses the -moz-opacity property, which worked on very early versions of the Mozilla engine. Firefox stopped supporting it in version 0.9.

CSS transparency in Firefox, Safari, Chrome and Opera

For most modern browsers it is enough to use the following property:

#myElement ( opacity: .7; )

In the example above, the element is set to 70% opacity (30% transparency). That is, if we set the value to one, the element will be opaque, and, accordingly, setting this value to zero will make it invisible.

The opacity property processes 2 decimal digits. That is, the value ".01" will differ from the value ".02", although this is not noticeable.

CSS transparency for Internet Explorer

As usual, Internet Explorer is not friendly with other browsers. In addition, we now have three versions of this browser in fairly widespread use, the transparency setting in each of which is different and sometimes requires additional effort to obtain a positive result.

#myElement ( filter: alpha(opacity=40); )

This example uses the filter property, which works in versions 6-8, however for versions 6 and 7 there is one limitation: the element's hasLayout property must be 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)"; / * only for IE8 */ )

The first line will work in all currently used versions, the second - only in IE8. Note that the second line uses the -ms- prefix and the value is in quotes.

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 is complete; this code works in all browsers. ));

RGBA function

CSS3 plans to support alpha channels 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

Similar to the previous function, CSS3 also allows you to set a semi-transparent color using the HSLA function, the parameters of which are Hue, Saturation, Lightness and Alpha channel.

#hsla ( background: hsla(207, 38%, 47%, .4); )

An important point when using the rgba and hsla functions is that the transparency setting is not applied to child elements, whereas the use of the opacity property is inherited.

CSS Property 3 opacity allows you to make one or another element of the site transparent.

The degree of transparency of an element is determined by the value from 0 before 1 Where 0 – completely transparent 1 – opaque at all.. So for example the meaning 0.5 properties opacity applied to an image will mean that this image should be translucent.

Transparency in IE

Internet Explorer does not support properties opacity up to the ninth version, however, it has its own filter with which you can set the degree of transparency:

filter: alpha(opacity=50)

Meaning opacity for filter Internet browser Explorer can vary from 0 - completely transparent 100 - opaque

The blocks of this menu will be translucent on hover in IE too!!

home
Site Map
Buy an elephant
Sell ​​an elephant
Rent an elephant

Prefixes.

In principle, this could be the end of the chapter on transparency, but I would also like to tell you about the so-called vendor prefixes.. these comrades have no special relation to this chapter, however, as you progress in learning CSS3, they will appear more and more often and you need to talk about them somewhere - so I’ll tell you here.

So, vendor prefixes are special CSS property prefixes used by browsers for experimental properties that are not officially included in the CSS specification.

We remember that the CSS 3 specification is still under development and formally the properties described in this tutorial do not exist in nature, but browsers are already actively using them at their own peril and risk.

Why at your own risk? Yes, because there is a possibility that when the CSS 3 specification is officially approved, the properties described in it will differ in their effect from properties with the same name that are already used by browsers. Well, let’s go crazy and let the developers of the CSS 3 specification designate the property opacity not as the degree of transparency of the block, but for example as its shading or flickering (of course I’m writing nonsense), which will then be displayed by millions installed browsers for which opacity Is this transparency?

Or let’s say that browser developers came up with their own property - an innovation that no one else has anywhere, but a document with such a property does not pass the validity check because such a property is not in the specification.

For these and other reasons, browsers prefix properties that are not part of the official specification. Each browser has its own prefix starting with the “-” sign, this sign at the beginning of the property, as well as this “_” sign, according to the CSS 2.1 specification, means that the property is reserved for CSS extensions of certain browsers.

Here are the most popular browsers and their prefixes:

Browser	Prefix
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 and higher	-ms-
Safari up to version 3, Konqueror	-khtml-
Safari 3 and above, Google Chrome	-webkit-

It is very easy to use prefixes; just take any CSS property and substitute the desired prefix to it, for example to the property opacity substitute -moz- it turns out: -moz-opacity

Although in fact my expression “ use prefixes"wrong! in fact, nothing is substituted anywhere, there is simply a property opacity, is there -moz-opacity and these are two different properties that do not necessarily have to perform the same function!! - this should be understood..

You should also understand that certain specific browsers, up to certain versions, can only support CSS properties with their own prefixes (again, I’m expressing myself incorrectly, it’s correct to say your own properties - browser CSS extensions), and can initially rely on specifications, even if they are being developed. – We will consider each specific case separately in this textbook.

Regarding this chapter on transparency, it should be noted that Firefox 3.5 and its earlier versions use their own property -moz-opacity, A Safari browser up to version 1.1 uses its own property -khtml-opacity .

So, in order to make our example completely cross-browser compatible, we need to add a couple more lines to the code:

As you can see, prefixes significantly stretch the code and their use is not always justified if the versions of browsers that want to work with certain properties only using their prefixes are quite old, as is the case with the property opacity, then you don’t have to indicate them.. – although of course this is bad advice..

Well, now some useful tips...

Always use prefixes (unless, of course, a particular browser cannot do without them) in cases where the property used can greatly affect the performance, readability and usability of the site. It’s one thing when little things in the site design don’t work, and quite another thing when, for example, the site menu doesn’t work or it’s impossible to read the text on the site because the browser doesn’t support some property and instead uses a similar one of its own.

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

In this lesson, we will look at CSS transparency, learn how to give transparency to various page elements and achieve full cross-browser compatibility, i.e., this effect will work the same in different browsers.

How to set the transparency of any element

In CSS3, the opacity property is responsible for creating transparent elements, which can be applied to any element. This property has values ​​from 0 to 1, which determine the degree of transparency. Where 0 is full transparency (the default value for all elements), and 1 is full opacity. Values ​​are written as fractions: 0.1, 0.2, 0.3, etc.

Usage example:

Cross-browser transparency

Not all browsers perceive and implement the above opacity property in the same way. In some cases it is necessary to use a different property name or filters.

The CSS3 opacity property is supported by the following types of browsers: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

So good :) a browser like Internet Explorer up to version 9.0 does not support the opacity property and to create transparency for this browser you need to use the filter property and the value alpha(Opacity=X), in which X is an integer in the range from 0 to 100, which determines the level of transparency. 0 is completely transparent and 100 is completely opaque.

Concerning Firefox browser before version 3.5 it supports the -moz-opacity property instead of opacity.

Browsers such as Safari 1.1 and Konqueror 3.1, built on the KHTML engine, use the -khtml-opacity property to control transparency.

How can you set transparency in CSS so that it looks the same in all browsers? To create a cross-browser solution for element transparency, they need to specify not only one opacity property, but the following set of properties:

filter: alpha(Opacity=50); /* Transparency for IE */ -moz-opacity: 0.5; /* Supports Mozilla 3.5 and below */ -khtml-opacity: 0.5; /* Supports Konqueror 3.1 and Safari 1.1 */ opacity: 0.5; /* Supports all other browsers */

Transparency of various elements

Let's look at some examples of setting transparency to certain elements that are most often used on the page.

CSS image transparency.

Let's look at several options for creating a translucent picture. In the following example, the first image has no transparency set, the second has a transparency of 50%, and the third has 30%.

Result:

Transparency in CSS when hovering over an image.

It is often necessary to do transparent picture or any other element at the moment when the cursor is hovering over it. This can be done with CSS help pseudo-class:hover. To do this, our picture needs to be assigned two classes, one normal - this will be the inactive state of the picture and the second class with the pseudo-class: hover, here you need to specify the transparency of the picture at the moment of hovering the cursor.

You can see the result in the demo.

Background transparency using CSS.

Here it is necessary to remember that transparency applies to all nested elements and they cannot have greater transparency than the nested element.

As an example, we will give a variant with a page background created using a picture and a block with a background created using color and having a transparency of 50%.

Sample code:

Here is the result of the code posted above:

Creating a transparent background in HTML and CSS (opacity and RGBA effects)

Translucent effect element is clearly visible in the background image and has become widespread in different operating systems because it looks stylish and beautiful. The main thing is to have not a monochromatic pattern under the translucent blocks, but an image; it is in this case that transparency becomes noticeable.

This effect is achieved different ways, including old-fashioned techniques like using a PNG image as a background, creating a checkered image, and the opacity property. But as soon as the need arises to make a translucent background in a block, these methods have unpleasant downsides.

Let's look at the translucency of text and background - how to use it correctly in website design:

The main feature of this property is that the transparency value affects all child elements within it, not just the background. This means that both the background and text will become translucent. You can increase the level of transparency by changing the opacity command from 0.1 to 1.

HTML 5 CSS 3 IE 9

In web design, partial transparency is also used and is achieved through the RGBA color format, which is set only for the background of the element.

Typically in a design, only the background of an element should be translucent, and the text should be opaque to maintain readability. Opacity property not suitable here because the text inside the element will also be partially transparent. Best to use RGBA format, part of which is the alpha channel or in other words the transparency value. The value is written rgba, then the values ​​of the red, blue and green color components are listed in parentheses, separated by commas. Last is transparency, which is set from 0 to 1, with 0 meaning full transparency, and 1 color opacity - the syntax for using rgba.

Translucent background HTML 5 CSS 3 IE 9

The background opacity is set to 90% - semi-transparent background and opaque text.