12 个要收藏的前端 CSS 网站
英文 | https://betterprogramming.pub/12-front-end-css-generator-websites-to-bookmark-cc557079b0ac
翻譯 | 楊小愛
使用 CSS 時(shí)，有很多任務(wù)可能具有挑戰(zhàn)性且難以正常完成。這不是因?yàn)樗麄兊睦щy，而是因?yàn)槲覀內(nèi)狈糜玫?UI 生成工具。幸運(yùn)的是，我們可以在網(wǎng)上找到一些工具。這些工具將填補(bǔ)空白，幫助我們更快、更有效地工作。
在今天的文中，我們將分享一個(gè)關(guān)于CSS效果生成器的網(wǎng)站列表，這些網(wǎng)站可以幫助我們毫不費(fèi)力地生成像素完美的 CSS效果。
現(xiàn)在，我們就開始今天的內(nèi)容。
1、漢堡菜單生成器
網(wǎng)址：https://jonsuh.com/hamburgers/
它的特色：
動(dòng)畫組件。
項(xiàng)目在 GitHub 上可用。
支持 95.43% 的瀏覽器。
ARIA 友好。
高度可定制。
可用的 Sass 文件。
在構(gòu)建移動(dòng)響應(yīng)應(yīng)用程序時(shí)，漢堡圖標(biāo)已成為一種廣泛使用的模式。它通常放置在圖形界面的頂角。它的目標(biāo)是切換導(dǎo)航菜單。
在這個(gè)網(wǎng)站上，我們將能夠從各種漢堡圖標(biāo)過渡中進(jìn)行選擇。它們都配備了為導(dǎo)航帶來更多上下文的過渡。
用法非常簡單：
下載 CSS文件 并將其放在 <head> 標(biāo)記中。
添加標(biāo)記。
使用 css 類 hamburger--collapse 來切換狀態(tài)。
2、?SVG 生成器
網(wǎng)址 : https://haikei.app/
特點(diǎn)：
獨(dú)特的設(shè)計(jì)
可供選擇的不斷增長的模板庫
這是一個(gè)生成獨(dú)特的 svg 形狀、背景和圖案的工具。它會生成一個(gè)可以在您的站點(diǎn)上使用的 svg 對象或圖像。首選的導(dǎo)出格式應(yīng)該是 svg，因?yàn)樗葌鹘y(tǒng)的 png 具有很大的優(yōu)勢。
它是如何工作的？它是圍繞生成器構(gòu)建的。它確實(shí)集成了一些已經(jīng)流行的 svg 生成器，例如 Waves。
3、網(wǎng)格生成器
網(wǎng)址: https://cssgrid-generator.netlify.app?
特點(diǎn)：
直觀的界面
代碼生成
CSS Grid 布局前段時(shí)間得到了很好的支持。越來越多的 Web 開發(fā)人員每天都在使用它。但是，確定確切的細(xì)節(jié)可能很乏味。尤其是在我們不完全了解所有 CSS Grid 屬性的開始時(shí)。
通過這個(gè)站點(diǎn)，我們可以探索和創(chuàng)建您的自定義 CSS 網(wǎng)格布局。這將有助于加快進(jìn)程。進(jìn)一步理解這個(gè) CSS 特性也很方便。
該站點(diǎn)的輸出是一個(gè) CSS 片段，我們可以將其粘貼到我們的 CSS 工作表文件中。
4、?布局生成器
網(wǎng)址: https://layout.bradwoods.io
特點(diǎn)：
多種選擇
代碼生成
響應(yīng)式工具
基本/高級界面
CSS 布局生成器是一個(gè)為布局組件創(chuàng)建 CSS 和 HTML 的工具。
創(chuàng)建新布局時(shí)，我們可以將此站點(diǎn)用作模板指南。我們將快速確定我們的布局是否最適合 Grid 或 Flex 實(shí)現(xiàn)。
一旦我們選擇了模板，我們就可以進(jìn)一步自定義我們的布局。結(jié)果，我們可以抓取生成的 CSS 并將其粘貼到我們的站點(diǎn)中。
5、布局模式
網(wǎng)址: https://web.dev/patterns/layout
特點(diǎn)：
谷歌支持
現(xiàn)代 CSS
包含最先進(jìn)的 CSS 功能，例如容器查詢
這是由 Google 構(gòu)建的工具。他們相信開放、可訪問、私有和安全的網(wǎng)絡(luò)。這就是為什么他們向 Web 開發(fā)人員提供了一些像這樣的工具。
大多數(shù)這些模式在內(nèi)部使用 Grid 和 Flex。它不是一個(gè)靜態(tài)列表，因?yàn)樗鼤谖磥聿粩嘣鲩L。值得為此添加書簽并定期檢查。
6、?剪輯路徑生成器
網(wǎng)址: https://bennettfeely.com/clippy
特點(diǎn)：
高度可定制
直觀的界面
易于使用的代碼輸出
CSS cli-path 特性允許我們構(gòu)建復(fù)雜的形狀。它通過用多邊形掩蓋內(nèi)容來工作。但是，構(gòu)建該多邊形可能具有挑戰(zhàn)性。
使用此站點(diǎn)，您可以輕松地以交互方式構(gòu)建該多邊形。輸出代碼很簡單，很容易集成到我們的 CSS 表中。
clip-path: polygon(25% 0%, 75% 0%, 100% 53%, 25% 100%, 0% 50%);7、過渡動(dòng)畫生成器
網(wǎng)址: https://www.transition.style
特點(diǎn)：
高度可定制
有狀態(tài)的可共享鏈接
CSS 過渡提供了一種精細(xì)控制屬性動(dòng)畫速度的方法。我們可以選擇以犧牲性能為代價(jià)使用 JavaScript 制作動(dòng)畫。因此，如果可能，我們希望使用 CSS 過渡。
// syntax transition: <property> <duration> <timing-function> <delay>;該站點(diǎn)提供了一組預(yù)定義的動(dòng)畫供您選擇。它將 CSS 過渡與剪輯路徑功能相結(jié)合，創(chuàng)造出出色的效果。它們很微妙，但可以極大地影響任何網(wǎng)站的用戶體驗(yàn)。
這是生成的輸出的示例：
@keyframes circle-in-hesitate {0% {clip-path: circle(0%);}40% {clip-path: circle(40%);}100% {clip-path: circle(125%);} }[transition-style="in:circle:hesitate"] {animation: 2.5s cubic-bezier(.25, 1, .30, 1) circle-in-hesitate both; }8、?等待動(dòng)畫生成器
網(wǎng)址: https://waitanimate.wstone.uk?
特點(diǎn)：
便于使用
目前無法在動(dòng)畫再次循環(huán)之前暫停動(dòng)畫。這個(gè)工具就是為了這個(gè)目標(biāo)而構(gòu)建的。它計(jì)算動(dòng)畫關(guān)鍵幀時(shí)間的百分比以創(chuàng)建該效果。
手動(dòng)執(zhí)行此操作需要付出很多努力，并且需要更多嘗試和錯(cuò)過。
9、三次貝塞爾生成器
網(wǎng)址 : https://cubic-bezier.com
特點(diǎn)：
交互界面
簡單輸出
有狀態(tài)的可共享鏈接
三次貝塞爾函數(shù)可用于定義動(dòng)畫計(jì)時(shí)函數(shù)。它由四個(gè)點(diǎn) P0、P1、P2 和 P3 組成。它有助于微調(diào)我們的動(dòng)畫時(shí)間（慢啟動(dòng)、快啟動(dòng)、漸變等……）
使用此站點(diǎn)，我們將能夠輕松生成自定義貝塞爾曲線。剩下的就是在我們的動(dòng)畫中使用輸出代碼：
animation: x 0.3s cubic-bezier(0,4,1,4) infinite;10、?比例生成器
網(wǎng)址: https://maximeroudier.com/typeScaleClampGenerator?
特點(diǎn)：
模擬不同的分辨率
范圍選擇器
字體是任何網(wǎng)站的關(guān)鍵方面。在設(shè)計(jì)網(wǎng)站時(shí)，重要的是要了解不同的字體大小如何一起使用。使用此 Web 應(yīng)用程序，可以輕松創(chuàng)建一致的字體比例。
由于這將使用 rem 單位生成字體，因此查看不同基本大小字體的外觀也很方便。默認(rèn)值為 16px，它匹配任何瀏覽器的默認(rèn)根字體。
11、漸變生成器
網(wǎng)址: https://cssgradient.io?
特點(diǎn)：
便于使用
高度可定制
CSS Gradient 的生成是 Web 開發(fā)領(lǐng)域中最瑣碎的任務(wù)之一。使用此工具，我們可以通過直觀的界面創(chuàng)建漂亮的漸變。
我們可以結(jié)合形狀、顏色甚至使用圖像。我們可以抓取輸出并將其粘貼到我們的代碼庫中。
12、調(diào)色板生成器
網(wǎng)址: https://mybrandnewlogo.com/color-palette-generator
特點(diǎn)：
預(yù)定義的選擇
便于使用
在設(shè)計(jì)項(xiàng)目時(shí)，創(chuàng)建一致的方案調(diào)色板很重要。并非所有顏色都能很好地相互搭配。他們應(yīng)該和諧地工作并傳遞正確的信息。手動(dòng)執(zhí)行此操作可能既麻煩又困難。
調(diào)色板生成工具幫助我們選擇正確的顏色。我們可以瀏覽精心制作的設(shè)計(jì)列表。我們可以使用按鈕按主題導(dǎo)航到所需的調(diào)色板。
13、實(shí)用程序?CSS?生成器
網(wǎng)址: https://html-css-js.com/css/generator/box-shadow?
特點(diǎn)：
便于使用
此網(wǎng)站是一個(gè)旨在解決前端開發(fā)人員最常見任務(wù)的工具。
我們可以創(chuàng)建漸變、框陰影、文本陰影、邊框、邊框半徑……它沒有其他的那么花哨，但以方便的方式擁有需要的大部分工具。
總結(jié)
以上就是我處理的CSS 任務(wù)時(shí)的首選工具，它們有助于改進(jìn)我的工作流程并以交互方式完善我的用戶交互。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
總結(jié)
以上是生活随笔為你收集整理的12 个要收藏的前端 CSS 网站的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux线上运维经验分享与故障排除技巧
- 下一篇： 建筑施工技术【16】