標籤: CSS 頁1

網路資源

Tailwind CSS- Utility-First CSS 的 CSS 框架

Tailwind CSS 是一個近年崛起的 CSS 框架,不同以往使用框架只是 class name 的搭配組合,Tailwind CSS 還提供你利用內建的樣式產出新的模組的功能,對於開發者來說又更有彈性了,從事前端開發的朋友都應該花點時間試試看他的威力。

網路資源

{CSS}Portal- 收錄 CSS 資源、CSS 產生器以及 CSS 工具的網站

{CSS}Portal 是一個收錄 CSS 資源、CSS 產生器以及 CSS 工具的網站。

網路資源

Clippy- 線上 CSS clip-path 產生器

Clippy 是線上 CSS clip-path 產生器,除了有一些預設的形狀外,也可以透過拖拉產生新的形狀並把 css 複製回去。

網路資源

Smooth Shadow- 柔順的 CSS 陰影產生器

Smooth Shadow 可以透過圖形化介面,產生柔順的 CSS 陰影。

網路資源

css-doodle- 有趣的 CSS 背景花紋產生器

css-doodle 是一個有趣的 CSS 背景花紋產生器,可以直接複製後帶回去用。

網路資源

Free Frontend- 收錄一些不錯的前端效果的網站

Free Frontend 會不定期收錄及整理一些不錯的前端效果,值得多來看看學會一些小技巧或吸取靈感。

網路資源

Flexbox Froggy- 透過遊戲的方式讓你更認識 CSS 的 flexbox

Flexbox Froggy 是一個透過遊戲的方式讓你更認識 CSS 的 flexbox 的網站,有在學習 flex 的朋友可以來玩玩看。

網路資源

anime.js- 功能強大的動畫工具

anime.js 是一個功能強大的動畫工具,可以和CSS3變數、SVG、DOM 之類的元素互動,製作出高效能且平滑的動畫效果。

網路資源

cubic-bezier- 視覺化呈現設定 timing function 的產生器

在製作 CSS 的 transition 或 animation 的時候可以去設定動畫的漸變效果也就是 timing function,預設的有 easing、linear... 等,另外有一個叫做cubic-bezier 可以讓我們設定一些參數達成自訂效果,不過直接看參數可能很難知道效果會如何,這時就可以透過 cubic-bezier 這個網站,利用視覺化的產生器拖曳我們要的動畫效果,之後再複製程式碼就可以了。

網路資源

Emmet- 前端開發輔助神器,讓你在撰寫 HTML 與 CSS 上可以更輕鬆

Emmet 是一個可以讓你在撰寫 HTML 與 CSS 上可以更輕鬆的套件,已支援許多網頁開發編輯器,可以透過這份官方文件清楚知道有哪些熱鍵可以使用。

網路資源

SpinKit- 漂亮的純 CSS loading 動畫

SpinKit 收錄了一些漂亮的純 CSS loading 動畫,只要直接把 code 複製回去就能使用了。

網路資源

Load Awesome- 一些純 CSS 的讀取動畫

Load Awesome 收錄了一些純 CSS 的讀取動畫,可以複製後拿回自己的網站應用。

網路資源

Select the plates- CSS 選擇器小遊戲

透過小遊戲的方法去練習 CSS 的選擇器,每一關要使用正確 CSS Selector 把關卡指定的內容物挑掉。

網路資源

CSS Reference- CSS 的語法參考與範例

CSS Reference 是 codrops 整理的 CSS 的語法參考與範例介紹大全。

網路資源

Ultimate CSS Gradient Generator- 線上 CSS 漸層產生器

Ultimate CSS Gradient Generator 是一個線上工具,只要透過視覺化介面的調整漸層樣式,就能自動生成 css code。

網路資源

uiGradients- 收錄好看的漸層配色,也可以自訂自己的

uiGradients 收錄好看的漸層配色,也可以自訂自己的漸層配色,並能下載 jpg 或取得 css。

網路資源

Materialize CSS- 以 Material Design 為基礎的 CSS Framework

Materialize CSS 是一個以 Material Design 為基礎的 CSS Framework,有著簡單好上手以及許多常用的 component 是他的優點。

網路資源

W3Schools- 非常老牌且豐富的網頁教學網站

W3School 是一個非常老牌的網頁技術教學網站,在這邊可以學到各種網頁技術,舉凡 HTML、CSS、javascript、PHP、Python...等非常豐富,網站內也有語法教學與線上測試工具。