CSS Hat 2 to plugin dla Photoshopa, który doskonale wkomponował się w mój styl pracy (workflow). Fantastycznie oszczędza czas zwłaszcza przy generowaniu kodu CSS dla gradientów oraz cieni, gdzie do tej pory trzeba było dostosowywać style na oko.

Zasada działania

Po zainstalowaniu pluginu pokazuje nam się nowy panel w Photoshopie, w którym generowany będzie kod CSS.

Panel pluginu CSS HatAby sprawdzić go w akcji musimy otworzyć plik PSD i wybrać dowolną warstwę. W tym momencie pokazuje nam się wygenerowany kod CSS. Grafika poniżej powinna dobrze zobrazować zasadę działania:

CSS Hat w akcji
CSS Hat w akcji

Jak widać narzędzie to może nam zaoszczędzić sporo czasu. Najczęściej używam go do wygenerowania:

  • właściwości tekstu (rozmiar, grubość, kolor, cienie)
  • kolorów tła (jednolity kolor lub gradienty)
  • cieni dla elementów
  • rozmiarów warstw
  • wartości zaokrąglenia rogów

Dodatkowe opcje CSS Hat 2

Oprócz podstawowej funkcjonalności możemy również włączyć dodanie prefixów dla różnych przeglądarek (np. -webkit-box-shadow).

Druga interesująca rzecz, to możliwość generowania kodu dla Less, Sass lub Stylus w samym CSS Hat. Jeśli mamy w projekcie dołączony odpowiedni plik z funkcjami/mixins, to możemy bezproblemowo korzystać z przyjemniejszego i prostszego kodu dla preprocesora.

Ja akurat z obu opcji nie korzystam, bo w projektach używam autoprefixera, ale może to być niezła opcja dla niektórych osób.

Na koniec

Szczerze polecam CSS Hat 2. Plugin potrafi zaoszczędzić nam w ciągu dnia cenne minuty, które pozwolą nam być bardziej efektywnymi w pracy. O to zawsze warto walczyć wink

Link do CSS Hat 2