shadow.js制作图片彩色阴影特效的js插件

shadow.js制作图片彩色阴影特效的js插件

image-shadow.js是一款用于制作图片彩色阴影特效的js插件。它通过CSS3 filter过滤器来生成图片对应颜色的阴影效果。

注意,IE浏览器和Edge浏览器不支持该图片彩色阴影特效。

使用方法
在页面中引入image-shadow.js文件。

1
<script src="js/image-shadow.js"></script>

HTML结构
使用该图片彩色阴影特效的HTML结构:

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <div class="ishadow">
        <img class="img" data-blur="20" src="imgs/1.jpg">
    </div>
    <div class="ishadow">
        <img class="img" data-blur="20" src="imgs/2.jpg">
    </div>
    <div class="ishadow">
        <img class="img" data-blur="20" src="imgs/3.jpg">
    </div>
</div>

CSS样式
插件会自动在页面头部添加下面的CSS代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*--- Container that maintains image and shadow. ---*/
.container-img {
  position: relative;
}
     
/*--- IMG takes the full size of container-img. ---*/
img {
  max-width: 100%;
}
     
/*--- Setup the image shadow. ---*/
.img-shadow {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  bottom: -10%;
  left: 5%;
  width: 90%;
  height: 95%;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}
     
/*--- Remove shadow for IE and Edge (does not support blur filter). ---*/
@supports (-ms-ime-align: auto) {
  .img-shadow {
    display: none;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .img-shadow {
    display: none;
  }
}

文件信息:

    2

    发表评论