js新版上线操作率领镂空提醒jQuery插件,腾讯微云褐色遮罩教导蒙版更好的CSS完结格局

腾讯微云青色遮罩指引蒙版更好的CSS完毕格局

2016/03/08 · CSS · 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
    属性已毕的,由此不扶助圆角,若是您想完成类似下图的效益:

亚洲必赢官网 1 

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

亚洲必赢官网 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页面为了演示方便,做了非凡处理,每一趟刷新都会显得提醒成效。实际行使的时候是不会有这么的题材的,只会来得五遍,无需担心。

亚洲必赢官网 3js新版上线操作率领镂空提醒jQuery插件,腾讯微云褐色遮罩教导蒙版更好的CSS完结格局。 

四、结束语

并不是何许了不起的东西,就不放在github上了,如果大家有幸捧场使用,蒙受怎么着难点,欢迎评论的款式开展报告。

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

直白在图纸元素上直接使用CSS3 inset box-shadow 或
border-radius时,浏览器并无法到家的渲染它们。可是,即使把这几个图形作为背景图,你就足以可以给它助长任何样式了,浏览器也会很好地渲染。达茜Clarke和自己做了一个简单易行的科目,讲解怎么着使用jQuery来动态地创制完美的圆角图片。今日自家将重温那一个主旨然后向你显得使用background-image的艺术可以兑现多少效益。我将向你体现什么使用box-shadow、border-radius
和 transition 来撰写不一致的图形风格。

一、微云的完成

网站有一对变更的时候,为了让用户熟习新的操作地方,往往会增添一个指引,常见的不二法门就是运用一个黑色的半透明蒙版,然后须要关爱的区域是雕刻的。

然后前七天五我去微云旋转的时候,也看看了率领层,于是职业病又犯了,去上学下外人是怎么落到实处的。上边是观看的结果:

为了促成镂空蒙层效果,小编公布了童年拼积木的才能,使用两层HTML结构,内层使用5块独立区域拼接形成,至于中档镂空的区域的黑影则是使用的图纸完成的。

亚洲必赢官网 4

亚洲必赢官网 5

即便如此最后的效应满足了成品的须要,对于用户而言,目标已经落成。不过,从代码质量层面、潜在的经验提高可能性、使用情形广度上来讲,照旧弱了广大的。

举例来说来说,如若咱们某个提示区域面积很大,那中间的足够镂空区域尺寸是还是不是要变,那后边的背景图片如何是好?搞新图,有人看到了利用了background-size:cover,
那IE7,IE8如何做?哦,可能微云不需求管IE7, IE8.

一旦不必要管IE7,
IE8,那那里的落到实处就显得越发小白了。大家其实只需要一层标签,一层空标签就可以达成大家的功用,且不需求图片。

网站上线或者改版的时候,日常会做一个操作指导,告诉用户一些重中之重操作到了何地,或者如什么位置方隐藏了怎么好玩的东西,等等,纵然本人都是直接关闭的,或者高速跳过,不过对有局部用户而言依旧很有用的。

先看下demo

二、我的兑现

敬爱在于思维方法的变动。拼积木那种想法大家都相比易于想到,符合普通认知,可是,但代码层面,大家可以开展考虑转换,发散思考,偌大的半透明遮罩层,大家不要老想着背景象块背景观块,能够突破常规思维,把它认为是边框,一个很大很大的边框(我们向来利用border都是1像素巨多),这样,大家自然就有了镂空效果。

如下图示意:
亚洲必赢官网 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完结的,而微云的图片方法,分明是心有余而力不足有动画的。

亚洲必赢官网 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使用的那个图片长上面那样:
亚洲必赢官网 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页面看下伪元素的代码,真实区域大小和终极效果,估量就会了解了。

感谢阅读,欢迎互换,欢迎提供更好的落到实处方式,一定有的,只是自我功力不够。

以上~

亚洲必赢官网 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
    评论

亚洲必赢官网 10

自我在上年的时候曾经写了一篇小说,名为“
腾讯微云粉色遮罩引导蒙版更好的CSS完成方式”,介绍怎么着运用单标签,已毕类似的互相成效,其中,主题技术是利用了CSS
border 属性,也就是周围的褐色半晶莹剔透遮罩实际上是半晶莹剔透边框。

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

后来本身意识了一种更好的落到实处格局,就是采取CSS outline 属性, outline
属性为要素的轮廓,并不会增多其余因素的尺寸,也不会毁掉原先的布局,由此我们只必要设一个不行可怜大的
outline
宽度值,大家永恒元素就永远天然镂空,根本不必要总括上下左右的半透明褐色区有多大。

亚洲必赢官网 11

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

解决方案

目前正巧有个改版项目有接近的必要,我要基于那么些原理顺便整了一个jQuery插件,名为jquery.guide.js,专门用来促成粉灰色半晶莹剔透遮罩镂空提示引导效应。

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

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

亚洲必赢官网 12

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

动态方法

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

要想动态达成,可以简单的利用jQuery为各类图片元素外面包一个背景图片。上边的jQuery代码会将持有图片外面包一个span标签然后将图纸用作其背景图片(jQuery代码由DarcyClarke编写)。

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代码:

亚洲必赢官网 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)

亚洲必赢官网 14 

今昔,图片被看成背景图了,你可以给它丰硕任意你想要的样式上去。下边是一个简易的行使border-radius完毕的圈子图片。假若你对CSS3不太领会,可以翻阅下Basics
of CSS3,也足以找寻一下前端观望。

正如源代码中的注释所言,如果想协助圆角,注释上边的 outline
,松开上面两行 box-shadow 和 border-radius 的笺注就足以了。

亚洲必赢官网 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小插件的语法和利用

亚洲必赢官网 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
  }
};

通过个别改动,我得以将卡片风格转换为浮雕。。。

采取时候类似那样:

亚洲必赢官网 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使用如下:

亚洲必赢官网 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;}

亚洲必赢官网 19 

剪贴画风格(见 demo)

四、结束语

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

并不是哪些了不起的事物,就不放在github上了,如若大家有幸捧场使用,境遇怎么着难题,欢迎评论的款型开展反映。

亚洲必赢官网 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完毕。

亚洲必赢官网 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伪元素落成的。。。

亚洲必赢官网 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)

其一例子中,我将遮罩渐变移动到底层,于是它就成了倒影。。。

亚洲必赢官网 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伪元一直贯彻带倒影的光柱效果。

亚洲必赢官网 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伪元一直在图纸顶部完结了胶带风格的渐变。

亚洲必赢官网 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的时候拉长发光渐变。

亚洲必赢官网 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)

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

亚洲必赢官网 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的界别》

网站地图xml地图