标题:
响应式Web设计:使用HTML5和CSS3实践 (11)
[打印本页]
作者:
look_w
时间:
2019-2-18 19:10
标题:
响应式Web设计:使用HTML5和CSS3实践 (11)
第6章 用CSS3创造令人惊艳的美
一点小感受:总觉得自发的细致阅读一本书是很没有动力来源和成效的事情,因为没有应用到具体项目中,你不会想深究。目前所看的这些章节除了前三章外即时如此,其实只需要有个概念在脑袋中,真的用到的时候有搜索引擎在手然后就行了。急切想翻阅完毕要开始看Linux相关的书籍了~ 以下为第6章简略笔记:
使用CSS3可以替代图片减少http请求。
需要添加浏览器私有前缀来保证最大的浏览器兼容性,或者使用一些JavaScript,它会自动为CSS3追加浏览器私有前缀。
6.1 文字阴影
text-shadow: 1px 1px #cccccc; 参数分别表示右侧阴影大小,下侧阴影大小,模糊距离)。
颜色可以使用hex、hsl、rgb颜色。
大小可以使用px、em、rem。
还可以用逗号分隔的方式使用多重文字阴影。
6.2 盒阴影
盒阴影的语法和文字阴影完全一样。
可以将text-shadow后的第一个参数指定为inset来设置内阴影。
同样可以设置多重阴影。
6.3 背景渐变
线性背景渐变,方法为设定起点、过渡点、终点的颜色方案。
径向背景渐变,可以设置发散形式的渐变,可选择的类型(圆、椭圆等)很多,能做出很酷炫的效果。
重复渐变。
6.4 背景渐变图案
有一些家伙用CSS的背景技术制作了一些图案能够在背景中渐变,没有美工或者带宽有限减少用大图的时候,或许是个选择。
6.5 CSS3的响应性
针对上述学习的特性,务必记得针对不同的视口做不同的声明。
为了浏览器兼容性,书写CSS3需要私有前缀,还有一种快速编写CSS3的方法,就是使用CSS预处理器,比如最流行的SASS和LESS(闻名已久未曾用过)。
6.6 组合使用CSS3属性
略(结合该书开篇的案例来操作一把上面的新属性)。
6.7 多重背景图片
在CSS3中我们可以使用多重背景,各自有个子的大小和位置,相互之间用逗号隔开就行。
6.8 更多CSS特性
上面是介绍的只是CSS3的一小部分但属于最常用的。
6.9 可缩放图标:响应式设计中的完美选择
@font-face图标就是将字符做成图标的特定字体,以往我们的需要使用很多的图标图片,或者组合成一张很大的图,现在只需要用一种字体就涵盖所有需要的图标。比较流行的比如font-awesome就是这样的原理(哦,原来如此~)。
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)
Powered by Discuz! 7.0.0