设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

时间:2021-11-16
类别:在线工具
2021年最值得学的涨薪技能!突破设计瓶颈的优质小课,哪项薄弱学哪里 → 立即点击

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

作为⽹⻚设计师,是需要对⼀些前端代码有⼀定程度的了解的,⾄少需要知道⾃⼰设计出来的样式,能不能被前端⼯程师⽤代码实现出来,否则显得⾃⼰⻘⽠蛋⼦不说,还可能拖慢项⽬进度被前端怼。

但也不是每位设计师都有时间有精⼒去学习、了解开发那些事的。不过下⾯要介绍的这款神器就可以解决以上的问题,再也不⽤为⾃⼰的设计是否能实现⽽迷茫。

神器介绍

CSS Matic 是由 Freepik 与 Thumit 联合开发的⼀款快速⽣成 CSS 样式的免费⽹站。可以针对渐变、矩形、噪点、投影这四种设计样式⽣成相应代码。只要在对应⾯板中设置各种数值,即可实时⽣成代码。并且这些功能都是免费且⽆需登录的哦~

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

01.Gradient Generator渐变样式⽣成器

中⼼区域蓝⾊正⽅形左上⻆的「Gradient Generator」翻译过来是「梯度发⽣器」的意思,但是这个翻译太⽣硬,毕竟是机翻。⼤家可以理解为「渐变样式⽣成器」。

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

点开它之后,会跳转到渐变设置的操作⾯板中,以功能来理解的话,可以分为上图所示⼀样的两⼤版块。左边是颜⾊设置版块,它的数值将影响其右边的代码;⽽右边是代码⽣成结果区域,⽣成的代码不可修改,也就是说我们只需要操作左边颜⾊相关内容去形成结果即可。

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

左侧颜⾊⾯板中可以进⾏对默认⾊的快速选择,颜⾊设置卡的右侧按钮,是「快速变换渐变⽅ 向」的快捷按钮。这部分操作跟 PS、XD、AI 这种常⽤的软件没有差别。

⾊卡下⾯有各种可设置项:「Opacit(不透明度)」、「Color(颜⾊)」、「Location(位 置)」、「Hue(⾊调)」、「Lightness(亮度)」、「Saturation(饱和度)」。 都是跟平常⽤的软件⼀样的操作⽅式和效果。「Lightness(亮度)」下⾯有个「Reset(复 位)」按钮,点击后是返回默认状态的,慎点。

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

除了左侧⾯板可以控制渐变⽅向以外,在右侧代码区域的上⽅:颜⾊预览区的右边有五个⽅向按钮,分别可以实现:向左、向下、向右下⻆、向右上⻆、中⼼向外五种⽅向定义。

细⼼的⼩伙伴可能已经发现了,右侧代码区域在我们每次操作之后,都会变化。也就是说,代码⽣成是实时的。效率极⾼。

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

代码在采集之前,可以对代码的规则做调整。CSS 可变换为 SASS、⾊值可以以 Hex、RGB、 RGBa、HSL、HSLa 格式来写、可以加 Comments(注释)以及⽣成 IE9 ⽀持规则。

当然了,SASS、注释和 IE9 ⽀持这种是更专业的开发⼈员关⼼的东⻄,设计师来讲可以不⽤太过在意。

采集代码的⽅式是:直接选中⽣成后的代码,然后 Ctrl/Command+C 即可。

Border Radius边界半径

点分⻚ Tab 上的 Order Radius,可以跳转到下图这个⾯板:

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

操作⾯板分为两块:左侧设置、右侧预览+代码⽣成。其实叫它「边界半径」有点⼉笼统,不便于理解,我更喜欢把它形容成「盒⼦⽣成器」,⾄于原因,看完下⾯这个演示GIF⼤家就能明⽩了:

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

它其实就是⼀个盒⼦,可以对盒⼦做圆⻆定义、描边⻛格变换以及⾊彩的变化。 圆⻆可统⼀修改,通过 All Corners 拖动滑块/键⼊数值。也可进⾏单⼀边⻆的设置,通过 Top Left、Top Right、Bottom Left、Bottom Right 四项即可。

描边的设置叫 Border Width(描边宽度),数值越⼤描边越粗。其下⽅的三项设置分别就是: Border Style(描边⻛格)、Border Color(描边颜⾊)、Background Color(背景⾊)。可 以根据实际需要去设置它们从⽽实现我们想要的样⼦。 采集代码的⽅式同样也是:直接选中⽣成后的代码,然后 Ctrl/Command+C 即可。

Noise Texture噪点纹理

⽹站中噪点纹理的概念跟平常我们认知⾥的噪点⼀样,只不过在 PS ⾥它叫「杂⾊」。

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

操作⾯板同样也是左右两侧。噪点的数值相对来说就简单⼀点了,通过控制 Noise Opacity(噪 点不透明度)、Noise Density(噪点密度)来控制纹理效果。 通过 Background Color(背景⾊)、Noise Color(噪点颜⾊)来实现⾊彩的变化。

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

不过噪点与上⾯的渐变、边界不同,它⽣成后是⼀个图⽚概念的素材。相当于我们⽤ PS 做了个 杂⾊素材,所以可以进⾏ Export noise transparent(导出⽀持不透明度)、Dimensions(⼤ ⼩)的设置。另外,打开 Export noise transparent(导出⽀持不透明度)的话,能导出形同  PNG 图⽚⼀样的效果图。

设置好各项数值以后,如果你需要 URL 地址,则直接选中⽣成后的代码,然后 Ctrl/Command+C 即可。如果还需要导出图⽚的话,那就点⼀下灰⾊按钮 Download Noise Texture(下载噪点纹理)即可⾃动下载到本地。

Box Shadow盒⼦阴影

⽤「矩形投影」来形容它对设计师同学来讲应该会更便于理解。

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

我们可以对这个矩形进⾏ Horizontal Length(⽔平⻓度)、Vertical Length(垂直⻓度)、 Blur Radius(模糊半径)、Spread Radius(扩散半径)、Shadow Color(阴影颜⾊)、 Background Color(背景⾊)、Box Color(盒⼦颜⾊)、Opacity(不透明度)、 Outline/Inset(外投影/内阴影切换)这九项设置。

设计神器CSS_Matic!在线快速免费生成图层样式CSS代码网站

结语

CSS Matic 不仅可以服务于⽹⻚设计师,刚⼊⾏或者想⼊⾏前端的同学也可以⽤它来熟悉代码。 其实这类⼯具的对有蓝湖的我们来说,更直观的意义在于:了解代码,从⽽减少沟通成本。相信⼤家在以后的⼯作中会⽤到它,所以赶快来试试吧~

神器地址:CSS Matic

本⽂编辑:CCOA

看过这篇神器的朋友也看过…

2 收藏 1

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片