🚀🚀10 个可以让你的前端开发达到专业*水平的网站或应用程序

响应式

在家办公伙伴

形状分隔线

动画片

边界半径

坡度

CSS 剪切路径

形状模板

图标

字体选择器

颜色选择器

盒子阴影

这些是我在前端开发中发现非常有用的网站/应用程序/扩展。

它们最终可以使您的开发速度提高 5 倍。

响应式

我会把它放在首位，它是新兴的开源选举应用程序之一，您可以在其中检查多部手机和屏幕的响应能力。

不仅如此，考虑到这种情况，您可以检查并添加 CSS 代码，它会在所有屏幕中发生变化，您可以在单个窗口中检查代码如何影响所有响应屏幕！

没有比这更酷的了

Github 网址：https://github.com/manojVivek/responsively-app

在家办公伙伴

这是一款在现代居家办公模式下平衡工作生活的辅助应用。它能帮助你保持水分，快速准确地休息。

Github网址：https://github.com/karthick3018/wfh-mate

形状分隔线

在产品搜索中迅速获得了第一枚徽章，它是第二个徽章持有者。

在现代设计世界中，我们会得到许多背景或浮动形状，如波浪、曲线等。

这个应用程序可以轻松解决这个问题，它有助于制作不同类型的形状并为形状生成 css

应用程序链接：https://www.shapedivider.app/

动画片

如果我们对文本或任何元素使用样式和动画，动画是首先吸引用户注意力的东西。即使我先看了，我们也可以抱怨😂

Animista 可以帮你实现这一点，它有很多动画模板，你可以选择任意一个，然后看看它的实际效果。它开箱即用，可以为特定动画生成 CSS。动画现在变得简单了 :man-shrugging:

应用程序链接：https://animista.net/

边界半径

这是我两年前见过的唯一的 border-radius 代码或border-radius:10px模板border-radius:50%

但现在，在如今的设计中，拥有多种边框形状已经是大势所趋。设计本身就很棒，但我们如何才能仅通过检查一个元素就实现这一点呢？:face_with_rolling_eyes:

这个网站最近解决了我边框半径的问题，现在很容易了！让我们做不同的边框半径

网站链接：https://9elements.github.io/fancy-border-radius/

坡度

渐变色是背景和其他元素常用的颜色。同样的检查功能也帮不上什么忙。不过 Css-matic 可以帮它生成很酷的渐变效果。

在我最近的帖子中，我使用这个网站创建了背景，很酷

它可以处理其他东西，比如盒子阴影、边框半径、噪声纹理

网站链接：https://www.cssmatic.com/

CSS 剪切路径

CSS 剪切路径是除了使用 border-radius 之外，用于塑造 svg 或图像的路径。它可用于生成可用的几何形状。

该网站可以帮助剪切形状并生成该形状的 CSS 值

应用程序链接：https://bennettfeely.com/clippy/

形状模板

这些是用 CSS 创建的一些形状，可以作为你的模板。我最近从这里复制了一个梯形。

应用程序链接：https://css-tricks.com/the-shapes-of-css/

图标

图标是制作网站时不可避免的东西，无论是 svg 还是 Font Awesome。

该网站的图标数量有限，但免费涵盖了用例中的主要图标

应用程序链接：https://heroicons.dev/

字体选择器

我们看到很多网站都是我们日常的网页浏览，一些字体可能会影响我们，这个简单的 chrome 扩展可以帮助找到任何网站使用的字体

应用程序链接：https：//chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm？ hl=en

也可以使用检查来完成😝但你不能检查每个使用的文本，它可能有多种字体

颜色选择器

与字体选择器一样，它是颜色选择器，很多人可能已经使用过，只是在这里提到

应用程序链接：https：//chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp？ hl=en

盒子阴影

该网站有盒子阴影列表

https://getcssscan.com/css-box-shadow-examples

这个 GitHub repo 有其他链接或资源列表，可以帮助你进行网站开发

https://github.com/bradtraversy/design-resources-for-developers

分享对您有很大帮助的其他资源

在GitHub上查看我的开发项目在Codepen
上查看我的样式在 Twitter上关注我 在 LinkedIn 上与我联系

感谢您的时间！祝您
编程愉快！继续分享，
注意安全！