首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

响应式Web设计:使用HTML5和CSS3实践 (11)

响应式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就是这样的原理(哦,原来如此~)。
返回列表