Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use css3 box-reflect to design reflection effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use css3 box-reflect to design reflection effect" this article.

Speaking of reflection effect, in traditional web pages, we can only use photoshop to design the reflection in advance, and then import it into the web page, which not only consumes resources, but also hinders the efficiency of development. And

Reflections has been added to css3, and css Reflections allows css to design reflection.

Currently, css Reflections is only supported by the webkit engine, and we can only test it in Chrome and Safari browsers. I believe it will be popular in the future.

The box-reflect attribute of css3 enables us to design the reflection of pictures, text, etc., specific syntax:

Syntax:

Box-reflect: includes 3 values.

1. Direction defines the direction. Values include above, below, left and right.

Above:

Specify the reflection on top of the object

Below:

Specifies that the reflection is below the object

Left:

Specifies that the reflection is on the left side of the object

Right:

Specifies that the reflection is on the right side of the object

2. Offset defines the distance of the reflection offset, including a numeric value or percentage, where the percentage is determined according to the size of the object. The default is 0.

The length value is used to define the interval between the reflection and the object. Can be negative. The interval between the reflection and the object is defined as a percentage. Can be negative.

3. Mask-box-image defines a mask image that covers the projected area. If the parameter value is omitted, the default is the unmasked image.

Value:

None: unmasked images:

Specify the mask image using an absolute or relative address.

Create a mask image using a linear gradient.

Use a radial (radioactive) gradient to create a mask image.

Use repeated linear gradients to create a back mask image.

Create a mask image using a repeated radial (radioactive) gradient.

Description:

Sets or retrieves object reflection.

The corresponding script feature is boxReflect.

When the source of the object changes, the projection updates automatically, and the mouse effect can be seen in the projection when the mouse passes over the object. If this attribute is applied to the video tag, the video will also be played as a projection effect. And the size of the projection and reflection offset do not affect the layout of the page.

The following example defines a simple reflection style, and the effect is as follows:

The css code is as follows:

Img {

Height:250px

Border:1px solid red

-webkit-box-reflect:below

}

The html code is as follows:

On the basis of the above, we continue to improve by setting the distance for the reflection and offsetting it by 10 pixels. The effect is as follows:

Changed css code:

Img {

Height:250px

-webkit-box-reflect:below 10px

}

Next, continue to improve, design the css gradient reflection, through the gradient mask to gradually cover the reflection below, to create a fade effect.

The css code is as follows:

Img {

Height:250px

-webkit-box-reflect:below 5px-webkit-gradient (linear, left top, left bottom, from (transparent), color-stop (0.5, transparent), to (white))

}

In addition, except for pictures, any object on a web page can design css reflection effect. The following example is to design text as a reflection effect:

The complete code is as follows:

CSS Reflections text reflection effect

Img {

Height: 200px

Position: absolute

Right: 0

Bottom: 0

}

Div {

Border: 1px solid # 666

Color: # 666

-webkit-box-reflect: below 5px

}

H2 {text-align: center;}

"Rain Lane"-Dai Wangshu

Holding an oil-paper umbrella, alone.

Wander for a long, long time

A lonely lane in the rain

I hope to meet

Like a clove

A girl with sorrow and resentment

The above is all the contents of the article "how to use css3's box-reflect to design reflection effects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.