然后上周五我去,专门用来实现黑色半透明遮罩

作者: 前端  发布:2019-11-03

腾讯微云黑色遮罩引导蒙版更好的CSS实现方式

2016/03/08 · CSS9159.com, · 1 评论 · 蒙版

原文出处: 张鑫旭(@张鑫旭 )   

一、有请jquery.guide.js

jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐),新版qq语音测试向导

一、有请jquery.guide.js

网站上线或者改版的时候,常常会做一个操作向导,告诉用户一些重要操作到了哪里,或者什么地方隐藏了什么好玩的东西,等等,虽然我都是直接关掉的,或者快速跳过,但是对有部分用户而言还是很有用的。

这种提示比较好的交互效果是采用镂空的半透明遮罩,视觉重点一目了然,类似这样:

我在去年的时候曾经写了一篇文章,名为“ 腾讯微云黑色遮罩引导蒙版更好的CSS实现方式 ”,介绍如何使用单标签,实现类似的交互效果,其中,核心技巧是使用了CSS border 属性,也就是周围的黑色半透明遮罩实际上是半透明边框。

后来我发现了一种更好的实现方式,就是使用CSS outline 属性, outline 属性为元素的轮廓,并不会增加任何元素的尺寸,也不会破坏原先的布局,因此我们只需要设一个非常非常大的 outline 宽度值,我们定位元素就永远天然镂空,根本不需要计算上下左右的半透明黑色区有多大。

.guide {
  outline: 9999px solid rgba(0,0,0,.75);
}

最近正好有个改版项目有类似的需求,我要基于这个原理顺便整了一个jQuery插件,名为jquery.guide.js,专门用来实现黑色半透明遮罩镂空提示引导效果。

实例demo地址: demo地址戳这里

二、jquery.guide.js小插件的优势

jquery.guide.js 小插件的优势如下:

1.使用方便,直接引入JS就好了,无需引入CSS资源;
2.支持浏览器的滚动以及缩放的重定位;
3.支持浏览器键盘操作,如上下键和左右键上一步下一步,ESC键退出等;
4.支持页面异步呈现的元素的引导;
5.内置是否提示检测,也就是内置只会提示一次的处理,基于localStorage进行首次判断;
6.兼容到IE8浏览器;

然后,一些偷懒的地方:

  1. 默认是使用 outline 属性实现的,因此不支持圆角,如果你想实现类似下图的效果:

9159.com 1 

则可以使用CSS box-shadow 属性模拟半透明遮罩效果,在 jquery.guide.js 源代码中,其实已经给大家都准备好了,如下图:

9159.com 2 

正如源代码中的注释所言,如果想支持圆角,注释上面的 outline ,放开下面两行 box-shadow 和 border-radius 的注释就可以了。

.guide {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
  border-radius: 50%;
}

其中 box-shadow: 0 0 0 9999px 表示原地阴影扩展 9999px 的意思,再用户看来,就是一个满屏黑色半透明的遮罩。

至于不支持CSS3 box-shadow 和 border-radius 的IE8浏览器还是 outline 直角效果。

2.z-index 层级以及半透明遮罩层的透明度都没有作为参数放开,因为新手引导提示基本都是一次性的,如果大家觉得 z-index 层级或者 opacity 透明度不满意,直接修改JS源代码即可。

三、jquery.guide.js小插件的语法和使用

语法如下:

$.guide(options);

其中, options 为数组,数组项为格式一致的包含提示信息相关参数的对象,这个对象统一的默认值为:

var defaults = {
  selector: '', 
  content: '', 
  align: 'center',
  offset: {
    x: 0,
    y: 0
  }
};

使用时候类似这样:

$.guide([{
  selector: '#target'
}]);

其中:

•selector 表示需要镂空暴露的目标元素的选择器,如果该选择器可以匹配多个元素,则使用该选择去匹配的第一个元素作为目标元素;如果无法匹配元素,则整个这个参数对象会被忽略。
•content 表示镂空区域内额外显示的内容,可以是HTML字符串,也可以是jQuery包装器对象。
•align 表示显示内容的对齐方式,是左对齐居中对齐还是右对齐?可选关键字值包括: left , center , right . 其中 center 是默认值。
•offset 表示偏移的水平垂直距离, x 那是水平偏移位置,计算规则与 align 参数值有关, y 表示垂直偏移距离,其中 content 提示内容默认不是顶对齐,而是相对于镂空暴露的目标元素下边缘往上 5 像素对齐。

