摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。
【译】CSS 十六进制颜色揭秘
原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划 本文永久链接：https://github.com/xitu/gold-...…
关于Susy Susy 是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。它的能力正如官网的简介一样强大： Your markup, your design, your opinions, out math. 栅格布局 栅格设计的特点…
rem 的官方定义『The font size of the root element.』，即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素，所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配，但实际情况真有这么简单吗？
译自 https://css-tricks.com/center...，讲述了如何利用 css 来实现常见的水平和垂直居中。
F12看了一下 Dom 结构，发现作者只是结合了 CSS3 的 clip-path 和 transition 特性，就实现了很厉害的效果，每个转场和动物的细节都做得很棒。 接下来，需要将每个三角形的坐标和色值转化为数据格式。我目前找不到很高效的转化方式，就用标注软件标注完后，手…
这篇文章来自火狐的社区，是因为在新版的火狐浏览器中终于支持了clip-path这个新特性。其实在webkit内核的浏览器中就已经支持了这个新特性，不过文章中就mask和clip-path这两个新特性的应用场景和使用方法做了些总结，看了下觉得还不错，整合了一些自己的理解，有删减。有疏漏或者理解不到位的地方，还请多多指教！
我怕你忘了的SASS
前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单中的 CS…
Susy 2 教程 — 入门篇 Susy 2 教程 — Shorhand 篇 在前面介绍了Susy2的配置(config)和简写(shorthand)之后，给大家介绍一下Tookit中几个常用的宏，然后动手做一个 Bootstrap 栅格系统 Tookit Susy 2 的 T…
包含单侧投影、不规则投影、染色效果、毛玻璃效果、折角效果
在本文中，我们将分享 26 个纯 CSS 构建地开源 Web 项目。这些项目将向你证明，纯 CSS3 就足以实现如此多炫酷的效果。一起来 Enjoy 吧！
原文地址：https://css-tricks.com/snippe...
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅，欢迎推荐补充！
原文地址：CSS Isn’t Black Magic 原文作者：aimeemarieknight 译文出自：掘金翻译计划 本文永久链接：https://github.com/xitu/gold-...…
大部分人只知道 CSS 样式中有 font-family 这个属性，但是对于衬线字体和非衬线字体，中文字体与西文字体的选择，不同操作系统下的选择都不尽了解，本文将详细深入的探讨不同字体的选择，及 font-family 的书写规则 。
文本截断是我们前端经常会碰到的需求，有些文本比较长，设计师往往会在有限的空间内限制字符数量，以确保界面的美观性，而且会在一些字符后面加上省略号来表示截断，这个时候我们往往会使用css3的text-overflow:ellipisis来解决，单行文本截断没什么问题，多行文本我们也可…
使用 CSS 处理文本过长和意外超出的方法和技巧
使用纯 CSS 实现波浪效果不再困难，CSS 奇技淫巧。
两张图解释 CSS 动画的性能
在文章中，我们将与大家分享 20 个最佳的极简 CSS 框架，它们能够为你提供建站必备的组件，帮助你节省时间。Have Fun!
这一篇中将主要介绍未知高度容器的多种垂直居中方法，包括伪元素占位法，absolute + transform，table-cell，基于flex的等5个方案；用counter来模拟/装饰有序清单(已补充)；用table-layout来控制表格单元格宽度；用caret-color来自定义光标的样式；用user-select来禁用文本选中
几种常见的边框用法。透明边框的实现、多层边框的几种实现方法、border-radius 圆角的使用、border-image 边框背景详解。
这是 github 上关于 css 技巧的一篇译文，另外你也可以在本项目看到原文。列举了一些很实用的 css 技巧，比如给空内容的 a 标签添加内容，逗号分隔列表等等。
鉴于很多人吐槽翻译，在pr为通过前，先改成我自己的翻译...
我们采用错开动画的方式来重建这样的效果，而不是一次就控制一组动画。随着每一个项目动画延迟时间的增加，它们表现的就像是一个个独立的个体，但仍然会作为一个整体正确的移动。这样的结果感觉更加迷人且真实。
十分详细的 CSS 颜色体系介绍，涉及颜色关键字、transparent、currentColor、rgb、hsl 等，包含许多高级用法，适合入门以及 CSS 进阶学习。
总括：详细总结了CSS中清楚浮动的几种方法。 知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书） 什么是CSS清除浮动？ 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器…
一行水平居中，两行就左对齐
自 CSS3 流行以来，虽然以前看过一遍所有的新增属性，但其实在实际项目中用到的少之又少。所以没有形成系统性的认识，以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求，所以决定趁此机会好好研究一下这个既熟悉又陌生的 css3。
页脚置底（Sticky footer）就是让网页的 footer 部分始终在浏览器窗口的底部。这样的布局随处可见，偶然看到 CSS-TRICKS 上介绍页脚置底的文章觉得不错，对开阔布局的思路挺有帮助，遂译之。
原文地址：Golden Guidelines for Writing Clean CSS 原文作者：本文已获作者 Tiffany Brown 授权 译文出自：掘金翻译计划 译者：reid3290 校对者：weapon-xx，bambooom 编写整洁 CSS 代码的黄金法则 要…
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115617.html
摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。它能够为我们提供类似于预处理器命名空间等多方面的辅助。 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：f...
摘要：每隔几个月就会出现一篇文章表明并不是真正的编程语言。你无需担心因添加了一行不支持的代码而出错，解析器会跳过它不支持的属性。当遇到错误时，解析器会中断解析并且抛出错误信息，而解析器会忽略这些错误并继续解析。 每隔几个月就会出现一篇文章表明：CSS并不是真正的编程语言。以编程语言的标准来说，CSS过于困难。使用这门语言会很有创造性： 人们对CSS有一些强烈的情愫。— Dave Rupert...
摘要：每隔几个月就会出现一篇文章表明并不是真正的编程语言。你无需担心因添加了一行不支持的代码而出错，解析器会跳过它不支持的属性。当遇到错误时，解析器会中断解析并且抛出错误信息，而解析器会忽略这些错误并继续解析。 每隔几个月就会出现一篇文章表明：CSS并不是真正的编程语言。以编程语言的标准来说，CSS过于困难。使用这门语言会很有创造性： 人们对CSS有一些强烈的情愫。— Dave Rupert...
摘要：使用预编译处理的优势使用预处理器，可以提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。 一、什么是css预编译处理？ CSS 预编译处理，从字面上理解，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。...
阅读 2448·2021-11-25 09:43
阅读 2264·2021-09-22 15:29
阅读 730·2021-09-22 15:17
阅读 3420·2021-09-03 10:36
阅读 2015·2019-08-30 13:54
阅读 1617·2019-08-30 11:23
阅读 1036·2019-08-29 16:58
阅读 1174·2019-08-29 16:14
