用CSS3和HTML5五步打造便签效果（2）
发布时间：2012-04-25 20:47:51
标签：css3,html5,便签
通过该方法，我们得到了一行简单的HTML代码，然后将其放到页面中去。所有浏览器都支持这种网络替换字体的方式。
然后设置便签的内边距（padding），为便签的文字段落换上最新的字体。注意：为了便于阅读，Reenie Beanie字体尽量要设置大一点。
为了让便签在页面中突出显示，需要为它添加投影，这时我们要用到框投影（box-shadow）。为了该样式正确显示，我们必须为每一个想要显示该效果的浏览器添加一行代码（见下面代码所示）。
好在每一个浏览器所需要的狂投影效果不变，语法也就不变：偏移量，阴影扩展量，颜色值。深灰色的不透明度值设为70％。添加新字体之后的便签效果如下图：
第三步：倾斜便签
声明：这一步中将要实现的倾斜效果和下一步的放大效果在Zurb的文章已经做过解释，但是这两个效果并不是在所有浏览器中都生效，因为在写那文章时，他们并没有过时。所以非常感谢他们分享这些技巧。
为了实现倾斜效果，你需要用到CSS3中的transform当中的旋转属性（transform:rotate），在该属性前面添加支持该效果的浏览器前缀：
所有框都向左倾斜6度（即：rotate（-6deg））。接下来，通过CSS3对中的nth-child属性对便签进行随机倾斜。
0
投稿猜你喜欢
- 链接中的例子是一些脚本攻击相关的内容，有时间的朋友可以点开看看。 1.不要相信Request.QueryString: 相信在asp时代，这
一、设置画布turtle为我们展开用于绘图区域，我们可以设置它的大小和初始位置turtle.screensize(canvwidth=600- PyTorch中实现卷积的重要基础函数1、nn.Conv2d:nn.Conv2d在pytorch中用于实现卷积。nn.Conv2d( &nb
- mysql实现sequence功能1.建立sequence记录表CREATE TABLE `sys_sequence` ( `seq_nam
- 1、最优化与线性规划最优化问题的三要素是决策变量、目标函数和约束条件。线性规划（Linear programming），是研究线性约束条件下
- 什么情况下用响应缓冲会提高运行速度？例1、脚本引擎与 HTML 之间的切换频繁，对响应流写操作太多，导致性能下降：<table>
- 1、余弦相似度余弦相似度衡量的是2个向量间的夹角大小，通过夹角的余弦值表示结果，因此2个向量的余弦相似度为：余弦相似度的取值为[-1,1]，
- 目录1. 什么是turtle2. turtle例子3. 其他turtle功能4. 更多的例子5. 总结6. 参考资料1. 什么是turtle
- 前言最近在开发行为验证码，经常触及到关于验证类型的相关内容。但使用起来不太熟练，闲暇之余，总结一下我对行为验证码验证类型的理解。验证类型概述
- 近些年随着Python语言越来越流行，越来越多的人选择Python语言作为自己的职业方向。如何在心仪公司的面试中获得好成绩，并最终成功获得o
- 一、Pyecharts简介和安装1、简介Echarts 是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的
- 一.多表关系MySQL多表之间的关系可以概括为:一对一、一对多/多对一关系，多对多一对一关系一个学生只有一张身份证;一张身份证只能对应一学生
- 前言go 当中的并发编程是通过goroutine来实现的，利用channel（管道）可以在协程之间传递数据，实现协程的协调与同步。使用新建一
- 一、Position1、语法：position:static/ absolute / fixed / relative2、参数：（1）sta
- 1. 可选链从 v3.7 可用这是当你尝试访问嵌套数据时的一个痛点，嵌套数据越多，代码就会变得越繁琐。在下面的例子中，要访问address，
- 中文繁体、简体的差异，在NPL中类似英文中的大小写，但又比大小写更为复杂，比如同样为繁体字，大陆、香港和台湾又不一样。先前写过一篇中文繁简转
- 本次内容主要是上周内容的延续，主要画出kitti车的行驶的轨迹同样的，我们先来看看最终实现的效果：视频接下来就进入一步步的编码环节。。。&n
- 前言defer是golang语言中的关键字，用于资源的释放，会在函数返回之前进行调用。一般采用如下模式：f,err := os.Open(f
- Python中的ctypes模块可能是Python调用C方法中最简单的一种。ctypes模块提供了和C语言兼容的数据类型和函数来加载dll文
- 在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。首先，我们对CSS作一个简单的说明：CSS是层叠样式表（Cascadi
