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

This article will explain in detail how to achieve the simple shadow effect of pictures in css3. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The principle of using css3 to realize the Shadow effect of Picture

One shape needs to have a primary projection, and the other with radians also has its own shadow effect, so that the two shapes overlap, so that their colors are the same, and then the Radian shadow can be exposed. This is the effect of a curved shadow.

Text-shadow property Settings

Horizontal offset, positive to right, negative to left.

Vertical offset, positive downward, negative upward.

Ambiguity, cannot be negative.

The color of the shadow.

Using css3 to realize the effect of Surface / Ellipse projection

Surface / Ellipse projection effect

.shadow _ wrap {

Width:100%;background:#E6EEF6;max-width:600px;margin:auto;overflow:hidden

}

.shadow1 {

Background-color:#9ecf68

}

.shadow2 {

Background-color:#00bcd4

}

.shadow1, .shadow2 {

Position:relative

Width:40%

Height:200px

Float:left

Margin:5px

Border-radius:5px

Box-shadow:01px4pxrgba (0rem 0rem 0.3), 0020pxrgba (0je 0rem 0pr 0.1) inset

}

.shadow _ wraph4 {

Width:87%

Height:100px

Margin-left:6%

Text-align:center

Padding-top:60px

Color:#fff

}

/ * * stylingshadows**/

.shadow1: before,.shadow1:after {

Position:absolute

Content: ""

Bottom:12px;left:15px;top:80%

Width:45%

Background:#9B7468

Z-index:-1

-webkit-box-shadow:020px15px#9B7468

-moz-box-shadow:020px15px#9B7468

Box-shadow:020px15px#9B7468

-webkit-transform:rotate (- 6deg)

-moz-transform:rotate (- 6deg)

Transform:rotate (- 6deg)

}

.shadow1: after {

-webkit-transform:rotate (6deg)

-moz-transform:rotate (6deg)

Transform:rotate (6deg)

Right:15px;left:auto

}

.shadow2: before,.shadow2:after {

Position:absolute

Content: ""

Top:100px;bottom:5px;left:30px;right:30px

Z-index:-1

Box-shadow:0040px13px#486685

Border-radius:100px/20px

}

Elliptic projection 1

Elliptic projection 2

The implementation effect is shown in the figure.

Wechat screenshot _ 20180926171418.png

Using css3 to achieve suspension projection effect

Suspension projection

.shadow _ wrap {

Margin-top:50px;margin-bottom:10px

}

.floating {

Width:60%;max-width:180px;height:150px;line-height:150px;background:#ff9800

Color:#fff;text-align:center;cursor:pointer

Position:relative;transform:translateY (0); transition:transform1s

}

.floating: after {

Content: ""

Display:block

Position:absolute

Bottom:-30px

Left:50%

Height:8px

Width:100%

Box-shadow:0px0px15px0pxrgba (0, 0, 0, 4)

Border-radius:50%

Background-color:rgba (0Pert 00.2pm)

Transform:translate (- 50% ceno)

Transition:transform1s

}

/ * the effect of moving the mouse up * /

.floating: hover {

Transform:translateY (- 40px)

Transition:transform1s

}

.floating: hover:after {

Transform:translate (- 50% mai 40px) scale (0.75)

Transition:transform1s

}

Suspension projection

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.