工作时使用CSS时可以免费使用的在线工具

我们将介绍您在工作时使用CSS时可以免费使用的在线工具。除了节省和缩短生产时间外,这些工具是在假设CSS有点令人困惑的问题解决工具的情况下创建的。

准备了各种工具,包括基于CSS的动画,响应式导航菜单创建工具,饼图的创建,CSS的压缩以及独特的圆形菜单的创建。当你遇到制作麻烦时,为什么不回读。

Flexbox父属性Visualizer

一种交互式方法,您可以在实际更改它们时检查CSS Flexbox属性。

Keyframes.app

一种使CSS动画更直观的在线工具。与此同时,Chrome的扩展插件也已发布。

视觉上构建响应布局

它是一个可以使用CSS Grid在线创建与响应性相对应的网格布局的工具,您可以自由地进行详细设置等。

CSS Alignment Cheatsheet

一种备忘单,介绍了一种对齐元素的方法,例如顶部和左右的中心,并带有图示。

大眼夹

一种可以使用CSS的clip-path属性将图像裁剪成各种形状的工具。

GradPad

一个可以直观地创建CSS颜色渐变的在线工具。

Trianglify.io

您可以使用浅色渐变颜色创建多边形样式纹理,并以PNG和SVG文件格式下载它们。

cssgr.id

通过简单地输入元素数,列数,网格宽度等,您可以使用CSS Grid属性轻松创建布局。

Layoutit!

在线工具,允许您使用CSS网格属性更加交互式地创建网格布局。

Gradientify

具有45种渐变的在线图书馆,易于与网站和移动应用程序等一起使用。通过单击调色板,您可以在全屏幕上检查颜色方案,并且可以轻松完成CSS源代码的复制。

Circulus

能够创建圆形SVG导航菜单的生成器。

CSS标尺

备忘单总结了一种易于理解的方式来表达CSS的长度。当您遇到输入法问题时要检查的工具。

可视化框模型

一个即时工具,允许您在调整元素宽度,边框,边距,填充值时查看变化的情况。

编码/解码工具

一种方便的在线工具,可将内容转换为ASCII代码表。

SVGOMG

一种Web应用程序工具,可以优化和压缩SVG文件的文件大小。

火箭

您可以轻松创建和调整Web动画,复制和粘贴CSS源代码。

字体库

一个方便的开源项目,用于标记和组织Google字体。您可以按各种类别和流派搜索字体。

馅饼菜单生成器

在线生成器,可自动创建导航菜单以扩展为圆形圆圈。

extractCSS

一种对编码有用的工具,只需复制HTML即可对CSS表单进行整形。

CSS Shrink

压缩CSS文件的一种方便的便捷工具。

CSSynth

一种可以表达交互式动作的工具,可以一个接一个地激活元素。

享受CSS

您可以编辑和调整强大的图形样式的可视元素,而无需触及代码。

灵活的盒子

在练习学习如何使用CSS Flexbox的同时创建自己喜欢的网格布局的工具。

第N次试验

我可以通过易于理解的方式理解CSS属性“nth - child”和“nth - of - type”的机制。

CSS3生成器

可以使用Copy实现简单的CSS 3样式,例如框阴影和圆角。

SpinKit

它是仅使用CSS设计的加载动画的集合集合,可以使用复制粘贴在网站上实现。

CSSComb

一种工具,按特定顺序对所描述的CSS属性进行排序。

PX-EM

将PX大小转换为EM的计算工具。

Typesetwith.me

一种可以确认可读性的工具,例如在线设置字体大小和宽度。

类型比例

可以一目了然地确认字体字体大小和样式的计算工具。

TypeWonder

一个方便的工具,可以验证Web字体的实现。

Glyphter

可以使用SVG自由创建图标字体的有用工具。

iconizr

将SVG图像图像转换为CSS图标的工具。

GlyphSearch

一种工具,允许您从着名的图标集中检索所需的图标,如Font Awesome,Glyphicons,IcoMoon,Ionicons等。

FontAwesome Finder

一个工具,可以轻松搜索FontAwesome图标的类名,该图标也在Bootstrap中使用。

Fontello

一个在线工具,允许您从图标集(如FontAwesome和Typicons)创建自己的图标字体。

Fontastic

它是一个免费的工具,可以从超过1700种初步准备的图标中进行选择,上传您自己的SVG文件,并创建原始的Web图标字体。

CLRS

我们收集了最适合现代网页的配色方案调色板,你可以查看SASS / LESS / Stylus / CSS variab,CSS类名。

Pantone Sass

将Pantone颜色与Sass Variables组合在一起的免费工具。

平UI颜色

您可以检查平面样式的典型颜色方案调色板,只需单击当前选择的调色板即可复制CSS。

BADA 55.io

收集使用字母和数字显示的唯一英语单词(英语:leet)的配色方案调色板的站点。顺便说一下,网站名称Bada 55代表“Badass(bad,cool)”。

-END-

资源获取方式

扫一扫加入VIP会员社群,直接获取公众号全部素材

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180707G0HKWE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券