使用 css 代碼畫一只玉兔，迎中秋佳節

前言：中秋佳節，大家都在討論月餅啊、嫦娥啊，但我們怎么能忘了可愛的玉兔呢。今天我們就來用 css 畫一只玉兔出來。

演示：

代碼
HTML代表
? <div class=[……]

閱讀全文 ?

CSS border-radius 新玩法(含可視化生成工具)

這個 CSS 屬性對于前端人員一定不陌生，一直以來都把它當作矩形圓角使用，然而，對于喜歡創新的設計師來說，這是不夠的，我們要最大化利用 border-radius，讓它玩得更出色。

先來看看截圖[……]

閱讀全文 ?

小創意：圣誕球切換開關

還有幾天就到圣誕節，幾乎到哪里都能看到圣誕氣氛的設計，網站也是如此，為了讓網站頁面更有氣氛，我們不能放過任何小創意，即使是一個小小的切換開關元素。

大家請看下圖，這是來自 Chris Ganno[……]

閱讀全文 ?

純 CSS + 純字符實現的 loading 加載效果

等待加載、加載中的在網頁上是很常用的元素，實現方式也很多，其中直接用 GIF 動畫、CSS sprites 等，而今天介紹的就是以純 CSS + 純字符實現的 loading加載效果，樣式超級多，可選[……]

閱讀全文 ?

可視化 CSS 樣式表手冊 – css reference

前端開發新人一般是從 HTML 和 CSS 進行入門學習，在設計書籍導航里有一系列前端從入門到精通的書籍推薦，但是我們偶爾在線學習會更加方便，比如今天分享cssreference，它是一個專門介紹 CSS 樣式表的在線網站[……]

閱讀全文 ?

偏門卻又實用的 CSS 樣式

很早之前我們推薦大家看《推薦大家使用的CSS書寫規范、順序》，里面提到 CSS 的一些常用命名、規范等等，而今天主要是說一些偏門一點的 CSS 樣式、技巧。

什么是偏門，就是有些片段很少使用，時[……]

閱讀全文 ?

2016年 CodePen 最熱門的前端代碼 Top 100

每年 Codepen 都會公布年度最熱門的代碼片段，這些片段有的技術超弦，有的超實用、有的超有創意，有空看看都能給我們帶來靈感。

同時從 Codepen 的代碼上也能學習一些牛人的寫法，不管是設[……]

閱讀全文 ?

實用！最新前端速查表集合（css3 Flexbox/CSS動畫/Bootstrap4）

今天分享的速查表你一定不會陌生，因為都是目前最新最流行的前端速查表（Cheat sheet），包含：Css3 Flexbox、ES6、jQuery 3 以及最新的 Bootstrap 4，前端人員可以[……]

閱讀全文 ?