V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
nzbin
V2EX  ›  分享创造

一款精美的 CSS 渐变可视化组件,支持所有 CSS 渐变语法的双向绑定!

  •  
  •   nzbin ·
    nzbin · 6 天前 · 1187 次点击

    • 支持所有 CSS 渐变语法
    • 支持触摸屏
    • 支持 A11y 和键盘操作
    • 模块化组件设计
    • 丰富的 CSS 变量

    比较特殊的 CSS 渐变语法

    如果颜色断点只写偏移不写颜色就会形成一个 color hint 的操控点(可视化组件中直接删除颜色值即可),也就是 PhotoShop 渐变中两个颜色断点之间的小菱形

    如果两个相邻断点的颜色相同就可以把偏移值合并在一起,但是在语法解析的时候还是会拆成两个,每个颜色断点的偏移值最多可以定义两个

    可视化组件默认不显示色彩插值方式,只有写了 in 关键字才会被解析,关于色彩插值方式详见 MDN

    ⭐ 源码: https://github.com/acrodata/gradient-picker

    🕹️ 演示: https://acrodata.github.io/gradient-picker/

    2 条回复    2025-08-27 09:26:41 +08:00
    summerwar
        1
    summerwar  
       5 天前
    使用了下,感觉不错。

    有个小小的建议,可以增加一点浅色系,或者说流行的渐变色作为样式,感觉你页面上现有的,有点 office 2003 那个时代的感觉,从网上找了个图片,如下图

    nzbin
        2
    nzbin  
    OP
       5 天前
    @summerwar 好主意,这就安排上
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   902 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 18ms · UTC 21:37 · PVG 05:37 · LAX 14:37 · JFK 17:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.