《精通CSS》读书笔记2
来源:互联网 发布:诺基亚c7 00软件下载 编辑:程序博客网 时间:2024/04/28 14:10
第四章 背景图像效果
一.背景图像基础
渐变的实现
二.圆角框
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
- 《精通CSS(第2版)》读书笔记2
- 《精通CSS(第2版)》读书笔记1
- 精通Hibernae读书笔记2
- 精通CSS高级Web标准解决方案【读书笔记】
- 精通css(2)-选择器
- 精通CSS(2)-布局
- 《精通CSS与HTML设计模式》读书笔记2——盒模型
- 读书笔记《精通CSS高级Web标准解决方案》(第2版)-1
- 读书笔记 精通CSS 高级Web标准解决方案(第2版)1~3章
- 读书笔记 精通CSS 高级Web标准解决方案(第2版)4~8章
- 读书笔记 精通CSS 高级Web标准解决方案(第2版)第9章
- 精通CSS--高级WEB标准解决方案(第一章)-------读书笔记
- 精通CSS:高级web标准解决方案之读书笔记(一)
- 读书笔记--精通CSS高级Web标准解决方案(八)---布局
- 精通CSS:高级web标准解决方案之读书笔记(二)
- 读书笔记--精通CSS高级Web标准解决方案(二)---CSS基础之CSS选择器
- Html+Css 纯CSS实现的导航 (精通CSS高级WEB解决方案)读书笔记
- openstack启动linuxbridge_agent服务报错 'LinuxBridgeNeutronAgentRPC' object has no attribute 'plugin_rpc'
- poj2777 Count Color(线段树)
- C++11特性:右值引用与move语义
- qcom adsp sensor
- 静态内容实现缓存的七种不同方法
- 《精通CSS》读书笔记2
- 跳坑《一百五十一》使用第三方编辑器(IDE)开发
- [树上莫队] SPOJ COT2 Count on a tree II
- 文章标题
- 2017暑期实习总结
- 最短路练习13/poj/1847 / Tram/floyd解法;memset用0x3f初始化详解
- NYOJ 1276 机器设备(第九届河南省ACM,BFS)
- css相对定位
- 树状数组