CSS3带来的变化

E2a4044058c9d32770da590571e956b8?s=47 w3cplus
January 05, 2016
Technology
0
1.2k

 CSS3带来的变化

CSS3带来的变化

E2a4044058c9d32770da590571e956b8?s=128

w3cplus

January 05, 2016
Tweet

More Decks by w3cplus

See All by w3cplus
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
0
91
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
2
390
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
5
390
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
1
2.4k
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
2
380
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
3
450
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
0
300
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
5
430
E2a4044058c9d32770da590571e956b8?s=48 w3cplus
4
710

Other Decks in Technology

See All in Technology
Cd891a89dfec6ca7bd278b5f5bd87c90?s=48 tzkoba
0
100
7bcf6f29a0b9a348fe422a31a4f44752?s=48 cyberblack28
3
200
7f85cb378a925f12345bf23ebf29977d?s=48 misapipipink
0
120
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
740
13d936e697fe0f4fa96f926d0a712f6c?s=48 sansanbuildersbox
0
220
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
1
2k
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
2
900
380bcd2ab751f5838abd8219df53e5fe?s=48 tomoki10
0
1.1k
11d3072d628a7b976cd2f4e6a3cf750f?s=48 yuyaabo
0
700
Fccb5974b63d64636a7c90faf3bab51f?s=48 kikuzo
11
1.6k
8aba6de431668fc8d09977c0e33c63c1?s=48 jaguar_imo
0
160
17d762ae166e66cab39e9b2e3df7d198?s=48 ysakashita
0
170

Featured

See All Featured
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
770
190k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
205
6.7k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
370
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
649
110k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
550
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
66
260k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
166
6.9k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.7k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.3k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
118
15k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
145
19k

Transcript

  1. CSS3带来的变化 By @大貘

  2. CSS3带来的变化 • 选择器 • 圆⾓角、阴影和渐变 • 单位 • 媒体查询 •

    布局 • 颜⾊色 • 动画 • 图标 • 混合模式 • 图形 • 变量与函数 • ⽣生成内容 • 其他

  3. CSS3带来的变化之选择器 1.属性选择器E[foo^=“bar”]、E[foo*=“bar”]… 2.伪类选择器E:nth-child(n)、E:nth-of-type(n)… 3.相邻选择器E ~ F、E + F 1.否定伪类E:not() 2.关系伪类E:has()

    3.匹配伪类E:matches()

  4. http://codepen.io/airen/pen/gpagMK http://codepen.io/airen/pen/bdVgwO

  5. CSS3带来的变化之单位 1.rem 2.vh、vw 3.vmin和vmax

  6. CSS3带来的变化之单位 rem相对于根元素<html>的font-size计算 html{font-size: 14px;}

  7. CSS3带来的变化之单位 1vw= viewport宽度 / 100 1vh= viewport⾼高度 / 100 https://codepen.io/tutsplus/embed/gbPQga

  8. CSS3带来的变化之单位 vmin和vmax 假设viewport的尺⼨寸是1100px（ W）* 700px (H),1vmin = 7px, 1vmax =

    11px 假设viewport的尺⼨寸是800px（ W）* 1080px (H),1vmin = 8px, 1vmax = 10.8px

  9. CSS3带来的变化之颜色 RGB/RGBA! R -> Red (0~255) G -> Green (0

    ~ 255) B -> Blue (0 ~ 255) A -> alpha (0 ~ 1) HSL/HSLA! H -> hue (any integer) S -> saturation (0% ~ 100%) L -> lightness (0% ~ 100%) A -> alpha (0 ~ 1)

  10. CSS3带来的变化之颜色 http://myst729.github.io/assets/slides/2013-09-27-css-color-notation

  11. CSS3带来的变化之颜色 currentColor

  12. CSS3带来的变化之圆角、阴影和渐变 1、圆⾓角、阴影和渐变替代图⽚片 2、阴影和渐变绘制图形

  13. CSS3带来的变化之动画 animation改变⽤用户体验

  14. CSS3带来的变化之动画12原则 1、挤压和拉伸 2、预备动作 3、演出布局 4、连续运动和姿态对应 5、跟随和重叠动作 6、缓⼊入缓出 7、弧线运动 8、次要动作 9、时间节奏

    10、夸张⼿手法 11、扎实的描绘 12、吸引⼒力 http://www.w3cplus.com/css3/animation-principles-for-the-web.html

  15. CSS3带来的变化之Material Design http://www.materialup.com/

  16. CSS3带来的变化之媒体查询 媒体查询(Media Queries)造就了RWD http://www.w3cplus.com/responsive/9-basic-principles-of-responsive-web-design.html http://www.w3cplus.com/css3/10-basic-tips-about-responsive-design.html

  17. CSS3带来的变化之图标 CSS绘制 @font-face

  18. CSS3带来的变化之布局 Flexbox Grid http://www.zhihu.com/question/28542816/answer/41224348 http://www.w3cplus.com/blog/tags/355.html http://www.w3cplus.com/blog/tags/157.html

  19. CSS3带来的变化之混合模式 background-blend-mode mix-blend-mode http://www.w3cplus.com/blog/tags/408.html

  20. CSS3带来的变化之图形 shape-outside clip-path http://www.w3cplus.com/blog/tags/418.html http://www.w3cplus.com/blog/tags/431.html

  21. CSS3带来的变化之变量与函数

  22. CSS3带来的变化之生成内容 http://www.w3cplus.com/css3/learning-to-use-the-before-and-after-pseudo-elements-in-css.html http://www.w3cplus.com/css3/pseudo-element-roundup.html

  23. CSS3带来的变化之其他

  24. CSS3带来的变化之Q&A The End && THX!!!