Using CSS3 to realize picture reflection course

In web production, there are times when you need to achieve some reflection. For example, you see a beautiful woman, you want to look at this mm from another angle, the following figure:

In order to achieve this effect earlier, we all have to rely on drawing software like Photoshop, and then introduce an image. So in addition to pictures, we have no other way to achieve it? Thankfully, for now, CSS3 has a property box-reflect that can be implemented. So today we are going to introduce you to the application of this attribute.

Although currently supported only in Chrome, Safari and opera browsers, this does not affect the application of this attribute.

Box-reflect syntax

To understand how the Box-reflect property is used, we need to know how the syntax is, so that we can better use this property clearly. The basic syntax is as follows:

Box-reflect:none | <direction> <offset>? <mask-box-image>?

Because this property is not a standard-only property, you need to add the browser's private properties, depending on your browser's compatibility, to add-webkit and prefixes when using Box-reflect:

-webkit-box-reflect:none | <direction> <offset>? <mask-box-image>?
Box-reflect:none | <direction> <offset>? <mask-box-image>?

Unfortunately, Firefox does not support this attribute, but thankfully, under the Firefox can be-moz-element () to simulate the implementation, I will explain in detail later.

Box-reflect Value Description

As you can see from the box-reflect syntax, it mainly includes the following attribute values:

None: This value is the Box-reflect default value, which indicates no reflection effect;

: This value indicates the direction in which the box-reflect generates the reflection, mainly including the following values:

Above: Indicates that the generated reflection is above the object (original image);

Below: Indicates that the generated reflection is below the object (original image);

Left: Represents the generated reflection on the left-hand side of the object (original artwork);

Right: Represents the generated reflection on the right-hand side of the object (original image);

: Used to set the spacing between the generated reflection and the object (original image), which can be either a fixed pixel value or a percentage value, such as:

: Use the length value to set the spacing between the generated reflection and the original, as long as the unit of length in the CSS can be used, this value can be negative;

: Use percentages to set the spacing between the generated reflection and the original image, which can also use negative values

: The mask effect used to set the reflection, either as a background picture or as a background image generated by a gradient.

Only theoretically, it does not seem to be very vivid, next, we have an example to introduce.

The direction of the reflection

Box-reflect reflection in the direction of our CSS and the margin and padding similar, including the top, right, bottom, and left four directions, each direction can be defined using keywords. Here's a simple example to show you the effect:

The reflection is above the object

Suppose we need to do a reflection on a picture, the structure is actually very simple:

<div class= "Box-reflect" ></div>"

According to the previous syntax, to let the reflection at the top of the object, we only need to give the Box-reflect property value to above can:

. box-reflect img {
-wekbit-box-reflect:above;
Box-reflect:above;
}

The effect is as follows:

Special Note: In this example, we provide a blank area for the reflection, and if no white space is provided, no effect is displayed. On the basis of the example above, I'll change the margin of. Box-reflect:

. box-reflect {
margin:0 Auto 210px;
width:200px;
}
. box-reflect img {
-wekbit-box-reflect:above;
Box-reflect:above;
}

You will see a very strange effect, that is, the reflection is not:

If you want to ask me why? Seriously, I am not clear, I can only think: if the reflection on the top of the image, if not reserved a certain space, will be shown as cannot be seen. Let's try to adjust the other elements, creating a space of false image, for example, give the body a Padding-top value:

From the animation demonstration effect of the above picture, the Box-reflect attribute value is above, the object's reflection has been generated, but no display area, the user can not look directly at the effect, but there is room to place the generated reflection, the effect came out.

Reflection on the right side of the image

At the beginning of the article, we saw a schematic, there are two mm front back in that, in fact, with box-reflect all this is no longer a problem, just set the Box-reflect property value to right:

. box-reflect img {
-wekbit-box-reflect:right;
Box-reflect:right;
}

The effect looks like this:

In the same way, when the object (original image) does not have enough space on the right to allow the generated reflection to be placed, it will not be displayed.

Reflection at the bottom of the object

When the Box-reflect value is above, the generated reflection is above the object, in fact, when its value is above antonym below, the object generated by the reflection will be at the bottom of the image. Such as:

. box-reflect img {
-wekbit-box-reflect:below;
Box-reflect:below;
}

The effect is as follows:

As in the front, when the Box-reflect value is below, it is also necessary to reserve a certain space at the bottom of the object, otherwise the resulting reflection can not be seen.

Reflection on the left side of the object

In addition to making the generated reflections above, right, and bottom of the object, you can also make the resulting reflection on the left side of the image. If you want to make a reflection on the left side of the image, you only need to set the Box-reflect value to leave.

. box-reflect img {
-wekbit-box-reflect:left;
Box-reflect:left;
}

