說明使用純 CSS 設定圖片樣式,優化 CLS(Cumulative Layout Shift) 。
Tridiv 是一個藉由圖形化介面,類似常見 3D 繪圖軟體的所見即所得的工具,只要透過該工具編輯,就可以幫你生成由 CSS 3D 繪製的 HTML 及 CSS code,有興趣的朋友可以嘗試看看。
Layoutit Grid 是一個可以透過圖形化介面設定產生 CSS Grid 排版的產生器,對於學習 CSS Grid 切版應該可以藉由此工具更了解其原理。
CSS3 提供了一些可以簡化我們以往撰寫 CSS 的函式符號的功能,這邊來說明一下其中的 max()、min() 以及 clamp() 的用法。
You might not need JavaScript 是一個介紹一些不用 JavaScript 也能達成的互動效果寫法的教學網站,基本上就是以純 CSS 來達成類似的效果,有興趣的可以看看這個網站學習一些新的技巧。
在 CSS 有原生變數後我們要來撰寫 CSS 也可以變得很有彈性,那如果我們想要用 javascript(jQuery) 來修改變數的值,就跟之前要修改 CSS 的屬性一樣的規則就好。
CSS 3, Media Queries Cheat Sheet 是當你要用 Media Query 製作 RWD 網站時,可以參考該網站的設定範圍。
以現在網站開發的觀念來說,使用 rem 會是一個相對 px 這種絕對單位而言更有彈性的單位,但因為目前的原型工具都還沒有 rem 這個單位,所以往往就需要開發者自己去轉換,自己打開計算機來算就滿浪費時間的,而 Convert pixels to rem 就可以讓你輸入 px 的單位就能直接轉換成對應的 rem 數值,給有需要的朋友參考。