专栏名称: SegmentFault思否
SegmentFault (www.sf.gg)开发者社区,是中国年轻开发者喜爱的极客社区,我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
OSC开源社区  ·  宇树王兴兴早年创业分享引围观 ·  2 天前  
OSC开源社区  ·  升级到Svelte ... ·  3 天前  
程序猿  ·  “我真的受够了Ubuntu!” ·  昨天  
程序员小灰  ·  DeepSeek做AI代写,彻底爆了! ·  3 天前  
待字闺中  ·  DeepSeek 爆火带来的大变化 ·  1 周前  
51好读  ›  专栏  ›  SegmentFault思否

小姐姐用 HTML + CSS 画油画?谁能想到前端还有这么一手操作!

SegmentFault思否  · 公众号  · 程序员  · 2020-03-16 11:59

正文


GitHub 项目上好项目真的很多, 但作者长的这么漂亮的肯定屈指可数了。





用 HTML + CSS 画油画


如图所示,这位小姐姐的名字叫 Diana Smith ,在她的个人博客上介绍自己是一位 JavaScript 开发人员,技能树包含 React / Vue / Backbone / jQuery ,还是一位 CSS 专家 (LESS 和 SASS 双修) ,同时也是一位响应式设计的 UI 工程师。


她在 GitHub 上星数最高的一个项目,是用 HTML/CSS 创作了仿油画作品。



这吹弹可破的质感、精妙的构图、强烈又不违和的色彩搭配,不得不说“画如其人”啊。


而且,这些图片是只用 CSS 和 HTML,所有元素都是手动输入,仅允许使用 Atom 文本编辑器和 Chrome 开发者工具。


说实话,网页三兄弟 HTML、CSS、JavaScript 大家都不陌生,但谁能想到能玩出这样的花来呢?


作者小姐姐的个人博客中分享了一篇文章,其中有一个观点是:“当你只拥有一把 CSS 锤子时,世界就像是 CSS 钉子。”在工作之外,她也会用 CSS 来寻求艺术灵感。


作为前端,我们每天都在与这三兄弟打交道,但你真的了解他们么?你知道他们使用过程中的一些奇淫巧技么?





HTML、CSS、JavaScript 都是啥?



在各种技术论坛和贴吧里,前端算不算真正的程序员一直都是一个被讨论的问题。


但我觉得这个问题毫无意义啊,是又如何不是又如何,我只知道对于 全世界所有的网站而言,无论其服务器端的语言是什么,前端都使用了 HTML + CSS。



很久之前我保存了一张微博上的图片,是一个前端工程师的技能树。虽然随着时间的推移很多内容都需要更新,但从图上我们也能看出 前端工程师绝对不只是简单的切切页面而已。


前端工程师,首先是工程师,然后才是前端工程师。工程师的工作是用技术去解决业务上遇到的问题,所谓的前端后端只是分工不同。目前前端能容纳的知识领域越来越广,之后也将需要由更专业的人来完成工作,所以前端的路还可以走的很长。


今天,就和大家介绍一下网页三剑客分别是什么:


HTML


以前网页都是非常单纯的资讯呈现,所以有一些聪明的工程师想到,只要在电脑上装了一个浏览器,然后制定一个标准,让浏览器能正确呈现网页就好了。


这个标准就是 HTML,HTML 用 tag 的方式告诉浏览器资讯该如何呈现,举例:浏览器读到 image 这个 tag 就知道要在网页上摆一张图片,读到 button 就知道要在网页上放一颗按钮。


如此一来,我只要制定一系列常用的tag (例如

,

,

, , 等等)

,就能让浏览器呈现图文并茂的网页。


一个好的网页其 HTML 可以说是相当单纯且具有易读性,这种网页不但方便前端工程师进行后续的维护外,也比较容易让你的网页增加曝光率让搜寻引擎能把你的网页摆在最前面,此种行为称为 SEO。


CSS


有了 HTML 后,大家还是不满意,因为单纯用 HTML 语言描述出来的网页很丑,工程师想出了一个方法,就是制定一种描述网页外观的语言,再让它变成一种标准,这样浏览器也就会知道如何美化网页了,这个语言就是 CSS。CSS 提供很多很厉害的效果和描述外观的属性,例如让图片变模糊、变亮、旋转,或者改变字体的颜色。


从 1997 年 CSS 1.0 发布到如今,从最开始只支持简单的文字排版到如今已经可以做出酷炫的 3D 动画,CSS 已经走过了 22 个年头,其发展如图所示:



随着互联网的发展,人们对网页的要求已经是从只要展示图文就好变成了各种交互跟视觉效果都需要有着更多的体验要求。CSS 为此也是不断的更新着。

JavaScript


但很多情况下仅凭 HTML + CSS 还是不够的。光是呈现画面总少了点趣味,我们希望网站能和使用者有互动,JavaScript 就是用来撰写这些互动行为的程式语言。


Javascript 能监听网页上的各种操作行为,例如移动滑鼠、点击按钮、网页缩放、输入文字等等。


总结一下:


- HTML 建立搭建网页的主结构

- CSS 负责网页的美化与优化

- JavaScript 负责描述网页如何与使用者互动


但光学会这三样东西,仍然无法满足工程师开发上的需要,为了开发的效率,不想重新造轮子,所有的开发语言生态系都一定会衍生出各种 framework 和 library。

常见的 JavaScript 框架有 Vue.js、AngularJS、 ReactJS、jQuery 等等,各有喜好者,但目的都是为了简化开发复杂度,把前后端分开,提高重复使用性,可维护性。




后话:前端真的又容易又没未来么?

很多人都说前端简单,但其实前端并不是简单,而是前端的学习反馈非常直接,上手容易并且很快就能见效,这也造成了前端很容易的假象。







请到「今天看啥」查看全文