標籤: CSS 頁1
CSS相關的文章，目前共收錄 198 篇內容。
網路資源
CSS Genius：透過 AI 生成 Tailwind UI 元件
CSS Genius 是一款令人驚嘆的工具，它利用人工智慧技術，輕鬆為您的應用程式創建漂亮的 UI 元件。透過 CSS Genius，您可以設計元件並根據您的喜好進行樣式設定，而無需編寫任何程式碼，只需使用簡單的文字提示。您可以預覽這些元件，然後通過文字對其進行更新。
網路資源
Screenshot to Code：只要上傳截圖就能透過 AI 轉換成 HTML 與 CSS
Screenshot to Code 是一個簡單的應用程式，能夠將截圖轉換為程式碼（HTML/Tailwind CSS、React、Vue或Bootstrap）。它利用了GPT-4 Vision生成程式碼，以及DALL-E 3生成相似外觀的圖像。
網路資源
Online Instant WYSIWYG Editor：一鍵清除 Word 轉 HTML 時產出的多餘空白及行內 style 樣式
遇到需要將 Word 轉成 html 並發布到網頁上時，往往會遇到 Word 直接轉的 HTML 會有許多不必要的空白以及行內 style 樣式，要一個一個手動拿掉或是自己寫程式過濾都有點麻煩，好在有像 Online Instant WYSIWYG Editor 這樣的工具，雖然看起來很老舊，但可以確實幫我們完成需求也是一個很好用的服務。
![[CSS] 使用 scroll-padding-top 達成免 javascript 也能夠在移動到錨點時設定離瀏覽器頂端有一定距離](/assets/upload/1580227388021_0.jpg)
教學
[CSS] 使用 scroll-padding-top 達成免 javascript 也能夠在移動到錨點時設定離瀏覽器頂端有一定距離
先前我們提過可以透過 scroll-behavior: smoth; 達成免 javascript 就可以透過點擊超連結的錨點平滑移到對應的區塊，而如果有時候頁面上方被元素擋住，比如選單之類的，這樣滑過去時因為預設是貼到瀏覽器頂端，所以該區塊最上方就會被遮住，這個以往因為都是靠 javascript 處理所以加個參數就好，現在我們也都能夠完全用 CSS 解決了。
網路資源
Kombai：透過 AI 將 UI 轉成 React Dom 物件以及對應的 CSS
Kombai（研究預覽版）是一款全新的人工智慧模型，專門用於理解和編寫 UI 設計，就像人類開發者一樣。通過設計提示，即可在短短幾秒內獲得高品質的 UI 代碼，無需手動標記或自動布局。它能夠生成邏輯 DOM 結構和 React 元件，以及沒有尺寸寫死的 CSS，代碼整潔易讀。
網路資源
CSS Grid Generator：CSS Grid 樣式產生器
CSS Grid Generator 是一個你可以透過圖形化介面設定想要的區塊後，便能生成 CSS grid 樣式的工具，對於想了解 CSS Grid，或是想直接利用這個工具來產生代碼，都會有很好的幫助。
網路資源
PurgeCSS：刪除 CSS 檔中未使用的程式碼
PurgeCSS 是一個用於刪除未使用 CSS 的工具。它可以成為您的開發工作流程的一部分。 當您正在建立一個網站時，您可能會決定使用像 TailwindCSS、Bootstrap、MaterializeCSS、Foundation 等 CSS 框架... 但您只會使用框架的一小部分，並且會包含很多未使用的 CSS 樣式，都可以透過 PurgeCSS 來幫你移除，降低 CSS 檔案的大小。
網路資源
Fancy Border Radius Generator：好用的多變 CSS 圓角產生器
Fancy Border Radius Generator 是一個方便的 CSS 圓角產生器，你只要使用圖形化介面設定圓角的值，就能得到想要的形狀，之後再把 CSS 的樣式複製回去使用即可。
教學
[CSS] ::marker, ::spelling-error, ::grammar-error 的介紹與應用
介紹 CSS 中 ::marker, ::spelling-error, ::grammar-error 的應用。
網路資源
PXtoEM.com：線上 px 轉 em 的對照工具
PXtoEM.com 是一個可以把 px 轉換為 em 的線上對照表，也可以輸入 px 或 em 轉換為對應的值，網站的應該是有點歷史了，現在是建議大家把 em 改成 rem 會更好控制。
網路資源
Scroll-driven Animations：收錄許多網頁捲動時的特效實踐方法
滾動驅動的動畫在網頁上是一個常見的用戶體驗模式。這些動畫與滾動容器的滾動位置相關聯。這意味著當你向上或向下滾動時，相關聯的動畫會根據直接響應向前或向後滑動。想像一下有趣的效果，比如視差背景圖像或隨著滾動而移動的閱讀指示器。
教學
解決 CSS 利用 :before, :after 設定 content 時，圖片(SVG)長寬為 0 的方法
當使用 CSS :before 和 content 屬性來插入 SVG 圖片時，可能會遇到長寬為 0 的情況。這通常是由於缺少必要的 CSS 屬性導致的。
![[Vue.js] 讓換行符號(\n)可以在 HTML 顯示換行](/assets/upload/1583563899683_0.jpg)
![[Bootstrap] 移除或改變點擊(focus)輸入欄位時出現的光暈](/assets/upload/1624082287367_0.jpg)
網路資源
SVG Artista：好用的 SVG 動畫產生器，產生出來的動畫可以直接應用在網頁上
SVG Artista 是一個線上 SVG 動畫產生器，只要上傳檔案到網站上，然後透過介面調整參數，接著將 SVG 以及 CSS 的原始碼複製後，就可以在網站上使用了。
網路資源
UI Buttons- 收錄許多按鈕的互動效果，並提供 CSS 的寫法
UI Buttons 是個收錄許多按鈕的互動效果的網站，點擊喜歡的按鈕進入後，還有提供 CSS 的寫法，可以參考後搭配自己喜歡的樣式做修改。