CSS开发

【译】CSS 十六进制颜色揭秘

原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划 本文永久链接：https://github.com/xitu/gold-...…

Susy 2 教程 — 入门篇

关于Susy Susy 是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。它的能力正如官网的简介一样强大： Your markup, your design, your opinions, out math. 栅格布局 栅格设计的特点…

了解真实的『REM』手机屏幕适配

rem 的官方定义『The font size of the root element.』，即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素，所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配，但实际情况真有这么简单吗？

CSS 居中：完全指南

译自 https://css-tricks.com/center...，讲述了如何利用 css 来实现常见的水平和垂直居中。

有意思的clip-path

F12看了一下 Dom 结构，发现作者只是结合了 CSS3 的 clip-path 和 transition 特性，就实现了很厉害的效果，每个转场和动物的细节都做得很棒。 接下来，需要将每个三角形的坐标和色值转化为数据格式。我目前找不到很高效的转化方式，就用标注软件标注完后，手…

CSS shapes (形状) clip-path (裁剪路径) 和 mask (蒙版) 使用方法总结

这篇文章来自火狐的社区，是因为在新版的火狐浏览器中终于支持了clip-path这个新特性。其实在webkit内核的浏览器中就已经支持了这个新特性，不过文章中就mask和clip-path这两个新特性的应用场景和使用方法做了些总结，看了下觉得还不错，整合了一些自己的理解，有删减。有疏漏或者理解不到位的地方，还请多多指教！

我怕你忘了的SASS

我怕你忘了的SASS

前端每周清单半年盘点之 CSS 篇

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单中的 CS…

Susy 2 教程 — 实战篇

Susy 2 教程 — 入门篇 Susy 2 教程 — Shorhand 篇 在前面介绍了Susy2的配置(config)和简写(shorthand)之后，给大家介绍一下Tookit中几个常用的宏，然后动手做一个 Bootstrap 栅格系统 Tookit Susy 2 的 T…

CSS 技巧（三）：视觉效果

包含单侧投影、不规则投影、染色效果、毛玻璃效果、折角效果

26 个纯 CSS 构建的 Web 项目

在本文中，我们将分享 26 个纯 CSS 构建地开源 Web 项目。这些项目将向你证明，纯 CSS3 就足以实现如此多炫酷的效果。一起来 Enjoy 吧！

CSS中字体相关的小技巧 - 众成翻译

原文地址：https://css-tricks.com/snippe...

CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅，欢迎推荐补充！

【译】CSS 才不是什么黑魔法呢

原文地址：CSS Isn’t Black Magic 原文作者：aimeemarieknight 译文出自：掘金翻译计划 本文永久链接：https://github.com/xitu/gold-...…

谈谈一些有趣的 CSS 题目（十二）-- 你该知道的字体 font-family

大部分人只知道 CSS 样式中有 font-family 这个属性，但是对于衬线字体和非衬线字体，中文字体与西文字体的选择，不同操作系统下的选择都不尽了解，本文将详细深入的探讨不同字体的选择，及 font-family 的书写规则 。

CSS 文本截断知多少

文本截断是我们前端经常会碰到的需求，有些文本比较长，设计师往往会在有限的空间内限制字符数量，以确保界面的美观性，而且会在一些字符后面加上省略号来表示截断，这个时候我们往往会使用css3的text-overflow:ellipisis来解决，单行文本截断没什么问题，多行文本我们也可…

使用 CSS 处理文本过长和意外超出的方法和技巧

使用 CSS 处理文本过长和意外超出的方法和技巧

纯 CSS 实现波浪效果！

使用纯 CSS 实现波浪效果不再困难，CSS 奇技淫巧。

两张图解释 CSS 动画的性能

两张图解释 CSS 动画的性能

【译】2017 年 20 个最佳的极简 CSS 框架

在文章中，我们将与大家分享 20 个最佳的极简 CSS 框架，它们能够为你提供建站必备的组件，帮助你节省时间。Have Fun!

你不知道的CSS（二）

这一篇中将主要介绍未知高度容器的多种垂直居中方法，包括伪元素占位法，absolute + transform，table-cell，基于flex的等5个方案；用counter来模拟/装饰有序清单(已补充)；用table-layout来控制表格单元格宽度；用caret-color来自定义光标的样式；用user-select来禁用文本选中

CSS border 深入理解及应用

几种常见的边框用法。透明边框的实现、多层边框的几种实现方法、border-radius 圆角的使用、border-image 边框背景详解。

CSS 技巧：使你的 CSS 更加专业

这是 github 上关于 css 技巧的一篇译文，另外你也可以在本项目看到原文。列举了一些很实用的 css 技巧，比如给空内容的 a 标签添加内容，逗号分隔列表等等。
鉴于很多人吐槽翻译，在pr为通过前，先改成我自己的翻译...

用 CSS 实现惊艳的动画

我们采用错开动画的方式来重建这样的效果，而不是一次就控制一组动画。随着每一个项目动画延迟时间的增加，它们表现的就像是一个个独立的个体，但仍然会作为一个整体正确的移动。这样的结果感觉更加迷人且真实。

【CSS 进阶】CSS 颜色体系详解

十分详细的 CSS 颜色体系介绍，涉及颜色关键字、transparent、currentColor、rgb、hsl 等，包含许多高级用法，适合入门以及 CSS 进阶学习。

CSS清除浮动方法总结

总括：详细总结了CSS中清楚浮动的几种方法。 知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书） 什么是CSS清除浮动？ 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器…

CSS 如何实现 "一行水平居中，两行就左对齐"

一行水平居中，两行就左对齐

你真的觉得你会 CSS3 了吗？

自 CSS3 流行以来，虽然以前看过一遍所有的新增属性，但其实在实际项目中用到的少之又少。所以没有形成系统性的认识，以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求，所以决定趁此机会好好研究一下这个既熟悉又陌生的 css3。

CSS 五种方式实现 Footer 置底

页脚置底（Sticky footer）就是让网页的 footer 部分始终在浏览器窗口的底部。这样的布局随处可见，偶然看到 CSS-TRICKS 上介绍页脚置底的文章觉得不错，对开阔布局的思路挺有帮助，遂译之。

[[译] 编写整洁 CSS 代码的黄金法则](https://juejin.im/entry/58d34...

原文地址：Golden Guidelines for Writing Clean CSS 原文作者：本文已获作者 Tiffany Brown 授权 译文出自：掘金翻译计划 译者：reid3290 校对者：weapon-xx，bambooom 编写整洁 CSS 代码的黄金法则 要…