Filtry CSS

Wiedzieliście że CSS umożliwia bardzo szerokie manipulacje za pomocą filtrów? Wszystkie takie jak powyżej w ilustracji, poniżej są w kodzie:

.saturate {-webkit-filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%);}

Niby z przedrostkami -webkit, ale działa też w Firefoxie… :)

Tutaj można zobaczyć działający przykład:
https://codepen.io/rss/pen/ftnDd

Darmowy generator wykresów

Quickchart.io to rewelacyjny system łatwego generowania wykresów w czasie rzeczywistym, poprzez zmianę parametrów w nazwie obrazka wykresu.

Rewelacyjnie to działa. Podajesz tytuły, wartości, typ wykresu, kolory, skale – po prostu wszystko. I aby przyspieszyć cały proces – możesz edytować kod wprost pod powyższym linkiem, a potem wkleić na swoją stronę.

Proste, użyteczne, wygodne. Takich narzędzi szukamy. :)

Sprawdzanie poczucia estetyki UI/UX

Zobaczcie cantunsee.space.

Can’t unsee to pseudo-gra, w której musisz oznaczyć bardziej prawidłowy (ze wszechmiar) projekt elementu interfejsu graficznego.

Na początku jest łatwo i prosto, potem następuje kilka błędów, a potem trzeba się dobrze przypatrzyć, żeby oznaczyć ten dobry obrazek. Trudne, czasochłonne, ale uczące i dające dużo satysfakcji. Szczególnie projektantom. Polecam Can’t unsee – nie będzie to czas zmarnowany!

Zrób sobie gluta

Mogłoby się wydawać, że stworzenie grafiki z losowym kształtem, który jednak nie jest totalnie losowy, ale jako-tako pasuje do naszej wizji, jest proste.

I może nawet tak jest – po kilku próbach masz spoko losowy kształt…
Ale potrzebujesz takich jeszcze 10. I muszą się różnić od siebie.

Zaczyna być niełatwo, prawda?

Nieprawda. Bo wystarczy odpalić Blobmakera. To mała webappka która tworzy gluty, bloby, i inne losowe kształty.
Możemy sobie ustawić kolor, złożoność i stopień zakrzywiania nibynóżek. ;)
I możemy wynik ściągnąć w svg.

I to jest spoko, niczego więcej nie trzeba. A teraz kliknij powyżej i zrób sobie gluta.

Podcast dla grafika

Jakiś czas temu zadałem na grupie FB Co znosi psychika grafika pytanie o podcasty dla grafików. Ilość odpowiedzi przerosła moje oczekiwania, zdecydowanie będę miał czego słuchać w drodze do Klientów przez następne 10 lat.

Tyle że jeśli to zostawię na FB, to zgubię. Dlatego przepisuję tutaj.

Uwaga: Poniższe podcasty są nietestowane (ale będą!).
Są jednak polecane przez grafików i projektantów:

Clippy – narzędzie do tworzenia kształtów

Clippy to wdzięczna nazwa dla bardzo przydatnego narzędzia, które jest kreatorem wizualnym kształtów/masek generującym za pomocą polecenia css clip-path (i odpowiednich prefixów) kod kształtu. Potrzebne, używane, zapisane w ulubionych.

Isotope

isotopeŚwietny mechanizm graficznego filtrowania/sortowania przedstawia sobą skrypt Isotope. Wygląda to przefajnie, a możliwości ma wiele. Jesli nie do końca kumasz o co mi chodzi (bardzo możliwe – trudno w krótkim wpisie obrazowo opisać działanie Isotope) – kliknij i sprawdź sam(a).

Parallax na Twojej stronie www

Ostatnio modne są „nowoczesne” strony, w których podczas przewijania, pojawiają się i znikają paski z ilustracjami/tekstem. To tak zwany parallax effect – „fragment strony przesuwa się z inną prędkością niż pozostałe, co daje pewne złudzenie trójwymiarowości„.

U Webmastaha od jakiegoś czasu jest pożyteczny tutorial, jak taki efekt w prosty sposób wykonać. Warto się chociaż przeklikać.