alexovs Nov 29 2013 at 19:11

05 Collector: ссылки для дизайнеров и разработчиков

2 min

19K

Uprock corporate blogWeb design*

+10

Comments 12

CodeByZen Nov 29 2013 at 20:09

А чем отличается CSS3Ps или CSS Hat от экспорта стиля слоя в css стандартными средствами PS CC?

teolink Nov 29 2013 at 20:29

В фотошопе эта функция появилась недавно. И всегда должен быть выбор :)

alexovs Nov 29 2013 at 20:36

Во-первых, не все знают, что это можно сделать средствами самого Photoshop :) Во-вторых, далеко не у всех он обновлён до СС. В-третьих, в CSS Hat, например, можно получить код просто кликнув на слое. А в CSS2PS – есть возможность скомипилировать в SASS

CSS3Ps Nov 29 2013 at 21:02

Главная разница в том, что css hat отображает код в панели фотошопа,
а CSS3Ps генерирует страницу с превью на сервере.

В Photoshop CC появилась эта функция позже нас и пока не дотягивает.

CodeByZen Dec 1 2013 at 00:34

Правой кновкой на слое, Copy CSS
И получается вот такое


.Rounded_Rectangle_1 {
  border-style: solid;
  border-width: 3px;
  border-color: rgb( 255, 0, 0 );
  border-radius: 10px;
  background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
  position: absolute;
  left: 239px;
  top: 131px;
  width: 238px;
  height: 180px;
  z-index: 2;
}

И это не все возможности (как я понял)
И этого IMHO вполне достаточно (мне). =)

CSS3Ps Dec 2 2013 at 17:59

Я не спорю, кому-то этого будет достаточно.
А кому-то нужна поддержка SCSS, SAAS, внуниенних теней, внутреннего свечения, внешнего свечения, продвинутое скругление углов и предпросмотр результата.

Чтобы не быть голословным, я для теста нарисовал кнопку и вот результаты:

Можете и сами перепроверить, PSD тут: cl.ly/Skbs

CSS3Ps Nov 29 2013 at 21:09

Спасибо за упоминание наших плагинов: www.renamy.com и www.css3ps.com

Буквально только, что выпустили новый плагин — www.zeick.com для экспорта векторных шейпов из Photoshop в SVG файлы. Надеюсь появится в Collector 06 :)