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

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

演示：

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

閱讀全文 ?

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

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

先來看看截圖[……]

閱讀全文 ?

CSS 或 srcset 讓瀏覽器自動切換 1X/2X/3X 圖像

現在很多客戶都買高分屏的電腦，如果直接發 JPG 圖給客戶，會影響設計質量。為了讓網站設計效果圖更加真實，最近把設計提案直接做成 Web 版，模擬瀏覽器真實視覺效果，同時能自動識別是否為視網膜顯示屏，[……]

閱讀全文 ?

小創意：圣誕球切換開關

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

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

閱讀全文 ?

優化閱讀體驗，網站預設字體的CSS最佳寫法

英文字體的文件大小比較小可以使用嵌入字體讓網站展示更好，但中文就不一樣了，文件大小是 MB 級別，為了 WEB 端性能，只好使用系統自帶的默認字體，然而我們有 Windows 和 Mac? OS 兩個[……]

閱讀全文 ?

這10個按鈕，把 CSS HOVER 的創意發揮到極致了

CSS hover 樣式很簡單，但是想創造出有意思、實用、有創意性的特效是很考驗設計師的創意能力，所以設計達人每隔一段時間都會分享一些與鼠標點擊、懸停的相關特效，以便大家獲得更好的創造靈感。[……]

閱讀全文 ?

bttn.css – 簡單實用的按鈕樣式庫

CSS 能實現很不多不同的樣式，只有你想不到，沒有做不到哦，今天為大家分享的 bttn.css 是一個專注分享網頁按鈕的樣式庫，設計師和前端人員可以參考這個設計，也能直接拿來使用。
bttn.css[……]

閱讀全文 ?

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

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

閱讀全文 ?