- 博客(92)
- 收藏
- 关注
RSS订阅原创 2023 年开始写 CSS 会与众不同（Part1）
CSS 的发展速度比以往任何时候都要快。在 Flexbox 和 Grid(https://s.juejin.cn/ds/i8TmVYNt/)之后，CSS 的发展似乎经历了一段漫长的停滞期，但在近几年，CSS 已经新增了许多新功能可用(https://s.juejin.cn/ds/i8Tmg379/)，而且还会有更多新功能即将推出。这个发展速度是令人兴奋的，同时也有些压倒性。虽然 CSS 新增了很...
2024-01-08 12:50:31
1168
原创 图解CSS：揭开CSS的面纱
这是第二次重编《图解 CSS》，如果你对 CSS 最新特性感兴趣，请移步阅读《现代 CSS》(https://s.juejin.cn/ds/i8cbuotr/)！如果您对前端方面有所关注，那么对CSS一定不会陌生，你也肯定听说过一些CSS的新特性。在使用CSS新特性之前，你应该对这个新一代样式表语言的来龙去脉有个基本了解。在本章节中，你将知道一个CSS属性的制定将会经历哪些过程，为什么会有浏览器的...
2024-01-04 08:30:44
1039
原创 2023 年我与掘金小册结缘
2023 年就快结束了，大家都在为自己的一年做总结。在此之前我也有这样的习惯，比如我曾在自己的网站 w3cplus 为自己写过一些成长经历与总结，例如：我和W3cplus的故事走过的2013年辞旧迎新，更上一层前端路上的旅行码农的自留地七年之痒我在阿里的三年自此就只对 CSS 领域的会做一些总结：2020 年 CSS 有哪些新特性应用于下一代 Web 的样式2021 年你可能不知道的 CSS 特性...
2023-12-29 08:30:51
933
原创 现代 CSS 你知道多少
写在前面现代 CSS （Modern CSS）应该是 2023 年前端圈热门话题之一，在最近的 CSS Day 活动上也有这个话题。另外在社区中也不乏现代 CSS 的讨论以及如何使用现代 CSS 特性来编写和组织 CSS 代码，以及如何使用现代 CSS 技术更好的构建出可扩展，未来更友好的 Web 项目。我在还没有完成《现代 Web 布局》和 《防御式 CSS》小册的时候，就已经准备编写一本有关于...
2023-08-09 17:01:04
174
原创 CSS 颜色设置透明度的新姿势
在 CSS 中，我们有很多种方式为元素设置透明度，常见的是给元素设置透明度和给颜色设置透明度，不同的方式将会带来不一样的效果。那么今天，我们就一起来聊聊 CSS 中的不透明度。感兴趣的同学，请继续往下阅读。设计中的透明度我们先从设计中开始。就拿 Figma 这样的设计软件来举例。设计师在给一个对象设置透明度，往往会有以下几种方式：这两种方式中，第一种就是给整个对象（或图层）设置opacity，...
2023-06-05 11:30:51
1236
转载 防御式 CSS 精讲
直通链接！https://s.juejin.cn/ds/DEHQUMj/小册简介稍微老一点的前端工程师都应该知道，过去并没有“前端”的说法，而是叫重构（有的公司称为重构工程师，有些人自嘲是“切图仔”）。大多数的时候，重构工程师的主要工作内容是还原 UI 界面 ，即编写 HTML 结构（具有语义化的 HTML 结构）、编写 CSS（具有扩展性，可维护性）和切图等。 随着时代变迁，技术不断的革新，开发...
2023-05-11 09:36:22
162
转载 小册上新｜CSS 高手大漠带你精通 Web 布局
随着 CSS 技术不断发展，尤其是这几年，可用于 Web 布局的特性明显增多。像多列布局（Multi-column）和 Flexbox， 已经是很成熟的技术。还有像 CSS 自定义属性、CSS 网格（它也很早就有了）、宽高比（aspect-ratio）、CSS 比较函数（min()、max()和clamp()）、CSS 逻辑属性、CSS 书写模式 和 CSS 视窗单位等，近两年得到了主流浏览器...
2022-11-30 09:54:03
400
转载 W3cplus开启会员阅读
喜欢W3cplus网站的同学估计最近发现站上有一些文章需要付费阅读。是的，小站自从2019年05月10日开启了付费阅读。如果开启付费阅读给大家带来不便或不爽烦请谅解。为了...
2019-05-19 22:05:56
978
转载 VueConf上海 还有26天，快手前端架构师将讲什么？
VueConf 2019上海（第三届VueConf）将于2019年6月8日在上海交通大学（徐汇校区）举办。大会网站：https://vue.w3ctech.com快手...
2019-05-13 20:55:32
354
转载 尤雨溪 视频讲解 VUE 3.0 新特性
2018 VUECONF 在杭州的举行，大会上邀请了 尤雨溪，蒋豪群，Andrey Sitnik，程劭非, 天翔，勾三股四，韦元悦，唐金州，卓凌，旷旭卿...
2019-01-04 08:30:00
1332
转载 FEDAY与React大会将于今天下午6点停止售票
中国首届React大会与第四届FEDAY将于2018年8月18日至19日在广州金逸影城太阳城店举办。离活动开始仅有5天，购票将于今天下午6点停止售票，如果您还在观望或犹豫...
2018-08-13 13:59:14
431
原创 聊聊CSS中的层叠相关概念
最近在纠结程序语言和设计语言中的一些概念，整到层叠上下文和图层相关的事情，然后发现自己对于CSS中的层叠相关的知识并没有自己想象中那样理解的透彻。因此花了一段时间重新梳理...
2018-08-07 23:44:44
703
1
转载 第七届iWeb峰会（HTML5峰会）议程曝光
由HTML5梦工场主办的第七届iWeb峰会（HTML5峰会）暨攻城师嘉年华，将于8月12日在北京国际会议中心隆重召开，为有效交流，今年限额2000人规模。本届峰会围绕“拥...
2018-08-07 23:44:44
862
1
转载 推荐几个前端学习号
如今前端技术更新迭代如此之快，想要在这个浪潮中保持有利地位、成为弄潮儿，就要持续不断的学习，下面搜罗了一些公众号供大家关注学习：hi-laser姬小光，作者从 2003 ...
2018-07-13 00:01:24
1559
1
原创 DOM系列：DOM操作小结
DOM是JavaScript的基础之一，自己学习DOM的操作也有一段时间了，到今天为止DOM系列的教程刚好有十篇了，这部分都主要是围绕DOM操作的笔记。主要围绕DOM元素...
2018-07-09 22:09:08
520
原创 DOM系列：动态添加CSS样式规则
在上一节中学习了如何通过JavaScript来修改CSS样式。简单地说：查询CSS样式（即计算样式），设置单个样式（设置的是行内样式），设置多个样式（通过类来设置样式）。...
2018-06-26 22:14:34
4164
1
原创 一个制作Web图案的组件：css-doodle
Web中使用一些图案做为背景图案是一种时常可见的，早期一般都是通过图片来完成。直至CSS一些新特性更趋成熟和稳定的时候，会通过CSS的相关技术，比如CSS的渐变属性配合b...
2018-06-22 00:00:27
1759
原创 制作Loading组件
最近项目中使用到一个Loading效果，其实是一个很简单的效果，主要是因为这个Loading出现在不同的场景之中，而且大小也不一致。对于这样的效果，往往都会想通过组件的方...
2018-06-21 00:36:13
1670
原创 DOM系列：样式和类
对于任何一位Web开发者而言，处理CSS样式很多时候还是会借助JavaScript。简单的说，我们会碰到一些交互（或UI效果的变化）都会通过JavaScript来处理st...
2018-06-08 00:49:57
900
转载 我在阿里的三年
时光如梭，转眼一逝，已经在阿里呆了三年了。在阿里有句话 —— 一年香，三年醇，五年陈。另外还有一句话就是说在阿里，要呆完三年才算是阿里人。自己非常的荣幸，有幸在阿里成功的...
2018-06-05 00:23:49
4709
2
转载 DOM系列：修改DOM
通过前面的学习，我们都知道，DOM并不一定要由存在于HTML中的元素组成。我们仅需要使用几行JavaScript代码就可以将HTML元素添加到你的DOM中。而且你也有能力...
2018-06-02 20:31:01
603
转载 DOM系列：Attribute和Property
这两天一直在看DOM元素的attribute和property，简单让人晕。从直译上，我一开始都理解为“属性”，而且对于我这样的新手，将两者混淆在一起，傻傻的分不清楚。后...
2018-05-29 23:23:36
686
转载 DOM系列：DOM节点属性
经过前几篇文章的学习，对DOM有一定的了解。但这仅仅是DOM一些基础性的知识，如果要对DOM更了解，需要更深入地了解DOM节点。在这一节中，咱们将围绕DOM的节点属性、标...
2018-05-26 01:11:25
603
转载 DOM系列：getElement* 和 querySelector*
在上一节中，我们学习了DOM树和遍历DOM相关的知识。可以通过firstChild（或firstElementChild）、lastChild（或lastElementC...
2018-05-24 21:40:18
849
转载 DOM系列：DOM树和遍历DOM
上一节，咱们整理了DOM系列中的第一篇，主要介绍浏览器与DOM相关的知识。从标题中我们可以看出来，今...
2018-05-22 23:47:36
2305
1
转载 DOM系列：浏览器与DOM 主标签
最近回过头来在学习JavaScript中的DOM知识，随着学习进度的向前推移，越发感觉DOM知识点较...
2018-05-17 22:34:38
1006
原创 querySelectorAll 和 getElementsByTagName区别
在《DOM的操作》一节中知道querySelectorAll()和getElementsByTagName()两个方法都是用来查找DOM元素的。通过上一节的学习，知道qu...
2018-05-04 00:00:00
6383
3
原创 JavaScript学习笔记：动态集合
DOM是JavaScript中重要部分之一，在DOM中有一个动态集合。这个动态集合包含节点的集合（NodeList）、元素属性的集合（NamedNodeMap）和HTML...
2018-05-03 00:00:00
767
原创 一个HTML元素和五个CSS属性的魔力
特别声明：此篇文章内容来源于@ANA TUDOR的《1 HTML Element + 5 CSS Properties = Magic!》一文。假设我告诉你，我可以使用一...
2018-04-21 00:00:00
454
原创 CSS如何实现内凹角效果
特别声明：此篇文章内容来源于@ANA TUDOR翻译的《Scooped Corners in 2018》一文。记得@Lea Verou的《CSS Secrets》一书和前...
2018-04-19 00:00:00
14511
1
原创 你应该掌握的CSS自定义属性技术点
特别声明：此篇文章内容来源于@Ohans Emmanuel的《Everything you need to know about CSS Variables》一文。大多数...
2018-04-18 15:36:25
661
原创 使用Vue构建视频播放列表
这周有关于CSSConf Australia大会的视频已经放出来了。花了一天的时间看了一下视频，有些话题还是很有意思的。不过咱们今天要聊的不是这个大会中的事情。这不是在学...
2018-04-18 15:36:23
4415
原创 CSS Grid Layout一些有趣的事情(1)
几周前，我举办了一个有关于CSS Grid Layout的研讨会。我和大多数人一样，对这个话题也很陌生，我在准备PPT和DEMO的时候学到了很多东西。我决定和大家一起分享...
2018-04-18 15:36:21
430
原创 CSS Grid Layout一些有趣的事情(2)
特别声明：此篇文章内容来源于@MANUEL MATUZOVIC的《Another Collection of Interesting Facts About CSS Gr...
2018-04-18 15:36:20
227
转载 使用圆锥渐变和CSS自定义属性创建一个Range Input控制的环形图
特别声明：此篇文章内容来源于@Vicky.Ye翻译的《使用圆锥渐变和CSS变量创建一个Range Input控制的环形图》一文。英文原文来自于@Ana Tudor的《Us...
2018-04-18 15:36:16
795
原创 CSS Grid Layout一些有趣的事情(2)
特别声明：此篇文章内容来源于@MANUEL MATUZOVIC的《Another Collection of Interesting Facts About CSS Grid》一文。去年，我做了一个研讨会之后收集了一些关于CSS Grid布局有趣的东西。今天年，我在另一个工作室工作，我学到了一些更令人兴奋的事情，那就是我们都喜欢布局规范。当然，我不会把这些有趣的东西独享。我很高兴能和大家一起分享这
2018-04-14 00:00:00
195
原创 CSS Grid Layout一些有趣的事情(1)
几周前，我举办了一个有关于CSS Grid Layout的研讨会。我和大多数人一样，对这个话题也很陌生，我在准备PPT和DEMO的时候学到了很多东西。我决定和大家一起分享一些我觉得其中特别感兴趣的东西。希望大家对这些也会感兴趣。可能grid-row-end和grid-column-end会使用小于-1的负值在许多代码示例和教程中，您可能看到过可以使用grid-column-start:1;和gri
2018-04-14 00:00:00
237
原创 使用Vue构建视频播放列表
这周有关于CSSConf Australia大会的视频已经放出来了。花了一天的时间看了一下视频，有些话题还是很有意思的。不过咱们今天要聊的不是这个大会中的事情。这不是在学Vue吗？总想给自己找点活干，练习练习Vue。我就在想，是不是可以把该大会的在YouTube上的视频列表效果给模拟出来。既然想了，那就动手试试呗。比如咱们接下来要做的一个效果如下：由于我们的视频和视频的相关信息都来源于YouTub
2018-04-14 00:00:00
3945
原创 你应该掌握的CSS自定义属性技术点
特别声明：此篇文章内容来源于@Ohans Emmanuel的《Everything you need to know about CSS Variables》一文。大多数编程语言都支持变量。但遗憾的是，CSS从一开始就缺乏对原生变量的支持。如果写CSS的话，那是没有变量的，除非你使用像Sass这样的CSS处理器。变量是Sass这样处理器的一个非常有用的特性之一。这也是你尝试使用的理由之一。Web技
2018-04-11 00:00:00
383
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人