前言
相信大家日常生活中都有收录一些能够提高开发效率或者是能够带来灵感的网站,这篇文章将列举本人收藏并且开发中会使用到的网站,快 2023 了,这些宝藏网站我不允许小伙伴们还不知道!
提效
1. Grid 网格在线效果
cssgrid-generator.netlify.app/
一个可以在线生成 Grid 布局及代码块的网站,网站在手,效率加倍。
2. Flex 布局在线效果
3. box-shadow 在线效果
有的小伙伴可能不知道,Chrome 开发者工具中实际上早就支持调试 box-shadow 效果了。
4. box-shadow 在线效果 2
5. 贝塞尔曲线在线效果
在线调试贝塞尔曲线,助力开发。
生成
1. 精灵图
精灵图大家应该都熟悉,很久之前小图片发送过多的 HTTP 请求,因此会将这些小图合并为一张大图,然后通过 background-position 来定位不同的图片。该网站可以很方便的生成精灵图。
配色
1. Coolors
该网站可以根据需求生成配色方案。
2. ColorDrop
ColorDrop 是一个配色网站,可以从网站中已有的配色方案中获取灵感,也可以通过网站在线随机生成多套配色组合。
Random 模式:
现有搭配:
当然也可以通过颜色关键字来搜索查找它的搭配色。
3. webgradients 渐变色
webgradients 富有超多好看渐变渐变配⾊的⽹站,只需要复制⾊彩编号填充渐变,或者直接下载PSD,Sketch,图⽚,CSS代码。
4. 中国色
以红色色调为主的中国风配色网站,网站和动效都很惊艳。
5. Paletton ⾊环配⾊
是⼀个在线的⾊环配⾊⼯具,我们可以根据需要选择单⾊、相近⾊、对⽐⾊等规则来查看配⾊,也可以实时查看其在⽹⻚中的搭配效果
设计
1. 网页组件
使用 CSS 演示表单、提示、菜单等各种网页组件设计。
2. 页面设计赏析
一些惊艳的网页设计赏析。
3. 毛玻璃效果
Glass Morphism (glassgenerator.netlify.app)
可以通过该网站在线制作毛玻璃效果。
结束语
本文就到此结束了,希望大家阅读本文能所收获。
如果小伙伴们有收藏更好的网站,欢迎留言,让我们共同学习进步💪💪。
如果文中有不对的地方,或是大家有不同的见解,欢迎指出🙏🙏。
如果大家觉得所有收获,欢迎一键三连💕💕。