眼见为实,demo页面走起,您可以狠狠地点击这里: jQuery小插件jquery.guide.js使用demo

demo页面共设置了 4 个提示元素,相关JS使用如下:

<script src="./jquery.min.js"></script>
<script src="./jquery.guide.js"></script>
<script>
$.guide([{
  selector: '.logo',
  content: '<img src="guide-1.png">',
  align: 'left'
}, {
  selector: '.ad img',
  content: '<img src="guide-2.png">'
}, {
  selector: '#back',
  content: '<img src="guide-3.png">',
  align: 'left'
}, {
  selector: '.demo img',
  content: '<img src="guide-4.png">'
}]);
</script>

本demo页面为了演示方便,做了特殊处理,每次刷新都会显示提示效果。实际使用的时候是不会有这样的问题的,只会显示一次,无需担心。

9159.com 3 

四、结束语

并不是什么了不起的东西,就不放在github上了,如果大家有幸捧场使用,遇到什么问题,欢迎评论的形式进行反馈。

一、有请jquery.guide.js 网站上线或者改版的时候,常常会做一个...

直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们。不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程,讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。

一、微云的实现

网站有一些改动的时候,为了让用户熟知新的操作位置,往往会增加一个引导,常见的方式就是使用一个黑色的半透明蒙版,然后需要关注的区域是镂空的。

然后上周五我去微云转悠的时候,也看到了引导层,于是职业病又犯了,去学习下别人是怎么实现的。下面是观测的结果:

为了实现镂空蒙层效果,作者发挥了小时候拼积木的才能,使用两层HTML结构,内层使用5块独立区域拼接形成,至于中间镂空的区域的阴影则是使用的图片实现的。

9159.com 4

9159.com 5

虽然最终的效果满足了产品的需求,对于用户而言,目的已经达到。但是,从代码质量层面、潜在的体验提升可能性、使用场景广度上来讲,还是弱了很多的。

举例来说,如果我们某个提示区域面积很大,那中间的那个镂空区域尺寸是不是要变,那后面的背景图片怎么办?搞新图,有人看到了使用了background-size:cover, 那IE7,IE8怎么办?哦,可能微云不需要管IE7, IE8.

如果不需要管IE7, IE8,那这里的实现就显得更加小白了。我们实际上只需要一层标签,一层空标签就可以实现我们的效果,且不需要图片。

网站上线或者改版的时候,常常会做一个操作向导,告诉用户一些重要操作到了哪里,或者什么地方隐藏了什么好玩的东西,等等,虽然我都是直接关掉的,或者快速跳过,但是对有部分用户而言还是很有用的。

先看下demo

二、我的实现

主要在于思维方式的变化。拼积木这种想法大家都比较容易想到,符合日常认知,但是,但代码层面,我们可以进行思维转换,发散思考,偌大的半透明遮罩层,我们不要老想着背景色块背景色块,可以突破常规思维,把它认为是边框,一个很大很大的边框(我们平时使用border都是1像素巨多),这样,我们自然就有了镂空效果。

如下图示意:
9159.com 6

但是,目前我们中间的镂空区域方的,有没有什么办法变成圆的呢?
自然有,方法1是元素设置超大圆角,但是,此时为了边框依然填满整个屏幕,border边框尺寸要大大增大,但是,为了不影响页面的滚动条,我们必须再嵌套一层标签,就显得啰嗦了;
方法2则是方法1某些方面的逆向思维处理,就是把当前元素作为外层限制标签,里面重新生成一个大尺寸伪元素,实现自适应尺寸的圆角效果,这个好,HTML干净不啰嗦,CSS一步到位(代码如下示意);

.cover::before { content: ''; width: 100%; height:100%; border-radius: 50%; border: 400px solid #000; position: absolute; left: -400px; top: -400px; /* 自己瞎填的参数,示意 */ box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75); }

1
2
3
4
5
6
7
8
9
10
.cover::before {
    content: '';
    width: 100%; height:100%;
    border-radius: 50%;
    border: 400px solid #000;
    position: absolute;
    left: -400px; top: -400px;
    /* 自己瞎填的参数,示意 */
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);
}

大家可以看到,上面的伪元素的各个参数都是固定参数值,与外部元素的尺寸什么的没有任何关系,只要外部元素尺寸不超过400,里面永远会有一个正椭圆的内阴影的镂空图形(因为超出部分会被.cover隐藏),要理解圆角和正椭圆的关系,可以参考我之前的文章:“秋月何时了,CSS3 border-radius知多少?”。

