python|12 个要收藏的前端 CSS 网站 css|大数据|编程语言|java

文章图片

英文 | https://betterprogramming.pub/12-front-end-css-generator-websites-to-bookmark-cc557079b0ac

翻译 | 杨小爱
使用 CSS 时，有很多任务可能具有挑战性且难以正常完成。这不是因为他们的困难，而是因为我们缺乏好用的 UI 生成工具。幸运的是，我们可以在网上找到一些工具。这些工具将填补空白，帮助我们更快、更有效地工作。
在今天的文中，我们将分享一个关于CSS效果生成器的网站列表，这些网站可以帮助我们毫不费力地生成像素完美的 CSS效果。
现在，我们就开始今天的内容。
1、汉堡菜单生成器
网址：https://jonsuh.com/hamburgers/

文章图片

它的特色：

动画组件。
项目在 GitHub 上可用。
支持 95.43% 的浏览器。
ARIA 友好。
高度可定制。
可用的 Sass 文件。

在构建移动响应应用程序时，汉堡图标已成为一种广泛使用的模式。它通常放置在图形界面的顶角。它的目标是切换导航菜单。
在这个网站上，我们将能够从各种汉堡图标过渡中进行选择。它们都配备了为导航带来更多上下文的过渡。
用法非常简单：

下载 CSS文件并将其放在标记中。
添加标记。
使用 css 类 hamburger--collapse 来切换状态。

2、 SVG 生成器
网址 : https://haikei.app/

文章图片

特点：

独特的设计
可供选择的不断增长的模板库

这是一个生成独特的 svg 形状、背景和图案的工具。它会生成一个可以在您的站点上使用的 svg 对象或图像。首选的导出格式应该是 svg，因为它比传统的 png 具有很大的优势。
它是如何工作的？它是围绕生成器构建的。它确实集成了一些已经流行的 svg 生成器，例如 Waves。
3、网格生成器
网址: https://cssgrid-generator.netlify.app

文章图片

特点：

直观的界面
代码生成

CSS Grid 布局前段时间得到了很好的支持。越来越多的 Web 开发人员每天都在使用它。但是，确定确切的细节可能很乏味。尤其是在我们不完全了解所有 CSS Grid 属性的开始时。
通过这个站点，我们可以探索和创建您的自定义 CSS 网格布局。这将有助于加快进程。进一步理解这个 CSS 特性也很方便。
该站点的输出是一个 CSS 片段，我们可以将其粘贴到我们的 CSS 工作表文件中。
4、布局生成器
网址: https://layout.bradwoods.io

文章图片

特点：

多种选择
代码生成
响应式工具
基本/高级界面

CSS 布局生成器是一个为布局组件创建 CSS 和 HTML 的工具。
创建新布局时，我们可以将此站点用作模板指南。我们将快速确定我们的布局是否最适合 Grid 或 Flex 实现。
一旦我们选择了模板，我们就可以进一步自定义我们的布局。结果，我们可以抓取生成的 CSS 并将其粘贴到我们的站点中。
5、布局模式
网址: https://web.dev/patterns/layout

文章图片

特点：

谷歌支持
现代 CSS
包含最先进的 CSS 功能，例如容器查询

这是由 Google 构建的工具。他们相信开放、可访问、私有和安全的网络。这就是为什么他们向 Web 开发人员提供了一些像这样的工具。
大多数这些模式在内部使用 Grid 和 Flex。它不是一个静态列表，因为它会在未来不断增长。值得为此添加书签并定期检查。
6、剪辑路径生成器
网址: https://bennettfeely.com/clippy

文章图片

特点：

高度可定制
直观的界面
易于使用的代码输出

CSS cli-path 特性允许我们构建复杂的形状。它通过用多边形掩盖内容来工作。但是，构建该多边形可能具有挑战性。
使用此站点，您可以轻松地以交互方式构建该多边形。输出代码很简单，很容易集成到我们的 CSS 表中。

clip-path: polygon(25% 0%, 75% 0%, 100% 53%, 25% 100%, 0% 50%);

7、过渡动画生成器
网址: https://www.transition.style

文章图片

特点：

高度可定制
有状态的可共享链接

CSS 过渡提供了一种精细控制属性动画速度的方法。我们可以选择以牺牲性能为代价使用 JavaScript 制作动画。因此，如果可能，我们希望使用 CSS 过渡。

// syntax transition: ;

该站点提供了一组预定义的动画供您选择。它将 CSS 过渡与剪辑路径功能相结合，创造出出色的效果。它们很微妙，但可以极大地影响任何网站的用户体验。
这是生成的输出的示例：

@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、等待动画生成器
网址: https://waitanimate.wstone.uk

文章图片

特点：

便于使用

目前无法在动画再次循环之前暂停动画。这个工具就是为了这个目标而构建的。它计算动画关键帧时间的百分比以创建该效果。
手动执行此操作需要付出很多努力，并且需要更多尝试和错过。
9、三次贝塞尔生成器
网址 : https://cubic-bezier.com

文章图片

特点：

交互界面
简单输出
有状态的可共享链接

三次贝塞尔函数可用于定义动画计时函数。它由四个点 P0、P1、P2 和 P3 组成。它有助于微调我们的动画时间（慢启动、快启动、渐变等……）
使用此站点，我们将能够轻松生成自定义贝塞尔曲线。剩下的就是在我们的动画中使用输出代码：

animation: x 0.3s cubic-bezier(0,4,1,4) infinite;

10、比例生成器
网址: https://maximeroudier.com/typeScaleClampGenerator

文章图片

特点：

模拟不同的分辨率
范围选择器

字体是任何网站的关键方面。在设计网站时，重要的是要了解不同的字体大小如何一起使用。使用此 Web 应用程序，可以轻松创建一致的字体比例。
由于这将使用 rem 单位生成字体，因此查看不同基本大小字体的外观也很方便。默认值为 16px，它匹配任何浏览器的默认根字体。
11、渐变生成器
网址: https://cssgradient.io

文章图片

特点：

便于使用
高度可定制

CSS Gradient 的生成是 Web 开发领域中最琐碎的任务之一。使用此工具，我们可以通过直观的界面创建漂亮的渐变。
我们可以结合形状、颜色甚至使用图像。我们可以抓取输出并将其粘贴到我们的代码库中。
12、调色板生成器
网址: https://mybrandnewlogo.com/color-palette-generator

文章图片

特点：

预定义的选择
便于使用

在设计项目时，创建一致的方案调色板很重要。并非所有颜色都能很好地相互搭配。他们应该和谐地工作并传递正确的信息。手动执行此操作可能既麻烦又困难。
调色板生成工具帮助我们选择正确的颜色。我们可以浏览精心制作的设计列表。我们可以使用按钮按主题导航到所需的调色板。
13、实用程序 CSS 生成器
网址: https://html-css-js.com/css/generator/box-shadow

文章图片

特点：

便于使用

此网站是一个旨在解决前端开发人员最常见任务的工具。
我们可以创建渐变、框阴影、文本阴影、边框、边框半径……它没有其他的那么花哨，但以方便的方式拥有需要的大部分工具。
总结
以上就是我处理的CSS 任务时的首选工具，它们有助于改进我的工作流程并以交互方式完善我的用户交互。
学习更多技能

请点击下方公众号