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 代碼的黃金法則 要…