python|12 个要收藏的前端 CSS 网站

python|12 个要收藏的前端 CSS 网站
文章图片

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

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

它的特色:

  • 动画组件。
  • 项目在 GitHub 上可用。
  • 支持 95.43% 的浏览器。
  • ARIA 友好。
  • 高度可定制。
  • 可用的 Sass 文件。
在构建移动响应应用程序时,汉堡图标已成为一种广泛使用的模式。它通常放置在图形界面的顶角。它的目标是切换导航菜单。
在这个网站上,我们将能够从各种汉堡图标过渡中进行选择。它们都配备了为导航带来更多上下文的过渡。
用法非常简单:
  • 下载 CSS文件 并将其放在标记中。
  • 添加标记。
  • 使用 css 类 hamburger--collapse 来切换状态。
2、 SVG 生成器
网址 : https://haikei.app/
python|12 个要收藏的前端 CSS 网站
文章图片

特点:

  • 独特的设计
  • 可供选择的不断增长的模板库
这是一个生成独特的 svg 形状、背景和图案的工具。它会生成一个可以在您的站点上使用的 svg 对象或图像。首选的导出格式应该是 svg,因为它比传统的 png 具有很大的优势。
它是如何工作的?它是围绕生成器构建的。它确实集成了一些已经流行的 svg 生成器,例如 Waves。
3、网格生成器
网址: https://cssgrid-generator.netlify.app
python|12 个要收藏的前端 CSS 网站
文章图片

特点:

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

特点:
  • 多种选择
  • 代码生成
  • 响应式工具
  • 基本/高级界面
CSS 布局生成器是一个为布局组件创建 CSS 和 HTML 的工具。
创建新布局时,我们可以将此站点用作模板指南。我们将快速确定我们的布局是否最适合 Grid 或 Flex 实现。
一旦我们选择了模板,我们就可以进一步自定义我们的布局。结果,我们可以抓取生成的 CSS 并将其粘贴到我们的站点中。
5、布局模式
网址: https://web.dev/patterns/layout
python|12 个要收藏的前端 CSS 网站
文章图片

特点:

  • 谷歌支持
  • 现代 CSS
  • 包含最先进的 CSS 功能,例如容器查询
这是由 Google 构建的工具。他们相信开放、可访问、私有和安全的网络。这就是为什么他们向 Web 开发人员提供了一些像这样的工具。
大多数这些模式在内部使用 Grid 和 Flex。它不是一个静态列表,因为它会在未来不断增长。值得为此添加书签并定期检查。
6、 剪辑路径生成器
网址: https://bennettfeely.com/clippy
python|12 个要收藏的前端 CSS 网站
文章图片

特点:
  • 高度可定制
  • 直观的界面
  • 易于使用的代码输出
CSS cli-path 特性允许我们构建复杂的形状。它通过用多边形掩盖内容来工作。但是,构建该多边形可能具有挑战性。
使用此站点,您可以轻松地以交互方式构建该多边形。输出代码很简单,很容易集成到我们的 CSS 表中。
clip-path: polygon(25% 0%, 75% 0%, 100% 53%, 25% 100%, 0% 50%);

7、过渡动画生成器
网址: https://www.transition.style
python|12 个要收藏的前端 CSS 网站
文章图片

特点:
  • 高度可定制
  • 有状态的可共享链接
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
python|12 个要收藏的前端 CSS 网站
文章图片

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

特点:
  • 交互界面
  • 简单输出
  • 有状态的可共享链接
三次贝塞尔函数可用于定义动画计时函数。它由四个点 P0、P1、P2 和 P3 组成。它有助于微调我们的动画时间(慢启动、快启动、渐变等……)
使用此站点,我们将能够轻松生成自定义贝塞尔曲线。剩下的就是在我们的动画中使用输出代码:
animation: x 0.3s cubic-bezier(0,4,1,4) infinite;

10、 比例生成器
网址: https://maximeroudier.com/typeScaleClampGenerator
python|12 个要收藏的前端 CSS 网站
文章图片

特点:
  • 模拟不同的分辨率
  • 范围选择器
字体是任何网站的关键方面。在设计网站时,重要的是要了解不同的字体大小如何一起使用。使用此 Web 应用程序,可以轻松创建一致的字体比例。
由于这将使用 rem 单位生成字体,因此查看不同基本大小字体的外观也很方便。默认值为 16px,它匹配任何浏览器的默认根字体。
11、渐变生成器
网址: https://cssgradient.io
python|12 个要收藏的前端 CSS 网站
文章图片

特点:
  • 便于使用
  • 高度可定制
CSS Gradient 的生成是 Web 开发领域中最琐碎的任务之一。使用此工具,我们可以通过直观的界面创建漂亮的渐变。
我们可以结合形状、颜色甚至使用图像。我们可以抓取输出并将其粘贴到我们的代码库中。
12、调色板生成器
网址: https://mybrandnewlogo.com/color-palette-generator
python|12 个要收藏的前端 CSS 网站
文章图片

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

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

请点击下方公众号
python|12 个要收藏的前端 CSS 网站
文章图片

python|12 个要收藏的前端 CSS 网站
文章图片

【python|12 个要收藏的前端 CSS 网站】python|12 个要收藏的前端 CSS 网站
文章图片

    推荐阅读