Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS3带来的变化
Search
w3cplus
January 05, 2016
Technology
0
1.4k
CSS3带来的变化
CSS3带来的变化
w3cplus
January 05, 2016
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
210
CSS Future
w3cplus
2
610
Web Animation
w3cplus
5
470
Web重构之道
w3cplus
1
2.7k
Sass带来的变革
w3cplus
2
570
Responsive小试牛刀
w3cplus
3
540
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
370
http协议与缓存简述
w3cplus
5
510
前端自动化工具探索
w3cplus
4
1k
Other Decks in Technology
See All in Technology
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
220
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
270
SAE J1939シミュレーション環境構築
daikiokazaki
0
150
claude codeでPrompt Engineering
iori0311
0
440
Data Engineering Study#30 LT資料
tetsuroito
1
560
2025/07/22_家族アルバム みてねのCRE における生成AI活用事例
masartz
2
110
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
550
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
210
M365アカウント侵害時の初動対応
lhazy
7
4.5k
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
550
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
21
5.8k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
Featured
See All Featured
Faster Mobile Websites
deanohume
308
31k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Raft: Consensus for Rubyists
vanstee
140
7k
Facilitating Awesome Meetings
lara
54
6.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Invisible Side of Design
smashingmag
301
51k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Six Lessons from altMBA
skipperchong
28
3.9k
Transcript
CSS3带来的变化 By @大貘
CSS3带来的变化 • 选择器 • 圆⾓角、阴影和渐变 • 单位 • 媒体查询 •
布局 • 颜⾊色 • 动画 • 图标 • 混合模式 • 图形 • 变量与函数 • ⽣生成内容 • 其他
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()
http://codepen.io/airen/pen/gpagMK http://codepen.io/airen/pen/bdVgwO
CSS3带来的变化之单位 1.rem 2.vh、vw 3.vmin和vmax
CSS3带来的变化之单位 rem相对于根元素<html>的font-size计算 html{font-size: 14px;}
CSS3带来的变化之单位 1vw= viewport宽度 / 100 1vh= viewport⾼高度 / 100 https://codepen.io/tutsplus/embed/gbPQga
CSS3带来的变化之单位 vmin和vmax 假设viewport的尺⼨寸是1100px( W)* 700px (H),1vmin = 7px, 1vmax =
11px 假设viewport的尺⼨寸是800px( W)* 1080px (H),1vmin = 8px, 1vmax = 10.8px
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)
CSS3带来的变化之颜色 http://myst729.github.io/assets/slides/2013-09-27-css-color-notation
CSS3带来的变化之颜色 currentColor
CSS3带来的变化之圆角、阴影和渐变 1、圆⾓角、阴影和渐变替代图⽚片 2、阴影和渐变绘制图形
CSS3带来的变化之动画 animation改变⽤用户体验
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
CSS3带来的变化之Material Design http://www.materialup.com/
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
CSS3带来的变化之图标 CSS绘制 @font-face
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
CSS3带来的变化之混合模式 background-blend-mode mix-blend-mode http://www.w3cplus.com/blog/tags/408.html
CSS3带来的变化之图形 shape-outside clip-path http://www.w3cplus.com/blog/tags/418.html http://www.w3cplus.com/blog/tags/431.html
CSS3带来的变化之变量与函数
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
CSS3带来的变化之其他
CSS3带来的变化之Q&A The End && THX!!!