2024-11-14
筆記使用 Tailwind CSS
筆記使用 Tailwind CSS 的方式以及相關的 UI Component，Tailwind CSS 是一個 Utility-First 的 CSS Framework，另有許多的 UI Component 可以搭配使用。
#CSS 所有符合的文章
顯示全部 0/0 篇文章
2022-08-01
CSS | Bootstrap5 Class Tips (Intranet Low Maintenance Website / 簡易維護網頁範本)
說明活用 Bootstrap 5 Components 以及 Utilities 創造網頁設計妙用，減少手工 CSS 的負擔 🙂
2022-02-23
CSS | Background-image
整理如何使用 Backgroun-image 用於豐富元素的視覺呈現，同時結合說明 repeat 與 position 的方式控制圖片在元素的背景呈現方式，並結合說明 的方式調整漸層呈現。
2022-02-17
CSS | Pseudo Class Image Background
實驗 Pseudo Class 的使用，不需要新增 html tag 也在視覺呈現上進行設計，本例是探討圖片後置正圓的視覺效果，並比較 Position Absolute 與 Transform Translate 的位移差異。
2022-01-26
CSS | Filter
整理 CSS Filter 對於圖片的濾鏡效果使用，包含 Blur, Contrast, Grayscale, Hue-rotate, Invert, Opacity, Saturate 以及 Sepia。
2022-01-26
CSS | Typography
整理關於網頁字體 Typography 相關知識，包含 font-size、font-family 以及 font 的各種排版應用與變化 (writing-mode, text-combine-upright)。
2022-01-25
CSS | Flexbox
CSS Flexbox 相較於 Float ，更適合處理一維度的 Components 例如 Navbar, Card 等，對於一維度的元素延展以及對齊非常方便。
2022-01-21
CSS | Position
整理 CSS Position 的使用說明，藉由 Relative, Absolute, Fixed 可以達成圖層位移、堆疊的視覺效果，也可以設置懸浮固定的 sidebar 以及回到置頂的 button，藉由 sticky 則可以實作捲動跟隨著 header。
2021-08-22
CSS Properties Dom Notation (camelCase & kebab-case)
列出所有的 Chrome 瀏覽器所支援的 CSS Properties。