CSS3 倒影

CSS3属性在很大程度上替代了“原本通过PS操作设置”才能达到的效果,例如:CSS3蒙版、线性渐变、径向渐变等等。此类CSS3属性的出现,不仅降低了图片请求次数,也提升了开发效率。除了刚刚提到的这些CSS3属性之外,还有一个高逼格的效果 —— 倒影。

本文主要内容

1. CSS3 倒影简介

2. CSS3 倒影语法

3. CSS3 倒影基本用法

1. CSS3 倒影简介

除了前文所提及的,CSS3还新增了Reflections板块,即允许CSS3进行设计倒影,我们完全可以在不使用PS的情况下,通过代码在WEB端实现。但是, CSS3-reflections目前仅获得webkit引擎的支持,我们只能在谷歌与Safari浏览器中使用。但是别灰心,在未来必然会适用于更多的主流浏览器。

2. CSS3 倒影语法

语法:

  1. box-reflect:none | <direction> <offset> ? <mask-box-image>

none:此值为box-reflect默认值,表示无倒影效果;

direction:此值表示box-reflect生成倒影的方向,主要包括以下几个值:

above:表示生成的倒影在对象(原图)的上方;

below:表示生成的倒影在对象(原图)的下方;

left:表示生成的倒影在对象(原图)的左侧;

right:表示生成的倒影在对象(原图)的右侧;

offset:用来设置生成倒影与对象(原图)之间的间距,其取值可以是固定的像素值,也可以是百分比值,如:

使用长度值来设置生成的倒影与原图之间的间距,只要是CSS中的长度单位都可以,此值可以使用负值;

使用百分比来设置生成的倒影与原图之间的间距,此值也可以使用负值

mask-box-image:用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像。

3. CSS3 倒影基本用法

3.1 图片倒影:

下面的示例定义一个简单的倒影样式,倒影的位置我们可以根据实际情况来设置,此处倒影为图片下方。效果图如下:

CSS:

img {
    width:200px;
    height: 200px;    
    -webkit-box-reflect:below;
}


<img src="2017.1.23-1.jpg"/>

ps: 如果倒影在图片上方,且没有预留一定的空间,将无法看见。我们可以给父级设置一个pading-top值便可见。

为倒影设置边距:

边距offset取值可以是长度值(px、em或rem),也可以是百分比,还可以是负值

我们在上面的基础上继续改进,为倒影设置距离,向下偏移10像素,效果图如下:

改动的css代码:

-webkit-box-reflect: below 10px;

可以给倒影设置方向和间距之外,还可以设置遮罩效果。一是添加倒影的渐变效果,(如果对CSS3渐变没有了解的可以在公众号中搜索关键字便有详细介绍),二是遮罩层效果。

接下来继续进行改进,设计CSS3渐变倒影,通过渐变遮罩逐渐盖住下面的倒影,制作出渐隐效果。

3.2 渐变效果:

-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));

3.3 遮罩层效果:

-webkit-box-reflect: below 0 url(2017.1.23-2.png);

ps: 用于遮罩的图片必须是png格式图片。给生成的倒影添加遮罩效果的时候,如果没有设置显式的间距offset将会让box-reflect失效。也就是说,当box-reflect属性中的mask-box-image属性值出现时,必须显式的设置offset值,如果不需要间距,将其设置为0。

3.4 文字倒影

当然,我们除了可以通过图片设置倒影,也可以为网页上的任何对象设置倒影,下面做个文字本倒影的例子。

代码如下:

p {
    font-size: 24px;
    color: #39f;
    -webkit-box-reflect: below 5px;
}


<p>以匠人之心 –码出多彩程序人生</p>

与图片倒影的初始情况相同,大家可以根据相关参数进行具体设置。

小结:

CSS3倒影并不仅仅局限于图片及文本,网页中的所有对象都可以设置,灵活运用渐变知识可以做出惊人的效果,但CSS3倒影属性目前仅在webkit内核的浏览得到支持。希望本篇文章能给大家带来帮助。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2017-01-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端架构

第四代CSS选择器,那些让你激动的新特性(转)

英国的网络开发人员、作家以及演讲家Rachel Andre在Webdesigner Depot发表了文章《 CSS You Can Get Excited Ab...

632
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(六)响应式布局

1、固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。

612
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

701
来自专栏葬爱家族

Android高德之旅(4)我的位置

说到吃饭,最近刚开了一家...咳咳,说到位置定位,主要包含两部分,第一个是根据GPS获取经纬度,第二是根据经纬度获取省市区行政区划。先说第一个,使用过地图导航的...

461
来自专栏Flutter入门到实战

Android应用坐标系统全面详解

去年有很多人私信告诉我让说说自定义控件,其实通观网络上的很多博客都在讲各种自定义控件,但是大多数都是授之以鱼,却很少有较为系统性授之于渔的文章,同时由于自己也迟...

521
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

382
来自专栏互联网杂技

CSS伪元素的妙用--单标签之美

本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和伪元素。伪类...

32610
来自专栏前端说吧

小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏

3714
来自专栏用户2442861的专栏

关于CSS中background样式的repeat和no-repeat的坐标问题

http://blog.sina.com.cn/s/blog_98eef7830101cv8t.html

391
来自专栏IMWeb前端团队

CSS3的3D变换和动画

CSS3的3D变换 transform属性 attr des css level transform 向元素应用 2D 或 3D 转换。 3 ...

1806

扫描关注云+社区