Home > Article > Web Front-end > How to use css3 to achieve a simple shadow effect on images (complete code attached)

How to use css3 to achieve a simple shadow effect on images (complete code attached)

坏嘻嘻Original: 2018-09-29 17:48:136906browse

The previous article showed you how to use css3 to achieve the shadow effect of text. This article will continue to show you how to achieve the shadow effect of pictures, which includes two special effects: curved surface/ellipse projection effect and suspended projection effect. . It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The principle of using css3 to achieve the shadow effect of pictures

A graphic needs to have a main projection, and another graphic with radian also has Use your own shadow effect to overlap the two graphics, make their colors consistent, and then expose the arc shadow, so that you can see the effect of a curved shadow.

text-shadow property setting

Horizontal offset, positive value to the right, negative value to the left.
Vertical offset, positive value goes down, negative value goes up.
Fuzziness, cannot be negative.
The color of the shadow.

Use css3 to achieve the surface/ellipse projection effect

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>曲面/椭圆投影效果</title>
  <style>
.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:5% 15px;
    border-radius:5px;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
.shadow_wrap h3{
  width:87%;
  height:100px;
  margin-left:6%;
  text-align:center;
  padding-top:60px;
  color:#fff;
}
/**styling shadows**/
.shadow1:before, .shadow1:after{
  position:absolute;
  content:"";
  bottom:12px;left:15px;top:80%;
  width:45%;
  background:#9B7468;
  z-index:-1;
  -webkit-box-shadow: 0 20px 15px #9B7468;
  -moz-box-shadow: 0 20px 15px #9B7468;
  box-shadow: 0 20px 15px #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:0 0 40px 13px #486685;
  border-radius:100px/20px; 
}
</style>
</head>
<body>
<div class="shadow_wrap">
  <div class="shadow1">
    <h3>椭圆投影1</h3>
  </div>
  <div class="shadow2">
    <h3>椭圆投影2</h3>
  </div>
</div>
</body>
</html>

The effect is as shown in the picture

How to use css3 to achieve a simple shadow effect on images (complete code attached)

##Use css3 to achieve the floating projection effect

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>悬浮投影</title>
 <style>
.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: transform 1s;
}
.floating:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    transform: translate(-50%, 0);
    transition: transform 1s;
}
/*鼠标移上去的效果*/
.floating:hover {
    transform: translateY(-40px);
    transition: transform 1s;
}
.floating:hover:after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 1s;
}
</style>
<body>
<div class="shadow_wrap">
  <div class="floating">
    <h3>悬浮投影</h3>
  </div>
</div
</body>
</html>

Achieve the effect as follows As shown in the picture

How to use css3 to achieve a simple shadow effect on images (complete code attached)

Summary

Use box-shadow directly: 5px 5px 10px black Just set the style using the inset; attribute. The first two values (5px 5px) are the horizontal and vertical offsets. A positive value will offset the shadow to the left and downward, and a negative value will vice versa; the third value (10px) is to set the blur distance; black is the shadow. Color; the last inset is to create a shadow inside the element, which is the inner shadow; deleting the inset is to set the outer shadow.

This is an effect achieved using pure CSS. Adding a shadow effect to the area border of the DIV layer looks very vivid, but it is not too difficult to implement. The CSS code is relatively simple and is worth learning. CSS implementation method of box shadow

For related content links, please view the video tutorial in the css3 part of this site:

http://www.php.cn/course/list/14.html

The above is the detailed content of How to use css3 to achieve a simple shadow effect on images (complete code attached). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to achieve the concave and convex effect of fonts in css3? (with code)Next article：How to achieve the concave and convex effect of fonts in css3? (with code)

See more

How to use css3 to achieve a simple shadow effect on images (complete code attached)

Related articles