简评Photoshop CC新增的复制CSS功能

Photoshop CC于今日发布了,其中新增的复制CSS功能让很多朋友欣喜不已。将图形转化成CSS代码是一个相当不错的想法,不过这真的能减少工作量么?

于是我就去测试了下,先在画布上画了个简单的图形:

pic.png

然后使用Photoshop CC中的 图层 - 复制CSS 得到以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
.圆角矩形_1 {
  border-width: 1px;
  border-color: rgb( 0, 0, 0 );
  border-style: solid;
  border-radius: 10px;
  background-color: rgb( 153, 153, 153 );
  position: absolute;
  left: 104px;
  top: 143px;
  width: 298px;
  height: 156px;
  z-index: 2;
}

好吧我承认看到的瞬间我湿了,如果让我来写这段代码的话,应该是这样:

1
2
3
4
5
6
7
.pic {
    border: 1px solid #000;
    background: #999;
    border-radius: 10px;
    width: 298px;
    height: 156px;
}

非常简单的东西反而变的更加复杂了,简单来说Photoshop CC的复制CSS功能还存在很多不足的地方:1.不支持简写;2.存在多余的定位样式;3.颜色表示不够简洁。

就目前这个情况来说,此功能存在的意义不大。会写CSS的绝对不会用它,不会写CSS用它肯定会出错。如果你坚持要用的话……珍重。

评论

  1. LEO
    LEO

    网站收录不错啊~~~wordpress和photoshop cc在google首页都找打你了

    回复
  2. pwd1999
    pwd1999

    可视化工具生成的代码不靠谱,还是用sublime text开发比较高效

    回复
  3. 自由人
    自由人

    PS除了作图修图批处理,别的功能我好像没用过

    回复
    1. banri
      banri

      我连PS都不用。。。

      回复
  4. Emiloncy
    Emiloncy

    最重要的,写的那么渣的样式还是错的,内阴影没有、投影样式总是错误的…还没有第三方插件表现的好。

    回复
    1. banri
      banri

      这东西毕竟不靠谱。。。实在蛋疼

      回复
  5. Aivier
    Aivier

    我感觉各种代码生成,转换工具都不好,出来的代码都没法看

    回复
    1. banri
      banri

      _(:3」∠)_ 确实……

      回复
  6. 声仔thon
    声仔thon

    这东西大不大~

    回复
    1. banri
      banri

      优化包100多M

      回复
  7. 孙华
    孙华

    我用了下,倒是没发现这个功能,好东西啊。

    回复
    1. banri
      banri

      全部都是绝对定位 = = 。。。_(:3」∠)_ 而且好乱啊

      回复
  8. 道轍
    道轍

    话说这堆 CC 的东西是要下载的还是直接在云端使用啊……

    回复
    1. banri
      banri

      直接下载的。。。感觉没多大新意。。。

      回复
      1. 道轍
        道轍

        不是說需要付費訂閱神馬的嗎?(其實我一直很迷糊……)

        回复
        1. banri
          banri

          反正都是用补丁(……

          回复
          1. 道轍
            道轍

            中華民族智慧過人 = =~

            回复
  9. 沈梦姿
    沈梦姿

    看起来还不错哦

    回复
  10. 子瑜
    子瑜

    这很好像很好,只是用起来不知怎么样

    回复
  11. 枫叶红秋雨
    枫叶红秋雨

    css 从来不用工具生成。都是手写

    回复
    1. 一树小草
      一树小草

      羡慕~我的话CSS只要有能抄的绝对不会手写。。。

      回复
      1. banri
        banri

        _(:3」∠)_ 天下代码一大抄(。

        回复
    2. banri
      banri

      我也是 0 0

      回复
  12. an9
    an9

    肯定的,用软件自动生成的,和人手写的肯定不一样。

    回复
    1. banri
      banri

      _(:3」∠)_ 话说就连dw的自动也有点坑。。0 0

      回复
    2. banri
      banri

      确实手动更好些~

      回复
  13. 软件小品
    软件小品

    期待以后改进吧

    回复
    1. banri
      banri

      可惜现在连dw生成的代码都挺乱的...差太多了

      回复
  14. 夏宇轩博客
    夏宇轩博客

    这个会又方便了不少

    回复