Narzędzia frontendowca – Gradient

Dzisiaj chciałbym przedstawić kolejny program, który już jest u mnie zainstalowany od ponad miesiąca i mogę go szczerze polecić.

Jak wiadomo gradienty w CSS są już bardzo dobrze wspierane przez wszystkie współczesne przeglądarki. Nawet starsze wersje Internet Explorer potrafią wygenerować gradient za pomocą filter: progid:DXImageTransform.Microsoft.gradient, więc śmiało można używać stylów CSS do tworzenia prostych gradientów na stronie.

Dobry kod generujący gradienty wpierający większość przeglądarek wygląda następująco:

[cc lang=”css” escaped=”true”]

background-color: #67a9d7;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(103, 169, 215)), to(rgb(41, 88, 162)));
background-image: -webkit-linear-gradient(top, rgb(103, 169, 215), rgb(41, 88, 162));
background-image: -moz-linear-gradient(top, rgb(103, 169, 215), rgb(41, 88, 162));
background-image: -o-linear-gradient(top, rgb(103, 169, 215), rgb(41, 88, 162));
background-image: -ms-linear-gradient(top, rgb(103, 169, 215), rgb(41, 88, 162));
background-image: linear-gradient(top, rgb(103, 169, 215), rgb(41, 88, 162));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#67a9d7′, EndColorStr=’#2958a2′);

[/cc]

Jak widać, jeśli już wszystko zawiedzie, to i tak mamy deklarację background-color, która  da nam ostatecznie jednolity kolor tła i efekt nie będzie zły.

No i właśnie tutaj z pomocą przychodzi aplikacja Gradient (oczywiście dla systemu Mac OS X), bo komu by się chciało ciągle generować taki kod ze stron typu CSS3 Gradient Generator czy kopiować snippet i podmieniać kod koloru, prawda?

Oto jak wygląda aplikacja:

Obsługa jest banalnie prosta. Na górze mamy dwa pola, gdzie definiujemy kolory gradientu. Możemy sami wpisać kod koloru, pobrać go za pomocą kroplomierza lub wybrać z palety kolorów. W dolnej części mamy możliwość dostosowania wynikowego gradientu. Możemy zmienić jego kierunek, a także miejsce, z którego będzie się rozchodził gradient (np. z prawego górnego rogu lub od środka). Na koniec najważniejszy przycisk – Copy. Po jego kliknięciu do naszego schowka zostaje skopiowany kod pokazany w przykładzie na początku tego wpisu. Oprócz tego po przyciśnięciu CSS mamy podgląd wygenerowanego kodu.

W opcjach programu mamy możliwość zdefiniowania skrótów klawiszowych oraz coś bardzo przydatnego – możemy wybrać, które przeglądarki mają być wspierane w generowanym kodzie.

Na koniec muszę wspomnieć o rzeczy najmniej przyjemnej – oczywiście o cenie. Aplikacja kosztuje 4,99€, czyli około 20zł. Program dostępny jest a Mac App Store. Warto również odwiedzić stronę programu Gradient, bo posiada sporo przydatnych informacji i jest po prostu fajnie wykonana.