The effect is as follows:

In the same way, it is necessary to reserve a certain space for the generated reflection on the left side of the image. Otherwise you will not be able to see the resulting reflection.

The spacing between the reflection and the object

After you know the direction of the reflection, let's look at the second property value. Sometimes we may have such a demand, although I will create a reflection, but I want to make the generated reflection and objects (original image) between a certain amount of space. So this time we need to use the second attribute value in the Box-reflect attribute.

Take an example to do a demo, assuming that the object generated by the reflection at the bottom, and need to let the generated reflection from itself has a 20px spacing, at this point we only need to do this:

. box-reflect-offset img {
-wekbit-box-reflect:below 20px;
Box-reflect:below 20px;
}

The effect is as follows:

As also mentioned in the attribute Description section, the value can be a length value (px, EM, or REM) or a percentage (%) value. And you can also take negative values, we don't look at a demo diagram:

Add a mask effect to the reflection

In addition to setting the direction and spacing of the reflection, it has a third attribute. Add a mask effect to the resulting reflection. To add a mask effect to the generated reflection, we can do it in two ways, the first is a gradient-generated background image, and the second is an external background image. Let's take a quick look at both of these ways.

Add a matte effect to a shadow using a gradient

Let's take a look at the effect of the background application of the gradient generation on the resulting reflection. As for the CSS3 gradient how to use? Here is no space to introduce. If you have never touched a CSS3 gradient, it is highly recommended that you read the following tutorials first:

"CSS3 Gradient"

"Again CSS3 gradient--Radial gradient"

Besides CSS3 gradient--linear gradient

Other tutorials on CSS3 gradients can be clicked here, and this link also provides some relevant case introductions.

Let's go back to the tutorial and start by creating a downward reflection of the image as described earlier, and adding a property value to the Box-reflect (remember that the gradient is generated):

. box-reflect img {
-wekbit-box-reflect:below 0-webkit-linear-gradient (Top,rgba (250,250,250,0), Rgba (250,250,250,.0) 30%,rgba ( 250,250,250,0.3));
Box-reflect:below 0-webkit-linear-gradient (Top,rgba (250,250,250,0), Rgba (250,250,250,.0) 30%,rgba (250,250,250,0.3 ));
}

The effect is as follows:

Unfortunately, you can only use a linear gradient to add a matte effect to the generated reflection, and the radial gradient has no effect at the moment. In addition, there is a special need to remind you that the resulting reflection to add a mask effect, if not set the explicit spacing will make box-reflect invalid. That is, when the property value in the Box-reflect property appears, you must explicitly set the value and set it to 0 if you do not need spacing.

Use a background picture to add a mask effect to your reflection

As I said before, in addition to using the CSS3 gradient to add a mask to the resulting reflection, we can also use an external image to add a matte effect to the resulting reflection. Let's look at a simple example.

First of all we have a PNG picture of Mickey (this one is for masking):

The picture used for the mask must be a PNG format picture. As for why? You can read the previous translation of an article "CSS mask--How to use the mask in CSS."

Let's look at an example:

. box-reflect img {
-wekbit-box-reflect:below 0 url (/sites/default/files/blogs/2014/1405/css-masking.png);
Box-reflect:below 0 url (/sites/default/files/blogs/2014/1405/css-masking.png);
}

You will see this effect:

The effect is not very dazzle ah. Does it feel so magical. Does it feel so easy again?

Special Note: The above example effects are viewed using the Chrome or Safari browser.

Alternative scenarios in Firefox

As you know in browser compatibility, the Box-reflect property is only supported by the browser of the kernel to date WebKit. But most of the time we still need to be compatible with Firefox browser effects. So what do we do?

No hurry, there is an alternative in Firefox. That is to use-moz-element () instead. Let's take a quick look at the implementation scenario.

Outside the picture, we have a container div, and give him an ID name moz-reflect:

<div class= "Box-reflect" id= "Moz-reflect" ></div>

We simulate by pseudo class: after:

. box-reflect {
margin:10px Auto;
width:200px;
}
#moz-reflect:after {
Content: "";
Display:block;
Background:-moz-element (#moz-reflect) no-repeat;
Width:auto;
height:200px;
-moz-transform:scaley (-1);
}

The simulation results are as follows:

Conclusion

In this paper, the application and usage of Box-reflect attribute in CSS3 are introduced in detail. Mainly uses Box-reflect to generate the reflection effect, because this attribute at present only in WebKit kernel browsing obtains the support, but uses the CSS3 the pseudo class and the distortion transform and so on the attribute may simulate the box-reflect effect. I hope this article will help you realize the effect of reflection, if you have relevant experience in the use of the following comments are welcome to share with us.