html倒影样式 在线,CSS3|倒影
本文主要内容
1. CSS3 倒影简介
2. CSS3 倒影语法
3. CSS3 倒影基本用法
1 CSS3 倒影简介
除了前文所提及的,CSS3还新增了Reflections板块,即允许CSS3进行设计倒影,我们完全可以在不使用PS的情况下,通过代码在WEB端实现。但是, CSS3-reflections目前仅获得webkit引擎的支持,我们只能在谷歌与Safari浏览器中使用。但是别灰心,在未来必然会适用于更多的主流浏览器。
2 CSS3 倒影语法
语法:
box-reflect:none | ?
none:此值为box-reflect默认值,表示无倒影效果;
direction:此值表示box-reflect生成倒影的方向,主要包括以下几个值:
above:表示生成的倒影在对象(原图)的上方;
below:表示生成的倒影在对象(原图)的下方;
left:表示生成的倒影在对象(原图)的左侧;
right:表示生成的倒影在对象(原图)的右侧;
offset:用来设置生成倒影与对象(原图)之间的间距,其取值可以是固定的像素值,也可以是百分比值,如:
使用长度值来设置生成的倒影与原图之间的间距,只要是CSS中的长度单位都可以,此值可以使用负值;
使用百分比来设置生成的倒影与原图之间的间距,此值也可以使用负值
mask-box-image:用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像。
3 CSS3 倒影基本用法
3.1 图片倒影:
下面的示例定义一个简单的倒影样式,倒影的位置我们可以根据实际情况来设置,此处倒影为图片下方。效果图如下:
HTML5学堂(码匠)- CSS倒影基本用法
CSS:
img {
width:200px;
height: 200px;
-webkit-box-reflect:below;
}
ps: 如果倒影在图片上方,且没有预留一定的空间,将无法看见。我们可以给父级设置一个pading-top值便可见。
为倒影设置边距:
边距offset取值可以是长度值(px、em或rem),也可以是百分比,还可以是负值
我们在上面的基础上继续改进,为倒影设置距离,向下偏移10像素,效果图如下:
HTML5学堂(码匠)- CSS倒影基本用法
改动的css代码:
-webkit-box-reflect: below 10px;
可以给倒影设置方向和间距之外,还可以设置遮罩效果。一是添加倒影的渐变效果,(如果对CSS3渐变没有了解的可以在公众号中搜索关键字便有详细介绍),二是遮罩层效果。
接下来继续进行改进,设计CSS3渐变倒影,通过渐变遮罩逐渐盖住下面的倒影,制作出渐隐效果。
3.2 渐变效果:
HTML5学堂(码匠)- 渐变效果
HTML5学堂(码匠)- 渐变效果
3.3 遮罩层效果:
HTML5学堂(码匠)- 遮罩层效果
HTML5学堂(码匠)- 遮罩层效果
ps: 用于遮罩的图片必须是png格式图片。给生成的倒影添加遮罩效果的时候,如果没有设置显式的间距offset将会让box-reflect失效。也就是说,当box-reflect属性中的mask-box-image属性值出现时,必须显式的设置offset值,如果不需要间距,将其设置为0。
3.4 文字倒影
当然,我们除了可以通过图片设置倒影,也可以为网页上的任何对象设置倒影,下面做个文字本倒影的例子。
HTML5学堂(码匠)- 文字倒影
代码如下:
HTML5学堂(码匠)- 文字倒影
与图片倒影的初始情况相同,大家可以根据相关参数进行具体设置。
小结:
CSS3倒影并不仅仅局限于图片及文本,网页中的所有对象都可以设置,灵活运用渐变知识可以做出惊人的效果,但CSS3倒影属性目前仅在webkit内核的浏览得到支持。希望本篇文章能给大家带来帮助。
html倒影样式 在线,CSS3|倒影相关推荐
- html怎么给图片加倒影,通过一张图教会你CSS3倒影的实现
前言 本文主要给大家介绍了关于CSS3倒影实现的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 效果图如下: 示例图片 在CSS3之前,想要实现示例图片这样的一个倒影效果一 ...
- 在线CSS3压缩美化格式化
在线CSS3压缩美化格式化 在线CSS3压缩美化格式化 本工具可以将压缩的CSS,CSS3代码美化格式化显示,也可以将格式化的CSS代码压缩成单行减小文件体积.支持下载 层叠样式表是一种用来为结构化文 ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- 三款在线css3样式生成工具
http://jquery.org.cn/css/css3preview/Box-Shadow.html http://css-tricks.com/examples/ButtonMaker/ htt ...
- html5样式表,CSS3+HTML5_css,css3,html5,html5教程_html5,css,css3-站长之家
CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不应该用在 ...
- html滚动条样式自定义,CSS3自定义滚动条样式
CSS3对于滚动条也做了特别支持,可惜目前只有webkit内核的支持比较好,IE支持不完全,详细兼容性请查看http://caniuse.com/#search=scrollbar. 主要有7个属性: ...
- 伪类::selection自定义文本选中时的样式(CSS3样式),CSS3的word-break单次换行
1.::selection CSS3伪类自定义文本选中时的样式 有的人在浏览网页时,喜欢一边选中文本一边阅读.在windows环境下,正常的文本选中应该是深蓝色背景白色文本的样式.那么想要修改文本选中 ...
- html css工资条样式,JS+CSS3交互式拖动滑块选择工资条代码
一款JS+CSS3交互式拖动滑块选择工资条代码,可以托工工资下面的滑块来实时改变工资的数值大小,除了数字变化的同时还有一个颜色的平滑变化,当数值到最大值时,有一个文字的摆动动画特效. 查看演示 下载资 ...
- CSS文本样式和CSS3文本效果以及背景
CSS文本样式 text-indent属性 text-indent属性可以为特定选项的文本进行首行缩进,取值可以是长度值或百分比,它的属性值通常使用em作为单位,text-indent: 2em;表示 ...
最新文章
- 核磁共振影像数据处理-1(下)-DWI基础、Li‘s have a solution and plan.
- python 笔记 之 sqlalchemy操作数据库-创建表
- ad用户和计算机的使用方法,AD技巧之指定用户登录和指定计算机登陆
- linux中if的作用域,【2017-02-21】分支语句if...else...、分支嵌套、变量的作用域
- 对于读取PDF模板表单,中文无序问题
- Oracle10g的flashback drop
- 第三章 处理机调度与死锁
- VTK:几何对象之OpenVRSphere
- [转]jQuery Validate使用说明
- bootstrap文件不能被识别_如何使用npm安装bootstrap
- AD数据库的备份与还原
- 快速集成iOS基于RTMP的视频推流
- ajax存储表单数据,使用ajax json将表单数据存储到数据库php
- MATLAB+simulink仿真学习
- 22计算机408考研—数据结构—线性表、栈、队列、数组
- python如何设计一个排队系统
- 薛兆丰·北大经济学课
- 【校园卡】2020校园卡最近消息,电信联通默认都增加10G全国流量
- cb.conjunction()的意思
- 27岁,今年研究生上岸,有什么忠告可以给我的?
热门文章
- jxl和poi读取excel出现日期变成数字的问题的查因及解决jxl和poi读取各种日期格式的验证和对比
- 再穷也要出去旅行,再累也要有自己的生活
- 借助Service Worker和cacheStorage缓存及离线开发
- 【整理】屏幕色彩与分辨率区别,PPI的概念,IPS屏与TFT屏
- Photoshop-填充和描边
- 软件设计师备考笔记(十六)UML建模及习题
- 浅谈PHP遍历数组之for循环语句
- Visual Studio 2017 Installer Projects
- python题目及答案追查车号_学会根据错误追查问题,解决问题
- android settext方法,android-如何区分用户输入和TextWatcher中的setText方法?