🦉伟大的前端重构开发工程师🦉
- 切图仔难道是很
LOW
的称号吗? - 写写页面很容易吗?
- CSS其实是一门玄学!
- 浏览器是切图仔赖以为生的宿主,难道不想跟她谈个恋爱?
🤡 牛逼切图仔的必备技能
我切图,我快乐。
- 清楚的知道需要切出什么样的图
- 熟悉一款图像处理的工具
- 沟通,如何与设计师配合,技术与设计融合理解才能99%的还原设计稿。
为什么叫做切图仔,因为我们需要熟练的掌握PS中的切片利器。如何使用最快的刀法,抠出web使用的素材。有句话叫做庖丁解牛,我们就是那个丁。从拿到设计稿,我们需要全面剖析整个页面的布局,尺寸,以及素材的切法。
大家可能说了,我需要什么素材就直接切咯,干嘛整那么玄乎。
WEB中PNG图片为什么会一般采用PNG8导出呢?
PNG8压缩比更高,兼容IE6的透明背景显示。
我们常说的PNG24,一般都为PS输出,就是PNG32。png32在ie6中的透明化
Photoshop在“存储为WEB格式”中只提供PNG8
和PNG24
两种PNG格式,既然用到PNG,我们肯定期望导出 的图片是透明的,然后勾选“支持透明”,但是这样你就获取了一张PNG32图片。Photoshop只是觉得把PNG32这个名称给隐藏掉了。
切图时保存什么样的格式?
- jpg通常用在颜色复杂、但不要求特别精细的图片上,如照片、宣传图、背景等。
- png通常用在颜色复杂并且要求特别精细或者有透明需求的图片上,如复杂的logo、图标等。由于无损还可以当做“原图”来存档使用。
- png8兼容ie6
雪碧图(很小的图片(icon)提取到一张png图上)。CSS Sprites 雪碧图应用
这是一个历史性的解决方案,解决请求文件过多、引发性能问题。但是在现在,我们可以切成一个一个小图片,使用构建工具合成雪碧图。不过更加推荐的是把icon制作成图标字体
进行使用。这样更便于维护。
如何优雅的切图?cutterman
程序员是这个世界最懒的一群人,软件可以帮我们减少工作量的一定不用手。
🤡 写页面真的不容易
你以为会了div+css就Ok了吗?页面布局不仅仅div标签,不仅仅Css定位浮动。
还有,CSS属性的特性、html标签的语义化、W3C的规范(块格式化上下文、层叠上下文、盒子模型等)
还要了解历史圣杯与双飞翼,
经常用到的垂直居中。以及你不知道的BFC
还有,你的写的代码是给你的同事阅读的。语义话的结构
是不是更适合人类阅读呢?千万别写成酱紫
1 | <span> |
🤡 CSS是一门玄学
上面叙述的BFC
就是最好的例子,在你看来所有正经的元素当具有某种属性的时候,会激发隐藏技能。玄而又玄。
List
1、层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?
2、从倒影说起,谈谈 CSS 继承 inherit
3、IFC、BFC、GFC 与 FFC 知多少
4、结构性伪类选择器
5、引人瞩目的 CSS 变量(Variable)
6、CSS命名方式是否有必要规范
7、reset.css
知多少
8、你该知道的字体 font-family
9、再探究字体的渲染规则及 fallback 机制
10、使用 position:sticky
实现粘性布局
11、深入探讨 CSS 特性检测 @supports 与 Modernizr
12、提高 CSS 动画性能的正确姿势 | 盒子端 CSS 动画性能提升研究
13、纯 CSS 方式实现 CSS 动画的暂停与播放
14、谈谈 CSS 关键字 initial、inherit 和 unset
15、使用 display:flex
实现瀑布流布局
display:flex
实现瀑布流布局16、vh、vw、vmin、vmax 知多少
17、奇妙的-webkit-background-clip: text
18、神奇的 conic-gradient
圆锥渐变
19、不可思议的混合模式 mix-blend-mode
20、不可思议的混合模式 background-blend-mode
21、奇妙的 CSS shapes(CSS图形)
22、纯 CSS 实现波浪效果!
23、CSS 新特性contain
,控制页面的重绘与重排
24、fixed 定位失效 || 不受控制的 position:fixed
25、你所不知道的 CSS 动画技巧与细节
26、你所不知道的 CSS 滤镜技巧与细节
27、text-fill-color
与 color
的异同
28、两行 CSS 代码实现图片任意颜色赋色技术
29、聊聊逐帧动画与过渡动画,耗性能样式的取舍
🤡 跟浏览器谈个恋爱?
没有跟它(IE
)有过感情纠纷,但是听朋友是一个很差的差劲的对象。建议最好了解一下她的坏脾气,免得真正遇到的时候无法面对。
最喜欢金丝雀(Chrome
),正牌女友的最佳人选。你想要的各种技能都有,会把你照顾的舒舒服服的。拥有它,你的天空都会是蓝色的。
还有小🦊(Firefox),会中文不得不说很照顾一部分人。当作备胎也是不错的。
至于其他的,搜歌,360,小白,等等其他的小家伙。这些都是chrome
的子子孙孙,很是年幼。就不考虑了。
不过听说遨游
不错,跟Chrome
的父辈是一个辈分的。
了解一些历史不足为奇。
但是你知道他们怎么帮你展示世界的吗?
【译】浏览器渲染:repaint,reflow/relayout,restyle
相信我,你会受益匪浅的。
👻👻我总结👻👻
- W3c出的标准一定要看,这样才能当最牛逼的切图仔,否则直接让设计师切图咯?
- 不能抛却历史,拥抱未来。没有历史的故事,不算完整的故事。
- 新知识分两种,一种是全新的知识,一种是存在但是不了解的知识。
- 切图不仅仅是div+css,还有你的小情人。
- 学会与设计妹子聊人生设计,否则怎么99%的还原设计稿呢?