CSS3 tutorial of making tilt navigation bar and frosted glass effect

This article mainly introduces the use of CSS3 to make tilt navigation bar and glass effect, the need for friends can refer to the following

The navigation bar is not a stranger to every web front-end siege lion, but the glass may be relatively unfamiliar. To put it simply, frosted glass is to allow the image or background to use the corresponding method of fuzzy processing. This effect is very visual impact for users.

Theme of this share: use CSS3 to create a navigation bar and a frosted glass effect similar to the following.

The navigation bar is a trapezoidal shape.

Background area of the frosted glass effect.

There is a reason to share the navigation bar and the glass effect in an article. Because the realization of these two effects is inseparable from an important idea.

It is described in words: the parent element is set position:relative, its pseudo-element (after or before) is set Position:absolute, and Top,bottom,left,right is 0, The pseudo-element fills the entire space of the parent element, and finally sets Z-index to place the background behind the parent element.

The specific code is as follows.

. container {  position:relative;}. Container::after {  content: ';  Position:absolute;  left:0;  right:0;  bottom:0;  top:0; Z-index:-1;}

What do you mean? A little bit, I will be in the next two practical examples of this code meaning one by one.

Article structure:

1. Navigation bar

1.1: Parallelogram navigation bar

1.2: Ladder navigation bar

2. Frosted Glass Effect

3. Concluding remarks

4. Reference Articles

1. Navigation bar

1.1: Parallelogram navigation bar

Parallelogram made the idea: parallelogram production using the CSS3 2D deformation of the skew () tilt property, because we just tilt in the horizontal direction, so we need to use skew () to specify the second parameter as 0, otherwise the x, Y axis direction will be tilted, this is not what we want to effect. or use SKEWX (). The specific code is implemented as follows.

Parallelogram navigation bar HTML

. Keith Li {  position:relative;}. Keith Li::after {  content: ';  Position:absolute;  left:0;  right:0;  bottom:0;  top:0;  Z-index:-1;  Background: #2175BC;  -moz-transform:skewx ( -25deg);  -ms-transform:skewx ( -25deg);  -webkit-transform:skewx ( -25deg);  Transform:skewx ( -25deg);}. Keith Li:hover::after {  background: #2586D7;}

In the above code, only some of the important parts are shown. Here are a few things to keep in mind when setting up parallelogram:

1. Set the relative for the LI element, then the pseudo-element after setting absolute and LRBT in four directions. The reason is that we need to position the pseudo element relative to the LI element, and let the pseudo-element fill the entire Li element's space, so that the background set for the pseudo-element will be covered with the entire LI element. Most importantly, setting SKEWX () on a pseudo-element will only skew the pseudo-element and will not skew the text on the parent element.

2. Set the z-index:-1. If you do not set the Z-index value to negative, you will not see the text inside the Li element, because absolute will increase the level of its own elements, so the pseudo-element z-index to 1, so that its hierarchy is the LI element.

3. Use the Skewx () function to rotate the pseudo-element (not the Li Element) element by 25 degrees, and note the attribute prefix to prevent browser compatibility issues.

4. When using pseudo-elements and pseudo-classes, it is important to note that first pseudo-class, then pseudo-element. If it's li::after:hover, it doesn't have any effect. The correct wording: Li:hover::after.

The example effect is as follows.

1.2: Ladder navigation bar

Ladder navigation bar is the realization of the idea: Trapezoidal navigation bar using the CSS3 3D deformation of three properties: Perspective (), Rotatex () and Transform-origin.

Perspective () is used to set the distance between the user and element 3D space Z-plane, the smaller the value, the closer the user and 3D space Z-Plane distance, the visual effect will be obvious; Conversely, the greater the value, the farther the user is from the Z-plane of the 3D space, the less visual effect.

Ratatex () is used for the rotation of the x-axis in 3D space, and you can imagine the spatial Cartesian coordinates that you learned in high school, just like the rotation of the x-axis.

Transform-origin is the position of the center point of rotation for the specified element.

The use of specific properties can be consulted on the relevant documents, here will not repeat. The specific code is implemented as follows:

Trapezoidal navigation Bar HTML

JS Code

. Keith Li {  position:relative;}. Keith Li::after {  content: ';  Position:absolute;  top:0;  bottom:0;  left:0;  right:0;  Z-index:-1;  Background: #2175BC;  -moz-transform:perspective (0.5em) Rotatex (5deg);  -ms-transform:perspective (0.5em) Rotatex (5deg);  -webkit-transform:perspective (0.5em) Rotatex (5deg);  Transform:perspective (0.5em) Rotatex (5deg);  -moz-transform-origin:bottom;  -webkit-transform-origin:bottom;  Transform-origin:bottom;}. Keith Li:hover::after {  background: #3B9BE5;}

In the above code, only the important parts are shown. Note the following questions:

1. The first four questions are basically the same as the parallelogram navigation bar. where Perspective () and Rotatex () are set on pseudo-elements, only 3D processing of pseudo-elements and rotation of the x-axis in space, and no processing of the text on the parent element. The text will still appear in the default effect. If you set perspective () and Rotatex () on the parent element, all subsequent child elements are affected. That is, all child elements (including text) are rotated. The text is rotated and it is difficult to read. This logic should not be difficult to understand.

2. The property used to control whether the trapezoid is left or right tilted is transform-origin. Trapezoidal not inclined: bottom. Left tilt: bottom, right tilt: bottom.

The sample effects are as follows:

2. Frosted Glass Effect

The realization idea of the frosted glass: frosted glass uses the principle of the Backgroung-size,fiter filter in the CSS3.

The Background-size property is used to specify the size of the background picture, where one of the parameters cover is to enlarge the background picture to fit the entire container. However, this property uses the premise that you need to set a large enough size of the picture, otherwise it will cause the background image distortion.

The blur () in the Fiter filter is used to Gaussian blur the picture, accepting only the unit value, the greater the value, the more obvious the blur effect.

In the Zhang Xinxu Teacher's article on the implementation of the glass (the link in the reference article), give the effect of the glass, but there are some small problems: if you add text to the background picture, Blur () will blur the text together, so the user experience is not very good. Of course, in the background picture without the need for text, Zhang Xinxu Teacher's plan is still very good.

The specific code is given below:

Frosted glass HTML

Body {  Background:url (".. /images/family-one.jpg ") No-repeat Center center fixed;  -moz-background-size:cover;  -o-background-size:cover;  -webkit-background-size:cover;  Background-size:cover;}. Rascal {  position:relative;  Background:rgba (255, 255, 255, 0.3);  Overflow:hidden;}. Rascal::after {  Z-index:-1;  Content: ";  Position:absolute;  top:0;  bottom:0;  left:0;  right:0;  Background:url (".. /images/family-one.jpg ") No-repeat Center center fixed;  -moz-background-size:cover;  -o-background-size:cover;  -webkit-background-size:cover;  Background-size:cover;  -webkit-filter:blur (20px);  Filter:blur (20px);  margin: -30px;}

There are several issues to be aware of in the above code:

1. Also here is the method of using the parent element relative, pseudo-element absolute, and set TBLR and Z-index. The key to using this approach is that we blur () the pseudo-element so that it does not affect the text effect in the parent element.

2. You need to add the Background-size property to the background image, this is to make the picture adapt to the width of the entire screen. Additionally, this attribute needs to be added two times. One is on the BODY element, one is on the pseudo element. The reason for adding on pseudo-elements is that we want blur () to process the blurred picture with the background image. If you set inherit for background in a pseudo-element, only the background of the parent container rascal is inherited, and the Rascal container is a white background container, which is not the same as our effect. Is the use of background:inherit in pseudo-elements, the glass effect.

This is not the frosted glass effect we want. So the background setting on the pseudo-element should be the same as the background picture.

3. After setting the correct background for the pseudo-element, we want to use margin negative to blur the edge regression problem.

As you can see, the blur () effect in the frosted glass is a bit overkill, the blur effect goes beyond the container, and the parent element is set to Overflow:hidden, which can cut out the excess part. The final example effect is as follows.

The final effect looks natural.

3. Concluding remarks

Three examples, there is a common thought: The CSS3 tilt, perspective, rotation and filter effects are placed in the pseudo-element, and to the parent element set relative, pseudo-element set absolute, so that the width and height of the pseudo-element to fill the entire area of the parent element, Finally, set the z-index of the pseudo-element to a negative value. The benefit of this is that the text in the parent container is not affected.

The specific code is as follows:

.container {position:relative;}.  Container::after {content: ';  Position:absolute;  left:0;  right:0;  bottom:0;　top:0; Z-index:-1;}