Theme Toggles:輕鬆實現網頁 Dark Mode 切換功能,程式碼直接複製使用

Theme Toggles:輕鬆實現網頁 Dark Mode 切換功能,程式碼直接複製使用

現在許多網頁都提供了明亮與黑暗主題的切換功能,這能夠讓使用者享受更佳的瀏覽體驗。如果也想在自家網頁中加入此功能,但又不想花費大量時間重新設計與實現 Dark Mode 切換,那麼可以考慮使用 Theme Toggles。Theme Toggles 是一個提供 Dark Mode 切換範本程式碼的網站,每個範例都可直接操作,如果覺得適合,使用者可以輕鬆將所需的 HTML 語法和 React 程式碼複製到自家網站中使用。Theme Toggles 是一個開放原始碼項目,適用於各種 CSS 框架,例如 Tailwindcss,所有範例均已模組化,可根據不同的需求進行客製化。透過 Theme Toggles,讓網站添加 Dark Mode 切換功能將變得更加輕鬆和便捷。

Material Symbols & Icons:Google Fonts 所推出圖示字型,還有 SVG 及 PNG 可選

Material Symbols & Icons:Google Fonts 所推出圖示字型,還有 SVG 及 PNG 可選

Material Symbols & Icons 是一套由 Google Fonts 所推出的圖示字型,將超過 3,216 個字形整合到一個字體檔案中,並具有多種設計變體。每種圖示都提供 Outlined、Rounded 及 Sharp 三種樣式以及 Fill、Weight、Grade 及 Optical Size 四種可調節的可變字體樣式,並讓使用者自行選擇要以字型或是 SVG、PNG 圖檔格式下載。使用者可以在線上自行操作設定圖示並複製所提供的 CSS 及 HTML Code,輕鬆將其應用到自己的 Wwb、Android 或是 iOS 專案中。此外,該圖示套件還支援 Figma Plugin,在 Figma 中輕鬆使用。Material Symbols & Icons 採 Apache license 授權,這表示不論是個人還是商業使用均可。

MarkdownDown:線上將網頁轉換為 Markdown 文件的免費工具

MarkdownDown:線上將網頁轉換為 Markdown 文件的免費工具

MarkdownDown 是一個網頁轉 Markdown 的免費線上工具,使用者僅需輸入要轉換的網址就可以輕鬆將網頁內容轉換為 Markdown 文件。除了能夠將網頁內容轉換為 Markdown 格式外,MarkdownDown 還提供了額外的選項,例如刪除非內容的 HTML 元素、下載圖片並以連結形式插入 Markdown 文件中,以及應用 GPT 過濾器等功能,使使用者的 Markdown 檔案更加完善。透過 MarkdownDown,使用者可以輕鬆在不同平台上分享和編輯內容,從而提高工作效率。

Lucide:免費開源、可客製化的 SVG 圖示庫,支援編輯與商用的 ISC 授權

Lucide:免費開源、可客製化的 SVG 圖示庫,支援編輯與商用的 ISC 授權

Lucide 是一個免費且開放原始碼的 SVG 圖示庫,提供的圖示類型有無障礙、帳戶、動物、箭頭、品牌等 40多種類型的圖示,總數達到 1500多個。這些圖示除了提供 SVG 向量格式外,也支援多種 JavaScript 框架及工具,包括:Vanilla、React、Vue、Svelte、Preact、Solid、Angular、Icon Font,除此之外,還能透過 HTML 語法中的 JSX 嵌入,滿足不同開發需求。另外,Lucide 也提供可以客製化這些圖示的工具,使用者可以透過這些工具輕鬆更改圖示顏色、描邊粗細(Stroke Width)、尺寸與開啟絕對值描邊粗細( Absolute Stroke width_)等。Lucide 圖示庫採用 ISC License,簡單來說這些圖示不但可以免費使用,還可以編輯與再分發,非常適合個人專案與商業用途使用。

Live CSS Tester 在任何網頁注入 CSS 進行即時測試

Live CSS Tester 在任何網頁注入 CSS 進行即時測試

Live CSS Tester 是個免費的瀏覽器擴充功能,使用方式非常簡單,只要到達要測試的網站後,開啟 Live CSS Tester 的 CSS 編輯器,輸入 CSS 語法,就能將該段 CSS 語法注入到該網頁中,即時呈現該段 CSS 對網頁所帶來的效果與影響。Live CSS Tester 提供程式碼提示和程式碼完成功能,輔助用戶輸入 CSS 語法。

