How to make an awesome horizontal parallax animation

以 CSS 實現多層次動畫的教學，另外也有以 SVG 實現的版本。

Native Aspect Ratio Boxes in CSS

新的 CSS 屬性 aspect-ratio 可以直接指定容器的長寬比例。

以往要設定圖片的長寬比例都要用一些奇怪的手法，現在瀏覽器終於開始支援 CSS 的 aspect-ratio 屬性，可以直接指定容器的長寬比例。兩大瀏覽器分別自 Chrome 89 和 Firefox 85 都會開始支援。

Beautiful CSS 3D Transform Examples

上面連結內蒐集了一些頗精美的 CSS 3D 效果，特色是只要一層 <div> 即可實現。

Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs

介紹一些新的 CSS 屬性，包括以 DPI 為基礎的 media query、以 min()、max()、clamp() 等 CSS 函數設定的動態尺寸等，改變以往都只能輸入定值的做法。

研究了下 Houdini 中的 CSS Layout API

CSS 也越來越朝可程式化發展了，之前有了原生的 CSS 變數可以定義及調用，還有少量的函式可以呼叫，未來的 CSS Layout API 甚至能夠讓我們用 JavaScript 定義客製化的布局模型，讚嘆強大之餘回歸現實面，還是要考慮一下瀏覽器支援性的問題，上面的連結內文最後一句說的很好：

CSS Layout API 以後注定是小部分開發者的玩具，最终出線的局面一定是少部分人創造，大部分人直接使用。

Gradient angles in CSS, Figma & Sketch

對於有斜角的漸層，CSS 與 Figma 及 Sketch 的演算規則是不同的，這篇文章詳細的解說它們之間的差異。

這令人想起「設計寬容度」的話題，不管原稿是來自 XD、Figma 或是 Sketch，原稿與真正用程式實做出來的差異，應該是某種程度被允許的，譬如說上文的漸層、字體的大小、陰影等（ 之前也有另一篇文章在討論 Sketch 與 CSS 陰影的差異），因為 RWD 的精神所在，不就是會隨著用戶裝置的不同而自動「響應」最適合的布局嗎，就算原稿定義了幾個重要的 breakpoint，終究沒有人能保證用戶的裝置都位在預先規劃好的 breakpoint 上，而這之間的差異，就必然會與原稿有所誤差，甚至我們無法預估用戶是否開啟了系統的文字或布局放大功能，與其追求像素對像素的精準度，不如在設計原稿時就先有「設計寬容度」的認知，實在沒有必要因為這些無傷大雅的微小差異拖累整個專案的進度。

awesome-web-effect

正宗 awesome xxx 系列的新成員，這次來報到的是 awesome-web-effect，顧名思義，就是網頁特效，包括動態背景、元件微互動等等，本站也會精選內容逐一介紹，敬請期待。