標籤: CSS 頁1
CSS相關的文章，目前共收錄 215 篇內容。
網路資源
Tailwind Awesome：收錄眾多優秀Tailwind模板與UI套件的網站
Tailwind Awesome 是一個專門提供高品質Tailwind CSS模板和UI套件的線上資源庫。該平台匯聚了眾多設計精美的模板，涵蓋了從SaaS、創業公司Landing Page到個人作品集等多種用途。此外，用戶還可以按網站技術如React、Vue.js等過濾搜尋結果，或從價錢排序收錄的模板。
網路資源
Transform.tools：開發者的格式轉換神器，簡化你的開發流程
Transform.tools 是一個強大的開發者工具，允許用戶將各種編碼和格式文件轉換成另外的格式，如 SVG 轉 JSX、HTML 轉 JSX、JSON 轉 TypeScript 等。此平台支援廣泛的轉換選項，包括 JSON、JSON Schema、CSS、JavaScript、GraphQL、JSON-LD、TypeScript、Flow 等以及更多其他格式。這是一個為開發者設計的一站式解決方案，提供靈活的轉換選擇，以滿足不同的開發需求。
網路資源
Toggles.dev：開源的生動 Dark Mode 切換按鈕，可以直接修改並複製程式碼回去使用
Toggles.dev是一個專門提供動態主題切換按鈕的網站，尤其是在淺色模式與深色模式之間的轉換。此平台匯集了一系列既美觀又易於使用的動畫切換按鈕，特別適合搭配如TailwindCSS這類的工具 CSS 框架使用。
網路資源
Shipixen：專業定價頁面產生器，支援 React、Vue.js 以及 Tailwind CSS
Shipixen 提供一款靈活的定價頁面產生器，你可以依據你的需求並透過介面上的設定，就能做出專業的產品定價頁面的 UI，支援 Next.js/React、Vue、Shadcn UI 與 Tailwind CSS。
網路資源
Locofy：AI 一鍵將 Figma 或 Adobe XD 設計稿轉為前端程式碼
Locofy是一款專門為前端開發者打造的AI工具，推出了一項名為Lightning的產品，這項工具能夠一鍵將Figma設計轉換成前端程式碼，支援把Figma和AdobeXD的原型設計轉換成適合手機應用程式和網頁的生產級前端程式碼。透過善用現有的設計工具、技術堆疊和工作流程，Locofy能讓產品快速上市的速度提高5到10倍，進而大幅提升生產力和效率。Lightning是基於該平台的大型設計模型（LDM）開發的產品，其靈感來自於OpenAI首創的法學碩士概念。
網路資源
掌握專業程式技能：GoalKicker.com免費學習資源大全
GoalKicker.com是一個為程式設計師提供大量免費專業書籍的平台。這些書籍覆蓋了廣泛的程式語言和技術主題，包含.NET Framework、Android、Python、Java、AngularJS、CSS、Git、iOS、C、C++、C#、Hibernate、HTML、HTML5 Canvas、jQuery、Kotlin、Linux、MySQL、MATLAB、MongoDB、Node.js、Oracle Database、Perl、PHP、PostgreSQL、R、React JS、React Native、Ruby、Ruby on Rails、Spring Freamework、S
![[WordPress Plugin] WPCode：方便的程式碼管理外掛，可方便的撰寫及管理 PHP、JS、CSS、HTML 等相關程式碼](/assets/upload/1613481490813_0.png)
網路資源
[WordPress Plugin] WPCode：方便的程式碼管理外掛，可方便的撰寫及管理 PHP、JS、CSS、HTML 等相關程式碼
WPCode 是一款專為 WordPress 使用者設計的程式碼片段外掛，它提供了一個易於使用且功能強大的平台，讓用戶可以輕鬆地添加自定義 WordPress 功能，而無需依賴過多的外掛。WPCode 擁有超過 100+ 專家核准的現成程式碼片段資料庫，支援自定義 PHP、JS、CSS、HTML、純文字等類型的程式碼片段。此外，它還具備智慧條件邏輯、先進的自動插入位置選項、網站的 Header 與 Footer 程式碼添加功能、安全的錯誤處理機制，以及電子商務轉換像素等特色。
網路資源
Aceternity UI：創新的網頁元件與效果庫
Aceternity UI 提供了一系列創新的網頁開發元件與效果，例如3D卡片效果、星光背景、動態漸變背景等，適合加強網站的互動性和視覺吸引力。每個元件都旨在提升用戶體驗，讓開發者能夠輕鬆整合到各種網頁設計中。
網路資源
Animotion- Visual CSS Animation Builder：讓 CSS 動畫創建更直觀的視覺化工具
Animotion 是一個免費的網頁應用程式，允許使用者透過拖拽、調整大小、旋轉、剪裁等視覺化操作來創建 CSS 動畫。它包含關鍵幀編輯器、一系列現成可用的動畫和29種內建的緩動效果。Animotion 在近期更新中加入了新外觀、鍵盤快捷鍵、多層顯示、自定義元素尺寸、平移和縮放功能，以及對關鍵幀、多重緩動效果、WYSIWYG 預覽模式、工具提示、程式碼優化、變形吸附、鍵盤快捷鍵、新域名、撤銷/重做、GitHub 暗色主題、關鍵幀自動化、深色模式、動畫庫和編輯動畫按鈕的改進。Animotion 支援大螢幕和現代網頁瀏覽器，適合需要視覺化創建 CSS 動畫的開發者使用。
網路資源
Fffuel：顏色工具和免費的 SVG 生成器
fffuel 是一個提供豐富SVG生成器、顏色工具及網頁設計資源的平台。使用者可以輕鬆製作獨特的背景、無縫圖案、漸變效果、紋理、形狀和斑點。該網站支援向量圖案的直接網頁或設計應用使用，確保輸出圖形獨特且與其他設計無縫整合。此外，fffuel 還提供轉換生成的SVG為PNG的工具，以及顏色代碼轉換和精彩顏色選擇工具，以便設計師選擇和轉換顏色 。
![[VS Code Extension] CSS Peek：快速在 HTML 查看 CSS 樣式](/assets/upload/1661686281233_0.jpg)
網路資源
[VS Code Extension] CSS Peek：快速在 HTML 查看 CSS 樣式
VS Code 上的 CSS Peek 擴充功能可讓您快速查看 HTML 中分配的各種class名稱和 ID 的 CSS 樣式定義。
網路資源
UI Colors - 專為設計師和開發者打造的創新顏色生成器
UI Colors是一個專門為設計師和開發者提供顏色生成和編輯工具的網站。用戶可以透過按空白鍵、輸入色碼或改變HSL值來創建自定義的顏色比例。此外，網站也支援Google帳號登入，方便用戶保存和編輯自己的顏色比例。UI Colors還提供一個Figma外掛，增強其實用性和便利性 。
網路資源
Uiverse.io：開源 UI 元素的創意寶庫
Uiverse.io 是一個致力於提供開源 UI（使用者介面）元素的網站，專門為各種專案提供豐富且美觀的自定義元素。這些元素主要是用 CSS 或 Tailwind 設計的，用戶可以自由地創建、分享，並在自己的專案中使用這些元素 。Uiverse.io 的一大特點是其社群驅動的特性，所有的 UI 元素都是由社群成員製作的，並且這些元素完全免費，無論是個人還是商業用途均可使用。
網路資源
CSSBattle：透過競賽讓開發者更加熟悉 CSS 開發的平台
CSSBattle 是一個旨在幫助網頁開發人員提高 CSS 技能的網站。CSSBattle 通過提供一個競賽平台，讓開發人員可以展示自己的 CSS 技能，並與其他開發人員進行交流和學習。
教學
讓 CSS 更好維護的模組化方法：OOCSS、SMACSS 和 BEM
當我們在撰寫 CSS 時，都會需要考慮的之後的維護方便度或可擴充性，於是就有 CSS 模組化的觀念產生，而這些又大致可以分為 OOCSS、SMACSS 和 BEM 幾種類別，本篇就以這幾類來做說明。
網路資源
Anima：將 Figma 設計稿轉成 HTML、CSS與 javascript，優化設計與開發的全新體驗
在現今的軟體開發領域中，設計和開發之間的協同工作變得越來越重要。Anima是一個強大的工具，旨在幫助您更有效率地取得程式碼，並根據您的設計迅速進行整個設計到開發的流程。
網路資源
CSS Genius：透過 AI 生成 Tailwind UI 元件
CSS Genius 是一款令人驚嘆的工具，它利用人工智慧技術，輕鬆為您的應用程式創建漂亮的 UI 元件。透過 CSS Genius，您可以設計元件並根據您的喜好進行樣式設定，而無需編寫任何程式碼，只需使用簡單的文字提示。您可以預覽這些元件，然後通過文字對其進行更新。