Free HTML 404 page templates 網站 404 網頁免費模板

Free HTML 404 page templates 網站 404 網頁免費模板

Free HTML 404 page templates 是個免費提供 404頁面模板的網站,使用方式很簡便,只需在網站上瀏覽並選擇自己喜歡的模板,就可以使用 CodePen 進行預覽並可以根據自己的需求,修改模板的顏色、字體、圖像等元素,以便與自己的網站風格相匹配。一旦滿意了修改後的模板,只需複制所需的 HTML、CSS 及 Javascript 語法,然後將其貼到網站中相應的 404 頁面即可。

Email Countdown Timer:輕鬆打造嵌入電子郵件或網頁的倒數計時器,可自訂時間與外觀

Email Countdown Timer:輕鬆打造嵌入電子郵件或網頁的倒數計時器,可自訂時間與外觀

Email Countdown Timer 是一個免費的線上倒數計時器產生工具,專為製作可嵌入電子郵件或 HTML 中的倒數計時器而設計。Email Countdown Timer 提供一個可自訂語言、時間、顏色及樣式的參數調整表,使用者只需根據需求調整相應的參數即可完成一個個性化的倒數計時器。生成的倒數計時器提供了 HTML 代碼,方便將其嵌入到 HTML 或郵件中。使用 Email Countdown Timer 無需註冊,且沒有使用次數限制,使其成為將倒數計時器融入促銷網頁或行銷郵件內的理想選擇。

Domsy.io 使用 AI 設計網站、Web 應用程式原型,無需技術經驗即可生成程式碼

Domsy.io 使用 AI 設計網站、Web 應用程式原型,無需技術經驗即可生成程式碼

Domsy.io 是一個運用人工智慧的線上工具,專為協助使用者輕鬆將概念想法轉變為實際原型而設計。這個工具讓使用者能夠輕鬆製作各種內容的原型,包括網站、Web 應用程式、卡片和視覺化等,而無需任何技術經驗。使用者只需透過自然語言來描述他們想要設計的原型,接著放鬆等待,Domsy 將根據描述生成執行任務所需的 JS、CSS 和 HTML 程式碼。這使得原型設計變得更加輕鬆且有效率。

CSSnippets:CSS 範例精選,附 HTML、React 及 CSS 程式碼

CSSnippets:CSS 範例精選,附 HTML、React 及 CSS 程式碼

CSSnippets 是一個提供 CSS 範例的免費網站,專門收錄多種常用的 CSS 樣式和效果,包括 Button、Box-shadow 、Card、Checkbox、Dropdown、Input-fields、Loading-spinner、Radio、Text 及 Toggle Switches 等。所有範例都可以在 CSSnippets 網站上直接操作,並顯示實際應用效果。使用者只需根據所需的 HTML 元件類別或 CSS 效果,尋找相應的範例,然後將範例中提供的 HTML、React 及 CSS 程式碼複製到自己的專案中,非常方便。

Canva 免費寫網站神器來了!AI 寫程式、直接發佈、網址自己選

Canva 免費寫網站神器來了!AI 寫程式、直接發佈、網址自己選

Canva 現在不只是平面設計工具!還能幫你寫程式並直接發佈成網站!全新推出的「Canva AI 寫程式功能」,讓使用者只須描述程式功能就能由 Canva AI 在平台內編寫 HTML、CSS 和 JavaScript,快速完成小型 Web 應用程式、互動頁面或簡易應用,並且一鍵發佈成真正的網站,開啟網址後任何人都可以瀏覽與使用,不需架設伺服器、不需設定網域,就能以自己的 Canva 子網域(如:你的名稱.my.canva.site)直接分享程式作品,實現「零門檻網站開發」的願望。

ArrowDL 全平台下載利器:輕鬆批量下載 YouTube、BT、FB與多站串流影片

ArrowDL 全平台下載利器:輕鬆批量下載 YouTube、BT、FB與多站串流影片

ArrowDL 強大之處在於其廣泛的格式與網站支援能力。內建的下載核心結合了 yt-dlp(支援上千個影音網站,包含 YouTube、TikTok、Facebook 等),並具備自動解析 HTML5 與 JavaScript 功能,能完整抓取動態網頁內容。不僅支援常見的影片與圖片下載,更可處理種子與磁力連結,為多媒體收藏與資源備份提供強大後盾。搭配可自由設定的下載優先順序與暫停/續傳功能,彈性十足、效率翻倍。