眼见为实,耳听为虚,您可以狠狠地点击这里:一层标签实现网站引导镂空蒙版功能demo (点击黑色蒙层会有引导切换效果)

demo这个镂空蒙层所使用的HTML代码如下:

<div class="cover"/></div>

1
<div class="cover"/></div>

没错,就这么简单,没什么嵌套,没有什么五个元素变形金刚合体,没有使用图片。

微云这张图片3K多,以微云的用户访问量,估计流量费要不少钱的。

而且,大家如果点击蒙版,会发现,镂空的区域大小每次都是不一样的,有大有小,有高有瘦,而微云的那个实现方法要满足此需求就棘手;而且,大家发现没,这些尺寸位置的变化都是动画来动画去的,不是嗙嗙嗙这种生硬的效果,更soft, 对用户视觉引导效果更好,你看,我从这里到这里了,为什么可以实现动画效果呢,因为我们的镂空和内阴影都是CSS实现的,而微云的图片方法,显然是无法有动画的。

9159.com 7

JS代码辅助
当然,我的实现也离不开JS的辅助,JS的工作很简单,让蒙层的width/height以及border大小和需要引导的元素相关联。

我特意整了个可以公用的方法coverGuide(命名不喜欢自己随便改):

var coverGuide = function(cover, target) { var body = document.body, doc = document.documentElement; if (cover & target) { // target size(width/height) var targetWidth = target.clientWidth, targetHeight = target.clientHeight; // page size var pageHeight = doc.scrollHeight, pageWidth = doc.scrollWidth; // offset of target var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop), offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft); // set size and border-width cover.style.width = targetWidth + 'px'; cover.style.height = targetHeight + 'px'; cover.style.borderWidth = offsetTop + 'px ' + (pageWidth - targetWidth - offsetLeft) + 'px ' + (pageHeight - targetHeight - offsetTop) + 'px ' + offsetLeft + 'px'; cover.style.display = 'block'; // resize if (!cover.isResizeBind) { if (window.addEventListener) { window.addEventListener('resize', function() { coverGuide(cover, target); }); cover.isResizeBind = true; } else if (window.attachEvent) { window.attachEvent('onresize', function() { coverGuide(cover, target); }); cover.isResizeBind = true; // IE7, IE8 box-shadow hack cover.innerHTML = ''; } } } };

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
37
38
39
40
41
42
43
44
45
var coverGuide = function(cover, target) {
    var body = document.body, doc = document.documentElement;
    if (cover & target) {
        // target size(width/height)
        var targetWidth = target.clientWidth,
            targetHeight = target.clientHeight;
 
        // page size
        var pageHeight = doc.scrollHeight,
            pageWidth = doc.scrollWidth;
 
        // offset of target    
        var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop),
            offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft);
 
        // set size and border-width
        cover.style.width = targetWidth + 'px';
        cover.style.height = targetHeight + 'px';    
        cover.style.borderWidth =
            offsetTop + 'px ' +
            (pageWidth - targetWidth - offsetLeft) + 'px ' +
            (pageHeight - targetHeight - offsetTop) + 'px ' +
            offsetLeft + 'px';
 
        cover.style.display = 'block';
 
        // resize
        if (!cover.isResizeBind) {
            if (window.addEventListener) {
                window.addEventListener('resize', function() {
                    coverGuide(cover, target);
                });    
                cover.isResizeBind = true;
            } else if (window.attachEvent) {
                window.attachEvent('onresize', function() {
                    coverGuide(cover, target);
                });
                cover.isResizeBind = true;
 
                // IE7, IE8 box-shadow hack
                cover.innerHTML = '';
            }
        }
    }
};

这里的coverGuide方法使用原生JS实现,IE6+浏览器都是兼容的,不依赖JS库,大家可以随意使用。当然,写得匆忙,没有严格验证,可能有bug,大家可以稍微留点心。

使用非常简单,语法如下:

coverGuide(cover, target);

1
coverGuide(cover, target);

其中cover就是.cover这个单独的蒙版元素,target则是我们需要指引的元素,按钮啊,导航什么的。然后,我们的镂空区域自动定位到target的位置,大小也是target元素的大小。超省心。

具体使用,可参考上面的demo,源代码就在页面上。

IE7,IE8怎么办
如果你需要兼容IE7,IE8,我们不妨就方框效果;如果设计和产品接受不了,则可以使用图片打个补丁,例如上面JS代码部分的:

