搜索
首页web前端css教程重新'非人工智能”设计工具来创建人类喜爱的登陆页面

大约一周前,我必须为网络开发人员的免费密码学课程构建一个登陆页面。当我开始构建它时,我一路收集了一些工具。

这些工具极大地帮助我使登陆页面比我所能构建的更加漂亮。

这些工具让我思考——为什么我不早点知道它们!

需要明确的是:我与这些工具中的任何一个都没有任何商业关系。我只是爱他们,我知道你也会的。这就是我与大家分享的原因。

此列表中提到的所有工具都是完全免费,没有广告并且没有付费专区。我想说,它们实际上是免费的黄金。


1.SVG 仓库

该网站拥有大量 SVG 矢量图形和图标。我喜欢他们的无广告且简单的设计。没有付费墙。所有 SVG 图形都是完全免费的。您可以将这些 SVG 用作图标或其他图形。

ree

这个网站也有一个 SVG 编辑器。我发现它对于更改 SVG 的颜色以匹配我的登陆页面的调色板非常有帮助。

➡️ 看看:SVG Repo


2.Excalidraw

这是一个非常流行的绘图工具。对我来说,闪电般的时刻是当我发现 Excalidraw 库时。 exalidraw 库包含社区预先制作的图形。这有助于快速创建看起来很酷的图形和图表。

例如,我使用 excalidraw 库中的一些预制图形为我的课程登陆页面创建了以下图形。我只花了大约 10 分钟就完成了这一切。如果没有 exalidraw 库,执行它会花费很多时间。

ree

➡️ 看看:Excalidraw


3.海溪

这是一个设计精良的工具。它允许您创建 SVG 设计。您可以使用这些设计作为着陆页部分或产品内部的背景。

ree

我使用此工具为我的着陆页过去的工作部分创建背景:

ree

➡️看看:海基


4. unDraw手工艺品

ree

此工具有大量手绘 SVG 图形,可用于突出显示着陆页中的部分标题。这些手绘图形非常令人愉悦,您会发现它在各种情况下都有用。

我从这个网站下载了一个手绘火箭并将其放在我的登陆页面的“关于”部分:

ree

➡️看看:unDraw Handcrafts


5. 英雄模式

我一直想知道那些 SVG 图案背景是从哪里来的。当我发现英雄图案时,我惊呆了。

英雄图案有很多SVG背景图案。该网站允许您选择正确的颜色,然后您只需复制并粘贴 CSS 片段即可。

我使用此工具为我的课程登陆页面的课程部分创建了方格纸类型的背景:

ree

➡️看看:英雄模式


我从 Marc Lou 的 ShipFast 文档中找到的最后三个工具。他是一位鼓舞人心的产品构建者!

你应该在 Twitter 上关注我。我尝试把有用的东西放在那里。我会尊重你的时间。

感谢您的阅读!

-vkweb

以上是重新'非人工智能”设计工具来创建人类喜爱的登陆页面的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
什么是CSS网格?什么是CSS网格?Apr 30, 2025 pm 03:21 PM

CSS网格是创建复杂,响应式Web布局的强大工具。它简化了设计,提高可访问性并提供了比旧方法更多的控制权。

什么是CSS Flexbox?什么是CSS Flexbox?Apr 30, 2025 pm 03:20 PM

文章讨论了CSS FlexBox,这是一种布局方法,用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法,将其与CSS网格进行了比较,并详细浏览了浏览器支持。

我们如何使用CSS使网站迅速响应?我们如何使用CSS使网站迅速响应?Apr 30, 2025 pm 03:19 PM

本文讨论了使用CSS创建响应网站的技术,包括视口元标签,灵活的网格,流体媒体,媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用,并推荐CSS框架

CSS盒装属性有什么作用?CSS盒装属性有什么作用?Apr 30, 2025 pm 03:18 PM

本文讨论了CSS盒装属性,该属性控制了元素维度的计算方式。它解释了诸如Content-Box,Border-Box和Padding-Box之类的值,以及它们对布局设计和形式对齐的影响。

我们如何使用CSS动画?我们如何使用CSS动画?Apr 30, 2025 pm 03:17 PM

文章讨论使用CSS,关键属性并与JavaScript结合创建动画。主要问题是浏览器兼容性。

我们可以使用CSS向我们的项目添加3D转换吗?我们可以使用CSS向我们的项目添加3D转换吗?Apr 30, 2025 pm 03:16 PM

文章讨论了Web项目的3D转换,关键属性,浏览器兼容性和性能注意事项的讨论。(角色计数:159)

我们如何在CSS中添加梯度?我们如何在CSS中添加梯度?Apr 30, 2025 pm 03:15 PM

文章讨论了使用CSS梯度(线性,径向,重复)来增强网站视觉效果,添加深度,焦点和现代美学。

CSS中的伪元素是什么?CSS中的伪元素是什么?Apr 30, 2025 pm 03:14 PM

文章讨论了CSS中的伪元素,它们在增强HTML样式方面的使用以及与伪级的差异。提供实用的例子。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中