每当我开始新的web项目时,都会重复使用一些工具和资源,它们能极大的帮助简化工作流程,使得更轻松的完成项目,下面就看看有哪些工具和资源吧。

Unsplash

Unsplash.com 是一个可以获取免费、免版税的专业高品质图像资源站点,这些高质量的图像能提高你网站的整体视觉设计。

链接: Unsplash

Blobmaker

Blobmaker.app 是一个天才工具,可以帮助你生成很酷的斑点svg代码,然后你可以将其直接粘贴到你的html代码中,你甚至可以定制你需要的形状和颜色,超级酷。

链接: Blobmaker

Get Waves

Getwaves.io 是blob.app提供的另一个在线资源。它和Blobmaker类似,但不是生成斑点图,而是让你可以为网站背景创建漂亮的波浪图。你只需复制并粘贴代码,即可完成!

链接: Get Waves

CSS Gradient

Cssgradient.io 是另一个在线资源,你可以方便的使用类似于Photoshop的渐变颜色选择器为CSS设置漂亮的渐变颜色。我一般用它来制作按钮,背景和文字的样式。

链接: CSS Gradient

Animista

Animista是一个很棒的CSS工具。它提供一个CSS动画库,可用于为CSS元素设置动画。使用Animista提供的动画列表可以直接为你生成CSS动画代码,使得你不需要花费宝贵的时间来写动画。

链接: Animista

unDraw

一个很棒的扁平化设计图库,以收录插图为主,这些图案设计很有质感,原作者 Katerina Limpitsouni 仍持续不断更新中,任何人都能从这裡找到美丽插图,免费下载 SVG 或 PNG 格式,无需标示出处,亦能用于商业用途(网站采用 MIT License 授权方式)。

值得一提的是 unDraw 可以在线上直接调整插图主要颜色!这么一来将能和你的简报设计更加紧密结合、相辅相成,目前收录的图案很多,也都非常细腻。

链接: unDraw

Clippy

一个轻松绘制 CSS clip-path 裁剪路径工具的站点,可以直接在站点上任意的拖拉修改。

链接: Clippy

参考:

https://dev.to/urielbitton/top-5-website-tools-for-web-design-2njf