cover.innerHTML = '<img src="guide-shadow.png">';

1
cover.innerHTML = '<img src="guide-shadow.png">';

我demo使用的这个图片长下面这样:
9159.com 8

大小还有阴影都是我自己随手一搞的,旨在示意,真实项目大家可以向设计师索要图片。

然后,CSS超easy, 图片撑满我们的cover就可以。

/* IE7, IE8 img */ .cover > img { width: 100%; height: 100%; }

1
2
3
4
/* IE7, IE8 img */
.cover > img {
    width: 100%; height: 100%;    
}

这种提示比较好的交互效果是采用镂空的半透明遮罩,视觉重点一目了然,类似这样:

问题 (见 demo)

三、结束语

这种蒙版覆盖思想呢,不仅仅适用于这种大面积的引导。我们上传图片,尤其上传头像之后,要对头像进行剪裁,常见的交互之一就是四周黑色,中间镂空,也可以使用巨大border来实现我们的效果,一层标签足矣,根本不需要上下左右额外4层标签拼接合体实现。

内部自适应的圆角效果单看文字,很多小伙伴估计不知道我在说些什么,建议去demo页面看下伪元素的代码,真实区域大小和最终效果,估计就会明白了。

感谢阅读,欢迎交流,欢迎提供更好的实现方法,一定有的,只是我功力不够。

以上~

9159.com 9

相关文章

  • 小tip:CSS3下的圆形遮罩效果实现与应用 (0.604)
  • CSS3 box-shadow兼容loading效果兼IE10+ CSS Hack介绍 (0.396)
  • CSS3 box-shadow盒阴影图形生成技术 (0.396)
  • CSS border三角、圆角图形生成技术简介 (0.350)
  • CSS3图标图形生成技术个人攻略 (0.338)
  • 遐想:如果没有IE6和IE7浏览器… (0.286)
  • 伪元素表单控件默认样式重置与自定义大全 (0.286)
  • first-line伪类实现兼容IE6/IE7的单标签多背景效果 (0.286)
  • CSS计数器(序列数字字符自动递增)详解 (0.286)
  • CSS之before, after伪元素特性表现两则 (0.286)
  • CSS3/SVG clip-path路径剪裁遮罩属性简介 (RANDOM – 0.255)

    1 赞 2 收藏 1 评论

9159.com 10

我在去年的时候曾经写了一篇文章,名为“ 腾讯微云黑色遮罩引导蒙版更好的CSS实现方式 ”,介绍如何使用单标签,实现类似的交互效果,其中,核心技巧是使用了CSS border 属性,也就是周围的黑色半透明遮罩实际上是半透明边框。

看一下demo,请注意在第一行的图片中使用了border-radius和inset box-shadow。Firefox会直接在图片元素上渲染border-radius,但不会渲染inset box-shadow。chrome/safari则两者都不渲染。

后来我发现了一种更好的实现方式,就是使用CSS outline 属性, outline 属性为元素的轮廓,并不会增加任何元素的尺寸,也不会破坏原先的布局,因此我们只需要设一个非常非常大的 outline 宽度值,我们定位元素就永远天然镂空,根本不需要计算上下左右的半透明黑色区有多大。

9159.com 11

.guide {
  outline: 9999px solid rgba(0,0,0,.75);
}

解决方案

最近正好有个改版项目有类似的需求,我要基于这个原理顺便整了一个jQuery插件,名为jquery.guide.js,专门用来实现黑色半透明遮罩镂空提示引导效果。

要让 border-radius 和 inset box-shadow 正常工作,解决方案就是将实际图片变作background-image.

实例demo地址: demo地址戳这里

9159.com 12

二、jquery.guide.js小插件的优势

动态方法

jquery.guide.js 小插件的优势如下:

要想动态实现,可以简单的使用jQuery为每个图片元素外面包一个背景图片。下面的jQuery代码会将所有图片外面包一个span标签然后将图片用作其背景图片(jQuery代码由Darcy Clarke编写)。

1.使用方便,直接引入JS就好了,无需引入CSS资源;
2.支持浏览器的滚动以及缩放的重定位;
3.支持浏览器键盘操作,如上下键和左右键上一步下一步,ESC键退出等;
4.支持页面异步呈现的元素的引导;
5.内置是否提示检测,也就是内置只会提示一次的处理,基于localStorage进行首次判断;
6.兼容到IE8浏览器;

