標籤: CSS 頁1

CSS相關的文章,目前共收錄 198 篇內容。

CSS Genius:透過 AI 生成 Tailwind UI 元件
網路資源

CSS Genius:透過 AI 生成 Tailwind UI 元件

CSS Genius 是一款令人驚嘆的工具,它利用人工智慧技術,輕鬆為您的應用程式創建漂亮的 UI 元件。透過 CSS Genius,您可以設計元件並根據您的喜好進行樣式設定,而無需編寫任何程式碼,只需使用簡單的文字提示。您可以預覽這些元件,然後通過文字對其進行更新。

Screenshot to Code:只要上傳截圖就能透過 AI 轉換成 HTML 與 CSS
網路資源

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 樣式
網路資源

Online Instant WYSIWYG Editor:一鍵清除 Word 轉 HTML 時產出的多餘空白及行內 style 樣式

遇到需要將 Word 轉成 html 並發布到網頁上時,往往會遇到 Word 直接轉的 HTML 會有許多不必要的空白以及行內 style 樣式,要一個一個手動拿掉或是自己寫程式過濾都有點麻煩,好在有像 Online Instant WYSIWYG Editor 這樣的工具,雖然看起來很老舊,但可以確實幫我們完成需求也是一個很好用的服務。

[CSS] 使用 scroll-padding-top 達成免 javascript 也能夠在移動到錨點時設定離瀏覽器頂端有一定距離
教學

[CSS] 使用 scroll-padding-top 達成免 javascript 也能夠在移動到錨點時設定離瀏覽器頂端有一定距離

先前我們提過可以透過 scroll-behavior: smoth; 達成免 javascript 就可以透過點擊超連結的錨點平滑移到對應的區塊,而如果有時候頁面上方被元素擋住,比如選單之類的,這樣滑過去時因為預設是貼到瀏覽器頂端,所以該區塊最上方就會被遮住,這個以往因為都是靠 javascript 處理所以加個參數就好,現在我們也都能夠完全用 CSS 解決了。

Kombai:透過 AI 將 UI 轉成 React Dom 物件以及對應的 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 Generator 是一個你可以透過圖形化介面設定想要的區塊後,便能生成 CSS grid 樣式的工具,對於想了解 CSS Grid,或是想直接利用這個工具來產生代碼,都會有很好的幫助。

PurgeCSS:刪除 CSS 檔中未使用的程式碼
網路資源

PurgeCSS:刪除 CSS 檔中未使用的程式碼

PurgeCSS 是一個用於刪除未使用 CSS 的工具。它可以成為您的開發工作流程的一部分。 當您正在建立一個網站時,您可能會決定使用像 TailwindCSS、Bootstrap、MaterializeCSS、Foundation 等 CSS 框架... 但您只會使用框架的一小部分,並且會包含很多未使用的 CSS 樣式,都可以透過 PurgeCSS 來幫你移除,降低 CSS 檔案的大小。

Fancy Border Radius Generator:好用的多變 CSS 圓角產生器
網路資源

Fancy Border Radius Generator:好用的多變 CSS 圓角產生器

Fancy Border Radius Generator 是一個方便的 CSS 圓角產生器,你只要使用圖形化介面設定圓角的值,就能得到想要的形狀,之後再把 CSS 的樣式複製回去使用即可。

[CSS] ::marker, ::spelling-error, ::grammar-error 的介紹與應用
教學

[CSS] ::marker, ::spelling-error, ::grammar-error 的介紹與應用

介紹 CSS 中 ::marker, ::spelling-error, ::grammar-error 的應用。

PXtoEM.com:線上 px 轉 em 的對照工具
網路資源

PXtoEM.com:線上 px 轉 em 的對照工具

PXtoEM.com 是一個可以把 px 轉換為 em 的線上對照表,也可以輸入 px 或 em 轉換為對應的值,網站的應該是有點歷史了,現在是建議大家把 em 改成 rem 會更好控制。

Scroll-driven Animations:收錄許多網頁捲動時的特效實踐方法
網路資源

Scroll-driven Animations:收錄許多網頁捲動時的特效實踐方法

滾動驅動的動畫在網頁上是一個常見的用戶體驗模式。這些動畫與滾動容器的滾動位置相關聯。這意味著當你向上或向下滾動時,相關聯的動畫會根據直接響應向前或向後滑動。想像一下有趣的效果,比如視差背景圖像或隨著滾動而移動的閱讀指示器。

利用 javascript 在 css 設定 sticky 且區塊固定位置後也改變樣式
教學

利用 javascript 在 css 設定 sticky 且區塊固定位置後也改變樣式

說明如何利用 javascript 在 css 設定 sticky 且區塊固定位置後也改變樣式的方法。

解決 CSS 利用 :before, :after 設定 content 時,圖片(SVG)長寬為 0 的方法
教學

解決 CSS 利用 :before, :after 設定 content 時,圖片(SVG)長寬為 0 的方法

當使用 CSS :before 和 content 屬性來插入 SVG 圖片時,可能會遇到長寬為 0 的情況。這通常是由於缺少必要的 CSS 屬性導致的。

在 CSS 中設定字母的大小寫
教學

在 CSS 中設定字母的大小寫

在 CSS 中,可以使用 text-transform 屬性來設定字母的大小寫。

[Vue.js] 讓換行符號(\n)可以在 HTML 顯示換行
教學

[Vue.js] 讓換行符號(\n)可以在 HTML 顯示換行

說明在 Vue.js 讓換行符號(\n)可以在 HTML 顯示換行的方法。

[Bootstrap] 移除或改變點擊(focus)輸入欄位時出現的光暈
教學

[Bootstrap] 移除或改變點擊(focus)輸入欄位時出現的光暈

要移除 bootstrap 預設點擊時會有的藍色光暈效果,可以修改以下的 css 寫法。

SVG Artista:好用的 SVG 動畫產生器,產生出來的動畫可以直接應用在網頁上
網路資源

SVG Artista:好用的 SVG 動畫產生器,產生出來的動畫可以直接應用在網頁上

SVG Artista 是一個線上 SVG 動畫產生器,只要上傳檔案到網站上,然後透過介面調整參數,接著將 SVG 以及 CSS 的原始碼複製後,就可以在網站上使用了。

UI Buttons- 收錄許多按鈕的互動效果,並提供 CSS 的寫法
網路資源

UI Buttons- 收錄許多按鈕的互動效果,並提供 CSS 的寫法

UI Buttons 是個收錄許多按鈕的互動效果的網站,點擊喜歡的按鈕進入後,還有提供 CSS 的寫法,可以參考後搭配自己喜歡的樣式做修改。