如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。
我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度倾斜的阴影效果来模拟。
用CSS3的伪元素实现这个效果很容易。
先给出一个实例,我们在WOW站点页面左边栏实现了如下的效果(红框内):
我们再来看看具体实现。
首先创建一个div元素容纳文本信息(可以包含更多元素),class取名为“狗耳朵”也就是卷角的意思:
<div class="dog-eared-tip">put your tips here</div>
然后编写如下的CSS代码:
.dog-eared-tip{ padding: 7.5px 5px 7.5px 20px; background: #DEAA2F; font-size: 13px; position: absolute; text-align: center; width: 100%; color: black; } .dog-eared_tip:before, .work_tip:after { content: ""; position: absolute; z-index: -2; -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); bottom: 15px; box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); height: 50%; left: 10px; max-height: 100px; max-width: 300px; width: 50%; } .dog-eared_tip:after { -moz-transform: rotate(3deg); -webkit-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); left: auto; right: 10px; }
上面的代码首先设置了div的常用样式如底色、字体、居中、边距等。
然后为该div的:before和:after伪元素设置框阴影(box-shadow)和小角度旋转(rotate方法),
并把before和after的位置放在div的底部,并且z序列为负数,这样的实际效果就是伪元素本身被div所遮挡,但是刚好使得其外围阴影部分露出底部。
注意,这里请记得不要给div设置overflow不可见的样式,否则阴影不可见。
基本上好了,还差最后一步,两边阴影的倾斜度在物理学上是对称的,所以我们还需要调整一下:after伪元素的倾斜角度(-3°调整为3°)。
这样:before对应于标签的左下边角,:after对应于标签的右下边角的卷曲阴影。
本例在IE11/Chrome/FF/Edge下可以工作。
你还可以使用CSS3中的伪类:hover和transition属性,在本例基础上添加鼠标悬停效果,
也就是当用户悬停在书页上时,呈现卷角被缓缓抚平的效果,我们把这个称之为“会呼吸的纸”。
具体可参考WOW首页的实现。
最新评论
- 相关文章
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
常用光照类型基本概念工作原理及其计算公式
在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...
Blender2.7给平面模型添加纹理贴图
在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...
深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...Three.js入门教程4 - 创建粒子系统动画
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
Three.js 开发基础知识 - 绘制3D对象
Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...
更多...