W związku z sobotnimi wydarzenia i tygodniową żałobą narodową dużo serwisów internetowych „przyjęło” na ten czas żałobne kolory, czyli odcienie szarości. Dzisiejszy wpis, choć nie przewidywałem, że kiedykolwiek powstanie jest poświęcony właśnie „wprowadzeniu” takiej żałoby na naszej stronie. Wykorzystamy do tego plugin jQuery, który nazywa się „Grayscale”.
Zanim jednak o samym pluginie, to kilka słów tytułem wstępu. Jednym z rozwiązań na wprowadzenie na swojej stronie ocieni szarości jako oznaka żałoby wydaje się dostosowanie odpowiednio swojego stylu CSS oraz wszystkich obrazków wykorzystywanych na stronie. Rozwiązanie to jednak jest bardzo pracochłonne. Można również zastosować w arkuszu stylu CSS odpowiedni filtr, poprzez dodanie kodu:
1 2 3 | * { filter: gray; } |
Jednak rozwiązanie takie ma jedną podstawową wadę. Filtry są obsługiwane tylko przez przeglądarkę Internet Explorer, a co za tym idzie nasza strona będzie normalnie wyglądać pod innymi przeglądarkami. Jeśli nasza strona w 99% jest oglądana z wykorzystaniem IE, to można zastosować takie rozwiązanie, w przeciwnym razie należy zastanowić się nad innym rozwiązaniem.
Ja wykorzystam w tym celu plugin jQuery o nazwie „Grayscale”, który możecie pobrać stąd. Pamiętaj, że aby z niego skorzystać musisz mieć pobraną bibliotekę jQuery! Pliki te umieszczamy w głównym katalogu naszej strony.
Rozpoczynamy od umieszczenia w sekcji <head>…</head> odwołań do ściągniętych plików:
1 |
To już prawie wszystko. Za zamianę kolorów i obrazków na naszej stronie na ich szare odpowiedniki odpowiada funkcja grayscale() w załączonym pliku grayscale.js. Pozostaje jedynie kwestia włączenia i wyłączenia funkcji. Wszystko również odbywa się w sekcji <head>…</head>. Jeśli chcemy włączyć efekt szarości na całej stronie wstawiamy kod:
1 2 3 4 5 6 7 8 9 |
W przypadku chęci poszarzenia wszystkich divów w szóstą linijkę podmieniamy na:
1 | grayscale( $('div') ); |
Możemy również przywrócić naszą stronę do poprzednich kolorów za pomocą poniższego kodu:
1 2 3 4 5 6 7 8 |
Przykład wykorzystania tej funkcji możecie znaleźć tutaj.
Popularity: 4%
Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. 
Szkoda że nie działa pod innymi przeglądarkami. Wygląda na to, że nie ma dobrego i szybkiego rozwiązania.
Można zawsze stworzyć dodatkowy styl w odcieniach szarości, takie rozwiązanie zadziała pod wszystkimi przeglądarkami, tylko jest bardziej pracochłonne.