使用CSS3制作文字、图片倒影
umzs2008-06-20 18:14:53次浏览
CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在Chrome、Safari和Opera浏览器下支持,但这并不影响我们来学习这个属性的应用。
box-reflect语法:
box-reflect:none |
默认值:none
适用于:所有元素
继承性:无
由于此属性并不是W3C标准属性,在具体使用之时,还是需要添加浏览器的私有属性,根据浏览器的兼容性,使用box-reflect时需要添加-webkit和前缀:
-webkit-box-reflect:none |
box-reflect:none |
取值:
none:无倒影
above:指定倒影在对象的上边
below:指定倒影在对象的下边
left:指定倒影在对象的左边
right:指定倒影在对象的右边
none:无遮罩图像
图片倒影:
假设我们需要给一张图片做倒影效果,其结构其实非常简单:
使用CSS3制作图片倒影
根据前面的语法介绍,要让倒影在对象的右侧,我们只需要给box-reflect属性取值为right即可:
.box-reflect img {
-webkit-box-reflect: right;
box-reflect:right;
}
效果如图:
使用CSS3制作图片倒影
文字倒影:
要让倒影在对象的下方,我们只需要给box-reflect属性取值为below即可:
-webkit-box-reflect: below;
box-reflect: below;
记录·回忆
特别提示:在此示例中,我们没有为倒影提供了一个空白区,所以下面这一行就占据了位置,要解决这个问题,就得提供一个空白区域出来,使用margin:margin:20px 0;
记录·回忆
倒影与对象之间的间距:
了解完生成倒影的方向之后,我们一起来看第二个属性值
随便拿一个示例来说做演示,假设对象生成的倒影在底部,而且需要让生成的倒影离自身有一个20px的间距,此时我们只需要这样做:
.box-reflect img {
-webkit-box-reflect: right 20px;
box-reflect:right 20px;
}
效果如图:
使用CSS3制作图片倒影
给倒影添加遮罩效果:
左右倒影:
-webkit-box-reflect: left 1px -webkit-gradient(linear, 0% 100%,100% 100%,from(rgba(255,255,255,0)), to(white));
-webkit-box-reflect: right 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,0)), to(white));
上下倒影:
-webkit-box-reflect: above 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,0)), to(white));
-webkit-box-reflect: below 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,0)), to(white));
字体倒影:
-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));
文字渐变+倒影:
-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));
background: -webkit-linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
-webkit-background-clip: text;-webkit-text-fill-color: transparent;
Tags:
上一篇:三步实现滚动条触动css动画效果
相关文章
随机图文
-
10个常见W3C标准验证失败原因分析
W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错。验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能。下面十个细微 -
建站流程篇——教你如何快速学会做网站
如果你没有任何的建站基础,你想做一个网站,那么认真按照下面步骤操作,一小时内你就可以做出一个网站来。现在建一个网站对于新手来说,其实也是非常简单而且低成本的事情了。因为现在有大量开源免费的网站程序可以免费下载使用,就空间和域名一点钱,空间和域名加起来一年大概在200到400左右就可以做一个个人网站。 -
Come on,行动起来吧!我们和时间来一场赛跑!
"时间过得那么飞快,使我的小心眼儿里不只是着急,还有悲伤.有一天,我放学回家,看到太阳快落山了,就下决心说:"我要比太阳更快地回家."我狂奔回去,站在庭院前喘气的时候,看到太阳还露着半边脸,我高兴地跳跃起来 -
CSS3 Maker 在线生成代码
CSS3 Maker提供了10个最为常用的CSS3属性在线生成工具,比如说border-radius、gradient、transfrom、animation、transition、rgba、text-shadow、box-shadow、text rotation和@font-face。