当前位置: 博客 /  Tools  / CSS3 gradients辅助工具推荐——Ultimate CSS Gradient Generator

CSS3 gradients辅助工具推荐——Ultimate CSS Gradient Generator

工具推荐

使用gradients的使用并不复杂,学习地址:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients

但全部手写的效率较低,调试和管理也不太方便。

推荐一个好用的生成渐变CSS的在线辅助工具:Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

功能

最主要的有4个面板:

1. Presets面板

1.1 自带渐变色

在Presets面板,有很多默认自带的渐变色,可以直接使用。

1.2 保存当前设置

可以保存自定义的渐变色,方便后续使用和管理。

1.3 工具

hue/saturation:通过调节HSL值改变整体色调

HSL即色相、饱和度、亮度(英语:Hue, Saturation, Lightness)

reverse:将当前的渐变色顺序反向

import css:导入自定义的css代码,预览效果

import image:导入图片,自动读取渐变色

2. Preview面板

2.1 调整渐变方向

在Preview面板有5个渐变方向可选:

水平:horizontal →

垂直:vertical ↓

对角,右上或右下:diagonal ↗ 或 ↘

径向:radial o

2.2 更改预览窗口大小

通过拖拽预览色板右下角可以改变预览窗口的大小,方便查看。

2.3 查看IE浏览器下的效果

如果需要兼容低版本IE,可以勾选IE选项,查看在IE下的效果。

3. Stops面板

3.1 Opacity

点击色板上方的浮标,可以调节当前节点处的Opacity和Location

3.2 Color

点击色板下方的浮标,可以调节当前节点处的Color和Location

4. CSS面板

4.1 切换至SCSS

可通过标题右边的switch to SCSS切换为SCSS代码,当前可选格式包括CSS和SCSS

4.2 Color format

可以修改生成的CSS的代码的颜色格式,可选格式包括:

hex:十六进制颜色,如:#da8889

rgb:rgb格式,如:rgb(219,140,137)

rgba:rgba格式,有透明度时使用,如:rgba(219,140,137,0.8),则不透明度为0.8

hsl:色相、饱和度、亮度,如:hsl(17,80%,31%)

hsla: 色相、饱和度、亮度、不透明度,hsla(17,80%,31%,0.8)

4.3 Comments

是否保留生成的CSS中的注释代码

- END -