12345678910111213

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$("img").load(function() {$(this).wrap(function(){return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';});$(this).css("opacity","0");});});</script>

然后,一些偷懒的地方:

输出

  1. 默认是使用 outline 属性实现的,因此不支持圆角,如果你想实现类似下图的效果:

上面的脚本将会输出下面的HTML代码:

9159.com 13 

123

<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;"><img src="image.jpg" style="opacity: 0;"></span>

则可以使用CSS box-shadow 属性模拟半透明遮罩效果,在 jquery.guide.js 源代码中,其实已经给大家都准备好了,如下图:

圆形图片(见 demo)

9159.com 14 

现在,图片被用作背景图了,你可以给它添加任意你想要的样式上去。下面是一个简单的使用border-radius实现的圆形图片。如果你对CSS3不太了解,可以阅读下Basics of CSS3,也可以搜索一下前端观察。

正如源代码中的注释所言,如果想支持圆角,注释上面的 outline ,放开下面两行 box-shadow 和 border-radius 的注释就可以了。

9159.com 15

.guide {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
  border-radius: 50%;
}

CSS

其中 box-shadow: 0 0 0 9999px 表示原地阴影扩展 9999px 的意思,再用户看来,就是一个满屏黑色半透明的遮罩。

12345

.circle .image-wrap {-webkit-border-radius: 50em;-moz-border-radius: 50em;border-radius: 50em;}

至于不支持CSS3 box-shadow 和 border-radius 的IE8浏览器还是 outline 直角效果。

卡片风格(见 demo)

2.z-index 层级以及半透明遮罩层的透明度都没有作为参数放开,因为新手引导提示基本都是一次性的,如果大家觉得 z-index 层级或者 opacity 透明度不满意,直接修改JS源代码即可。

下面是一个像卡片的图片风格,用了多个inset box-shadow。

三、jquery.guide.js小插件的语法和使用

9159.com 16

语法如下:

CSS

$.guide(options);

123456789

.card .image-wrap {-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}

其中, options 为数组,数组项为格式一致的包含提示信息相关参数的对象,这个对象统一的默认值为:

浮雕风格 (见 demo)

var defaults = {
  selector: '', 
  content: '', 
  align: 'center',
  offset: {
    x: 0,
    y: 0
  }
};

通过一点儿改变,我可以将卡片风格转换为浮雕。。。

使用时候类似这样:

9159.com 17

$.guide([{
  selector: '#target'
}]);

CSS

其中:

123456789

.embossed .image-wrap {-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}

•selector 表示需要镂空暴露的目标元素的选择器,如果该选择器可以匹配多个元素,则使用该选择去匹配的第一个元素作为目标元素;如果无法匹配元素,则整个这个参数对象会被忽略。
•content 表示镂空区域内额外显示的内容,可以是HTML字符串,也可以是jQuery包装器对象。
•align 表示显示内容的对齐方式,是左对齐居中对齐还是右对齐?可选关键字值包括: left , center , right . 其中 center 是默认值。
•offset 表示偏移的水平垂直距离, x 那是水平偏移位置,计算规则与 align 参数值有关, y 表示垂直偏移距离,其中 content 提示内容默认不是顶对齐,而是相对于镂空暴露的目标元素下边缘往上 5 像素对齐。

软浮雕风格 (见 demo)

眼见为实,demo页面走起,您可以狠狠地点击这里: jQuery小插件jquery.guide.js使用demo

和浮雕风格真的很像,我只是加了1px的虚化~~

demo页面共设置了 4 个提示元素,相关JS使用如下:

9159.com 18

<script src="./jquery.min.js"></script>
<script src="./jquery.guide.js"></script>
<script>
$.guide([{
  selector: '.logo',
  content: '<img src="guide-1.png">',
  align: 'left'
}, {
  selector: '.ad img',
  content: '<img src="guide-2.png">'
}, {
  selector: '#back',
  content: '<img src="guide-3.png">',
  align: 'left'
}, {
  selector: '.demo img',
  content: '<img src="guide-4.png">'
}]);
</script>

CSS

本demo页面为了演示方便,做了特殊处理,每次刷新都会显示提示效果。实际使用的时候是不会有这样的问题的,只会显示一次,无需担心。

123456789

.soft-embossed .image-wrap {-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);-moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}

9159.com 19 

剪贴画风格(见 demo)

四、结束语

同样只是inset box-shadow,我可以让它看起来像剪贴画。

并不是什么了不起的东西,就不放在github上了,如果大家有幸捧场使用,遇到什么问题,欢迎评论的形式进行反馈。

9159.com 20

CSS

123456789

.cut-out .image-wrap {-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}

变形和发光 (见 demo)

这个例子中,我为图片外容器增加了变形。mouseover的时候,它将从圆角形状变为圆形,然后增加了发光效果。发光效果通过多重box-shadow实现。

9159.com 21

CSS

12345678910111213141516171819

.morphing-glowing .image-wrap {-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}.morphing-glowing .image-wrap:hover {-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);-webkit-border-radius: 60em;-moz-border-radius: 60em;border-radius: 60em;}

发光遮罩 (见 demo)

发光渐变遮罩是通过:after伪元素实现的。。。

9159.com 22

CSS

1234567891011121314151617181920212223242526

.glossy .image-wrap {-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}.glossy .image-wrap:after {position: absolute;content: ' ';width: 100%;height: 50%;top: 0;left: 0;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);}

倒影 (见 demo)

这个例子中,我将遮罩渐变移动到底部,于是它就成了倒影。。。

9159.com 23

CSS

123456789101112131415161718192021222324

.reflection .image-wrap:after {position: absolute;content: ' ';width: 100%;height: 30px;bottom: -31px;left: 0;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-topleft: 20px;-moz-border-radius-topright: 20px;border-top-left-radius: 20px;border-top-right-radius: 20px;background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);}.reflection .image-wrap:hover {position: relative;top: -8px;}

