[html] view plain copy
<div class="dog-eared-tip">put your tips here</div>
然后编写如下的CSS代码：
[css] view plain copy
.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属性，在本例基础上添加鼠标悬停效果，
也就是当用户悬停在书页上时，呈现卷角被缓缓抚平的效果，我们把这个称之为“会呼吸的纸”。
1. Pro HTML5 Programming
作者：Peter Lubbers, Brian Albers, Frank Salim
这本书适合有丰富编程经验的Web应用开发者。换言之，我们不会在这本书中介绍互联网发展的基础知识。这本书中有许多现成的资源可以加快学习Web编程原理。
2. HTML5 Up and Running
作者：Mark Pilgrim
书中的8个重点主题：
新的元素，如<Header>，<footer>和<section>（第3章）
Canvas元素，使用 JavaScript 在网页上绘制图像。（第4章）
-你可以在网页中嵌入视频，而不使用第三方插件（第5章）。
Geolocation，借助它，浏览者可以在你的Web应用中分享自己的地理位置（第6章）。
永久的本地存储，而不用使用第三方插件（第7章）。
离线Web应用，即使网络中断也能工作（第8章）。
HTML网页窗体的改进（第9章）。
Microdata，让你创造属于自己的词汇表，并使用自定义的语言来扩展你的网页。（第10章）
3. HTML5 Canvas: For Games and Entertainment
作者：Rob Hawkes
关于作者：Rob Hawkes擅长通过代码解决问题。他沉迷于可视化编程，而不仅仅局限于HTML5以及其他令人兴奋的Web新功能的研究。
4. The essential guide to HTML5
作者：Jeanine Meyer
这本书适合那些想通过HTML5建立充满活力、令人兴奋的网站的开发者。如果你了解编程的相关知识，并希望知道HTML5能带给你什么，或者你没有任何编程经验，这本书都很适合你。这本书将展示HTML5的新功能和神秘的编程艺术。编程是一门艺术，而开发有趣的游戏和其它应用程序则需要天赋。
5. Sergey’s HTML5 &CSS3 Quick Reference
作者： Sergey Mavrody.
这本书是适合于专业网页设计师和开发人员的技术字典，它总结了超过3000页的HTML5和CSS3规则，涵盖了最常见的基本概念和规则，包括标签、属性、值、对象、属性、方法、事件和API。
主题包括：
HTML 5介绍。
HTML5和XTML5语法规则。
文档的语义结构。
HTML5元素、属性、Web 2.0的完整参考。
全局属性和事件。
一个完整的CSS3属性总结。
HTML5 API，包括Canvas、SVG、Video、Audio、Web Workers、Web Sockets、Microdata、Geolocation和Web Stroage等。
6. HTML5 for Dummies
出版社：Wiley Publishing Inc
HTML是网页制作的首选编程语言，而HTML5拥有全新的特性。从本书中你会了解丰富的媒体应用、地理位置、数据库、移动能力、CSS和JavaScript的新应用，以及如何使用新的canvas标签。
本书概览：
浏览器支持的新工具。
媒体原理，包括视频标签。
CSS中附加的伪类。
新的表单输入类型。
如何添加阴影和丰富多彩的形状。
创建Web套接字连接的提示。
Web工作者如何提高工作效率。
创建动画的步骤。
7. HTML5 Canvas
作者：Steve Fulron 、Jeff Fulron
HTML5 Canvas，为开发者提供了在普通的Web浏览器中使用常用的HTML和JavaScript创造动画图形的机会。Canvas是HTML5的最明显的特性之一，它提供了极大的视觉效果和交互性。然而，它不同于典型的JavaScript、Flash、Silverlight开发，需要认真的去探索！
本书分为11章，前四章，主要通过实例介绍HTML Canvas API，所涵盖的主题包括文本、图像和绘图。接下来的六章主要介绍了Canvase API的扩展应用，在这些章节中，我们讨论了数学和物理的应用、视频、音频、游戏和移动应用。最后一章介绍了3D和multiplayer的实验领域。
