CSS3带来的变化 - Speaker Deck

CSS3带来的变化

by w3cplus

Slide 1

Slide 1 text

CSS3带来的变化 By @大貘

Slide 2

Slide 2 text

CSS3带来的变化 • 选择器 • 圆⾓角、阴影和渐变 • 单位 • 媒体查询 • 布局 • 颜⾊色 • 动画 • 图标 • 混合模式 • 图形 • 变量与函数 • ⽣生成内容 • 其他

Slide 3

Slide 3 text

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()

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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)

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

CSS3带来的变化之颜色 currentColor

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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