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

Automatyczne kolorowanie zdjęć dzięki AI

Kiedyś już pisałem o kolorowaniu zdjęć specjalnym algorytmem (o tutaj), jednak tym razem to co innego. Tym razem wszystko dzieje się automagicznie, automatycznie, w oparciu o sztuczną inteligencję (a raczej o uczenie maszynowe, bo prawdziwa AI jeszcze nie istnieje).

Chodzi o colorize-it.com – stronę na której można automatycznie pokolorować zdjęcie. Na przykład takie jak zdjęcie wyróżniające tego posta. Efekty może i są niezłe, ale niezadowalające dla odbiorcy, szczególnie przy zdjęciach które zawierają obszary o nieoczywistych kolorach, a do tego te obszary przenikają się między sobą:

Jednak po kilku drobnych korektach w Photoshopie – algorytm może być bardzo pomocny. Aczkolwiek – jak dla mnie jest to nadal raczej ciekawostka.

BTW. ostatnio obiło mi się o uszy że Google Photos ma mieć za niedługo opcję automatycznego kolorowania. Ciekawe jak się sprawdzi – w końcu GP ma potężną próbkę zdjęć do uczenia maszynowego…

Filtrowanie obrazków w locie


CanvasQuery jest biblioteką dla elementu HTML5 ‚Canvas’, która pozwala na stosowanie z jQuery. Umożliwia stosowanie różnych metod manipulacji na grafikach, przeznaczonych co prawda dla developerów gier, ale moze webdesignerzy też coś z tym zrobią… Można na przykład w locie zapodać efekt grafiki z C64 :)

Na stronie CanvasQuery znajdziemy full-wypas rozpiskę, jak stosować tą sztuczkę, gdzie stosować, oraz wdrożenia popularnych efektów.

Fajna sprawa – zerknij na demo, aby się przekonać. ;)

Classic Color

<a href=”http://www official site.classic-color.com”>Kolejna „prosta” witryna, która wiele zyskuje przy przewijaniu… Fajna animacja, w HTML5, CSS3 i JS… W związku z takimi stronami (choć chyba należałoby wymyślić nowe określenie na takie prezentacje multimedialne), bardzo podoba mi się kierunek, w którym podąża sztuka internetowa. :)

Neon flames – kolejny generator teł

Pamiętacie Silk? Była to zabawka/eksperyment – mini aplikacja graficzna, w której można było generować trójwymiarowe półprzezroczyste „materie”. Efektem kilkunastu sekund bezładnego machania myszką jest obrazek wart zastosowania jako tło w dowolnej aplikacji rozrywkowej lub na stronie internetowej … lub jako tło na pulpit.

Otóż teraz mamy do czynienia z podobną zabawką – „Neon Flames” to webaplikacja (btw., napisana w HTML5 przez szwacarskiego programistę, który popełnił wiele innych ciekawych eksperymentów webowych) umożliwiająca stworzenie form graficznych, których wygląd można porównać do widoku galaktyk i mgławic. Wychodzi toto świetnie, a zabawa jest przednia, tym bardziej że do dyspozycji mamy, oprócz kolorów, także inne parametry „pędzla”.

ColorHexa – kolorystyczny kombajn

<a href=”http://www check this link right here now.colorhexa.com/”>Narzędzi kolorystycznych w Sieci jest wiele, i na tym blogu ten temat był już poruszany wielokrotnie (jeśli nie wierzysz – przeklikaj się przez powiązane tagi). jednak to narzędzie – ColorHexa – zasługuje na wzmiankę głównie ze względu na swoją przejrzystość i użyteczność. Niby jest to kombajn – można mieszać kolory, palety, generować gradienty i kombinować na wiele innych sposobów. A jednak, mimo mnogości funkcji – aplikacja przedstawia się i działa bardzo funkcjonalnie. Wszystko co potrzebne – jest na swoim miejscu, dostępne wtedy gdy powinno być dostępne. Po prostu witryna napisana w sposób przemyślany i przetestowany. Korzystanie z takich rozwiązań przyspiesza tworzenie twoich projektów, a więc pozwala Ci więcej zarabiać. decydowanie warto porzucić kilka innych narzędzi, dla ColorHexy.

Silk – zabawka, czy generator grafiki?

Wpadłem ostatnio na webaplikację „Silk”, dzięki której można kilkoma kliknięciami i pociągnięciami myszy wygenerować efektowną, kolorową grafikę. Grafika „rysuje się” w ciekawy sposób, podczas której istnieje możliwość sterowania wiatrem (shift+ruchy myszką) a efekt możemy zapisać. Można też powtórzyć animację. Zabawa przednia, przynajmniej na kilka minut. Lubię takie interaktywne dema, pokazują one moc komputerów i Internetu jako narzędzi.

Jednak zastanawiam się, czy grafik wygenerowanych za pomocą „Silka” nie użyć przy projektowaniu stron. A jak wygląda sprawa praw autorskich? Co prawda pierwszą kreskę narysowałem ja, ale resztę wykonał algorytm, który zaprojektował twórca narzędzia. Tak czy owak – rzecz ciekawa przynajmniej do obejrzenia.

Rewelacyjny generator gradientów CSS

Jak wiadomo, tworzenie zaawansowanych gradientów „z palca” nie jest łatwe. Dlatego szukałem dobrego generatora. I w końcu znalazłem czego szukałem.

Webnarzędzie do generowania różnorakich gradientów kolorystycznych dla elementów CSS3, ze wszystkimi przydatnymi opcjami i bajerami. Intuicyjne, łatwe w obsłudze, szybkie i skuteczne. Oparte na rozwiązaniach GUI znanych z programów graficznych. Generujące w czasie rzeczywistym kod CSS kompatybilny ze wszystkimi nowoczesnymi przeglądarkami. Umiejące także importować gradient z kodu CSS, a nawet z obrazka. No i posiadające zbiór predefiniowanych  gradientów – rewelacja. Są tam także gradienty z efektem szkła, odbić, gładkie delikatne przejścia kolorystyczne (trudne do uzyskania i „wyczucia”) itp. cuda. Można także zapisać swoje gradienty.

Zdecydowanie przyda się każdemu tworzącemu nowoczesne strony WWW.

Ale o czym mowa? O narzędziu Ultimate CSS Gradient Generator. Polecam.

Kolorowe kombinacje

Nie lejąc wody: colorcombos.com to jeden z serwisów zajmujących się schematami kolorystycznymi stron www i publikacji. Posiada bazę schematów, tester kolorów i kikla innych opcji, ale dla mnie najważniejszą jest możliwość „ściągnięcia” schematu kolorystycznego dowolnej strony poprzez podanie jej adresu URL. Nie wiem, jak to działa, ale działa i jest fajne i przydatne. :)