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.
Aby 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:
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
Ciekawa opcja, muszę wypróbować. Jestem tylko ciekaw czy plugin jest dostępny na starsze wersje PS-a
Na starszych wersjach Photoshopa (CS4, CS5, CS6) działa CSS Hat 1 – https://madebysource.com/product/csshat/