光泽和倒影(见 demo)

这个例子中,我同时使用了:before和:after伪元素来实现带倒影的光泽效果。

9159.com 24

CSS

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

.glossy-reflection .image-wrap {-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}.glossy-reflection .image-wrap:before {position: absolute;content: ' ';width: 100%;height: 50%;top: 0;left: 0;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);}.glossy-reflection .image-wrap:after {position: absolute;content: ' ';width: 100%;height: 30px;bottom: -31px;left: 0;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-topleft: 20px;-moz-border-radius-topright: 20px;border-top-left-radius: 20px;border-top-right-radius: 20px;background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);}

胶带风格(见 demo)

这里使用了:after伪元素来在图片顶部实现了胶带风格的渐变。

9159.com 25

CSS

123456789101112131415161718192021

.tape .image-wrap {-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);}.tape .image-wrap:after {position: absolute;content: ' ';width: 60px;height: 25px;top: -10px;left: 50%;margin-left: -30px;border: solid 1px rgba(137,130,48,.2);background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);}

变形和着色 (见 demo)

在下面的这个例子中,我用了 :after元素来在mouseover的时候添加发光渐变。

9159.com 26

CSS

1234567891011121314151617181920212223242526272829303132333435363738

.morphing-tinting .image-wrap {position: relative;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}.morphing-tinting .image-wrap:hover {-webkit-border-radius: 30em;-moz-border-radius: 30em;border-radius: 30em;}.morphing-tinting .image-wrap:after {position: absolute;content: ' ';width: 100%;height: 100%;top: 0;left: 0;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;-webkit-border-radius: 30em;-moz-border-radius: 30em;border-radius: 30em;}.morphing-tinting .image-wrap:hover:after {background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);}

羽化边缘的圆形(见demo)

发散渐变也可以用作遮罩层来实现圆形羽化效果。

9159.com 27

CSS

12345678910111213141516171819

.feather .image-wrap {position: relative;-webkit-border-radius: 30em;-moz-border-radius: 30em;border-radius: 30em;}.feather .image-wrap:after {position: absolute;content: ' ';width: 100%;height: 100%;top: 0;left: 0;background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);}

浏览器支持

本文的方法可以在支持border-radius、box-shadow、:before和:after伪元素的浏览器上,比如Chrome/Safari/Firefox等,而在一些落后的浏览器比如IE9(包括IE9)则不能完全支持——IE6/7/8没有任何表现,IE9会有普通的圆角。

发挥你的创造力

正如你看到的,你几乎可以使用:before和:after伪元素实现任何效果。如果你有用CSS3实现更多的创意图片效果,欢迎通过评论与大家分享。

PS,本文中使用:before/:after来实现伪元素,其实我更建议使用双冒号来实现,虽然单冒号有更多的浏览器支持,但是对于这些CSS3实现的效果来说,双冒号更安全一些。更多的原因,可以参考《:before和::before的区别》

本文由9159.com发布于前端,转载请注明出处:然后上周五我去,专门用来实现黑色半透明遮罩

关键词:

上一篇:没有了
下一篇:没有了