《精通CSS》读书笔记2
第四章 背景图像效果
一.背景图像基础
渐变的实现
二.圆角框
1.固定宽度的圆角框
灵活圆角框：滑动门技术
需要四个图像：两个顶部图像组成顶部曲线，两个底部曲线组成底部曲线和框的主体
2.山顶角
想创建一系列具有不同颜色的圆角框，可以创建曲线型的位图角蒙版，蒙版区域盖住正在使用的背景颜色，而角区域是透明的，如图：
*角蒙版为位图，所以对于小曲线效果最好，大曲线会出现锯齿。
同样需要4个元素来应用4个角蒙版，CSS也很相似
1)多个背景图像
CSS3中，可使用任意数量的图像，如：
2)border-radius
设置边框角的半径即可
3)border-image
3.投影
1)简单投影
将一个大的投影图像应用于容器div的背景，然后用负的外边距偏移这个图像，从而显示投影。例如：
.img-wrapper {background: url(img/shadow.gif) no-repeat bottom right;clear: right;float: left;position: relative;margin: 10px 0 0 10px;
}
.img-wrapper img{
**margin:-5px 5px 5px -5px;**
display: block;
}
2)来自clagnut的投影方法
不使用负的外边距，而是使用相对定位来偏移图像。
3)box-shadow
CSS3中，这个属性需要4个值：垂直和水平偏移、投影的宽度和颜色。例如：
img{box-shadow:3px 3px 6px #666;}这个属性可以和border-radius相配合，在圆角框上创建投影而不需要图形软件。
4.不透明度
1)RGBa
同时设置颜色和不透明度，例如：设置不透明为0.8（值为0表示完全透明）
.alert{
background-color:rgba(0,0,0,0.8);
border-radius:2em;
}2)PNG透明度
PNG文件格式 支持alpha透明度。（有兼容性问题，IE6）
3)CSS视差效果
让用户感觉这个页面有深度，称为视差滚动。例如：
想实现这种效果，首先创建几个不同的背景图像：绿色背景上的藤蔓，另两个图像为alpha透明背景上的藤蔓，中景和前景可以相互覆盖并改在背景上，同时不会把视图弄模糊。
body{background-image:url(image/bg-rear.png);background-repeat:no-repeat;background-color:#d3ff99;background-position:20% 0;
}
.midground{background-image:url(/image/bg-mid.png);background-repeat:repeat-x;background-color:transparent;background-position:40% 0;
}
.foreground{background-image:url(/image/bg-front.png);background-repeat:repeat-x;background-color:transparent;background-position:150% 0;
}*水平调整窗口大小时，背景中的藤蔓以不同的速度移动，产生有深度的感觉。
5.图像替换
FIR
Phark
sIFR
第五章 对链接应用样式
一.简单的链接样式
链接伪类选择器（选择器的次序很重要，这是由层叠造成的，当两个规则具有相同的特殊性时，后定义的规则有限。）
二.让下划线更有趣
1.简单的链接修饰
2.奇特的链接下划线
可以把图像用于下划线，例如：
a:link,a:visited{
color:#666;
text-decoration:none;
background:url(/img/underline.gif) repeat-x left bottom;
}甚至可以为hover和active状态创建一个动画gif
*不是所有浏览器都支持背景图像动画，但是不支持的浏览器一般可以显示动画的第一帧以确保平稳退化。
3.已访问链接的样式
4.位链接目标设置样式
除了链接到特定的文档外，还可以使用包含片段标识符的链接链接到页面的特定部分，实现的方法是在href的末尾加一个#字符，例如：
<a href="http://example/com/story.html#comment3">a great comment by simon
</a>不过如果页面内容非常多时，很难看出链接把你转到了哪个元素，所以CSS3允许使用：target伪类为目标元素设置样式，例如：
.comment:target{
bockground-color:yellow;
}5.突出显示不同类型的链接
问题：很难看出链接是指向本站点的另一个页面，还是指向另一个站点。许多站点在新窗口中打开外部链接，太混乱，且新窗口不能使用后退按钮。
解决方法：在外部链接旁加上一个小图标，让用户自己选择去留
不过这个方法很麻烦，还可以使用[att^=val]属性选择器来判断是否为外部链接，例如：
a[href^="http:"]{
background:url(/img/externalLink.gif) no-repeat right top;
padding-right:10px;
}
如果愿意，还可以对邮件链接也进行突出显示，例如：
a[href^="mailto:"]{
background:url(img/email.png) no-repeat right top;
padding-right:10px;
}甚至可以突出显示非标准的协议，例如：
a[href^="aim:"]{
background:url(img/im.png) no-repeat right top;
padding-right:10px;
}<a href="aim:goim?screenname=andybudd">instant message</a>
也可以突出显示可下载的文档和提要，使用[attr$=val]属性选择器，它寻找一特定值（如.pdf或.doc）结尾的属性。
6.创建类似按钮的链接
锚为行内元素，这意味着只有在单机链接的内容时它们才会激活，但有时希望实现更像按钮的效果，有更大的可单击区域，为此，可以将锚的display属性设置为block，然后修改width，height和其他属性来创建需要的样式的单击区域。例如;
a{
display:block;
width:6.6em;
line-height:1.4;
text-align:center;
text-decoration:none;
border:1px solid #66a300;
background-color:#8cca12;
color:#fff;
}
*使用line-height，因为文本在行框中总是垂直居中的，所以用这个。如果用height，必须使用内边距将文本压低，模拟出垂直居中的效果。还要注意按钮中的文本的行数，调整来确定其尽量不换行。
1)简单的翻转
在鼠标悬停时设置链接的背景和文本颜色，从而实现简单翻转。（：hover）
2)图像翻转
使用背景颜色或图像。
缺点：第一次加载鼠标悬停时的图像会有短暂的延迟。
a:link,a:visited {display: block;width: 203px;height: 72px;text-indent: -1000em;background: url(img/button.png) left top no-repeat;
}a:hover，a:focus {background-image: url(img/button-over.png);
}a:active {background-image: url(img/button-active.png);
}
3)Pixy样式的翻转
上一个方法的缺点，解决方法是：不切换多个背景图像，而是使用一个图像并切换它的背景位置。
a:link,a:visited {display: block;width: 203px;height: 72px;text-indent: -1000em;background: url(img/button.png) -203px 0 no-repeat;
}a:hover,a:focus{
background-position:right top;
}a:active{
background-position:left top;
}
为了避免闪烁，需要将翻转状态应用于链接的父元素，例如包含它的段落。
p{
background:url(/img/buttons/png) no-repeat right top;}4)CSS精灵
大型网站建站，把所有图标甚至站点导航都包含在同一个图像中。
5)用CSS3实现翻转
使用text-shadow、box-shadow、border-radius等属性。
6)纯CSS工具提示
当鼠标悬停在具有title属性的元素上时浏览器弹出的小文本框。
a.tooltip{position:relative;
}
a.tooltip span{display:none;
}a.tooltip:hover span{display:block;position:absolute;top:1em;left:2em;
}
a.tooltip:hover span,a.tooltip:focus span{display:block;position:absolute;top:1em;left:3em;padding:0.2em 0.6em;border:1px solid #996633;background-color:#ff2366;color:#000;
}<p>
<a href="http://www.andybudd.com/" class="tooltip">andy budd<span>(this website rocks)</span></a> is a web developer based in
</p>
《精通CSS》读书笔记2相关推荐
- 全球通史读书笔记上（第六章——古代文明的新起）
一.印度文明 1. 哈巴拉文化消失的原因 (1)被雅利安人所破坏 (2)奴隶主阶级的沉重剥削. (3)过度砍伐森林,水土流失,生态失衡 2. (1)印度的楼兰--摩亨约·达罗(或为最早期的印度帝国) ...
- 全球通史读书笔记上（第七章——战争的起源）
一.梭伦改革 1.梭伦改革地点:希腊雅典.雅典在希腊文明史中扮演重要的角色.伯利克里:"雅典是全希腊的学校." 2.梭伦改革背景:公元前6世纪,雅典的奴隶制度确立.贵族成为特权阶层 ...
- 《全球通史》读书笔记2
关键问题似乎在于,在技术变革和使之成为必需的社会变革之间,存在一个时间差.造成这个时间差的原因在于:技术变革能提高生产率和生活水平,所以很受欢迎,且很快便被采用:而社会变革则要求人类进行自我评估和自我 ...
- 《全球通史》读书笔记1
这两天开始读斯塔夫理阿诺斯的<全球通史>第7版. 在推荐序里的一句话读了特别有感觉."--我们甚至依然在用别人的模式理解我们和整个世界的历史."我有时也在想,我们的历史 ...
- 读 L. S. Stavrianos 之 《全球通史：从史前到21世纪》
Leften Stavros Stavrianos, 吴象婴, 梁赤民. 全球通史:从史前到21世纪:第7版新校本.上册. ISBN: 978-7-301-26938-1. Leften Stavro ...
- 读书笔记｜如何让用户为你的产品尖叫
文/PM十二 编辑/李老太.小太阳 Hi各位小伙伴,最近新认识的一位从事编辑的小伙伴推荐了<用户思维+:好产品让用户为自己尖叫>,趁着周末把它读完了,因此今天要分享的是一篇读书笔记. ...
- 《精通Unix下C语言与项目实践》读书笔记（16）
<精通Unix下C语言编程与项目实践>读书笔记(new) 文章试读 不拘一个遍程序系列:编程序不能一个脑袋钻到底,有时要学会变通,即所谓的曲线救国.一.二.三.四 职场规划:一些杂七杂八 ...
- 第一篇读书笔记，关于UML和模式应用(1)--书籍简介
新添加了一个读书笔记分类,以后多写一些读书笔记吧.因为真的觉得自己技术太差了,写不出好文章了. 关于UML和模式应用(1)--书籍简介 Applying UML and patterns(Craig ...
- PMP读书笔记(第13章)
大家好,我是烤鸭: 今天做一个PMP的读书笔记. 第十三章 项目相关方管理 项目相关方管理 项目相关方管理的核心概念 项目相关方管理的趋势和新兴实践 裁剪考虑因素 在敏捷或适应型环境中需要考虑 ...
- PMP读书笔记(第12章)
大家好,我是烤鸭: 今天做一个PMP的读书笔记. 第十二章 项目采购管理 项目采购管理 项目采购管理的核心概念 项目采购管理的趋势和新兴实践 裁剪考虑因素 在敏捷或适应型环境中需要考虑的因素 ...
最新文章
- 为什么MySQL数据库要用B+树存储索引？
- 其他算法-SVD奇异值分解
- 分段函数是不是一定初等函数_查漏补缺问题64:一个含多参数分段函数的连续性与可导性讨论...
- bootstrap的滚动监听
- “我是技术总监，你干嘛总问我技术细节？”| 程序员有话说
- halcon write_ocr_class_svm 将OCR分类器写入文件
- Kubelet 源码剖析
- 14岁少年打赏主播6万多元 后称自己行为无效起诉火山小视频要求返还
- 自注意力机制_自注意力机制在计算机视觉中的应用【附PPT与视频资料】
- 蓝桥杯 ALGO-148 算法训练 5-1最小公倍数 java版
- 《机器学习实战》总结篇
- 使用CImageList的一点心得
- Matconvnet测试
- 教领导“做事”的新人，后来过得好吗？
- 2021-10-26 模电共射放大电路部分
- 庞加莱买面包的故事（二）
- 语句摘抄——第28周
- python判断是否有重复单词_Python判断两个单词的相似度
- HTML文件里开头的!Doctype有什么作用？
- 论文阅读：SO-Net: Self-Organizing Network for Point Cloud Analysis