nocss

A css visualization website, edit styles, generate css code for you

nocss

项目地址http://47.93.246.89:8080/nocss/index.html (感谢xkk同学的提供的垃圾服务器!)
CSS在线可视化工具,定制你的样式,并生成css代码。
还没有开发完成,但是核心功能已经可以用了。
暂时没有做浏览器兼容,暂时没有做分辨率兼容

BUG

  1. 代码区动画节点顺序可能不正确,如:一开始是0%100%,新增一个50%,会跑到100%的后面
  2. 添加多个box-shadow时,用list的话,只能设置一次颜色。
    但是不用list的话,由于全局的点击外部隐藏选择框方法,多个选择框会冲突,导致一个都显示不出来。同理还有text-shadow等存在多个值且有颜色选择器的属性
  3. transition属性没有transition-delay
  4. 动画区动画节点所在div不能滚动
  5. 动画区bug灾难区…

待修改

  1. submit()删除某个css键值对的正则
  2. 小看了text-decoration,其功能远不止如此
  3. input内值为空时对应值应该置为0
  4. 部分组件的代码没有美化处理,因为代码需要修改,如box-shadowtext-shadowoutline
  5. 添加动画节点时的错误反馈,如已添加,不符合规范的文本等要禁止粘贴事件吗?
  6. 现在重置只能重置基本,不能重置伪类和动画
  7. 有“已选择”的下拉框在动画中还没实装
  8. 给表单组件中的checkboxradio添加样式,暂时没有研究range,如果麻烦的话直接放弃,毕竟涉及到了html
  9. 变形,删除子项时,删到只剩一个的时候,会留下transform:,如果用户此时不进行操作的话,这个显然错误的代码会一直留着
  10. 右上角重置只能重置standard

新点子

  1. letter-spacing属性
  2. border-radius属性
  3. 单位可选,pxem
  4. border-image
  5. 动画节点处添加吸顶锚点
  6. 加入预设方案
  7. 现在各个属性组件只能单向地给code传递参数。需要从code中获取对应属性的值,通过props传入各个属性组件中
  8. 图片的object-fit属性,如果用户选了这个属性,就取消掉article对图片大小的限制

后端可以加什么?

  1. 列表可拖拽,用户保存其列表顺序