Jedną z najbardziej nieocenionych funkcji Photoshopa - prawdopodobnie cechą napędzającą ją przed konkurencją - są tryby mieszania. Tryby mieszania zajmują dwa nałożone na siebie piksele i łączą je na różne sposoby, na przykład w trybie ciemniejszego mieszania kolorów po prostu ciemniejszy z dwóch pikseli. Po rozwinięciu na całym obrazie tryby mieszania mogą wywoływać oszałamiające efekty.
Chociaż Adobe Photoshop nie wynalazł trybów mieszania, jego implementacja jest z pewnością najbardziej emulowana. Ale teraz nie potrzebujesz programu Photoshop do stylizowania zdjęć w ten sposób, ponieważ możemy zrobić to wszystko dynamicznie za pomocą CSS3.
W obecnej formie, obsługa przeglądarki dla CSS zmienia się właściwość trybu-tła . Wcześniejsze wersje przeglądarek wymagały prefiksów dostawców i / lub aktywacji funkcji eksperymentalnych, ale caniuse.com zgłasza obsługę w aktualnych wersjach Chrome, Firefox i Opera, a wkrótce pojawi się przeglądarka Safari.
Nie ma jeszcze śladu wsparcia IE, ale ponieważ tryby mieszania są postępowym ulepszeniem, możemy zacząć zastanawiać się nad ich użyciem.
W rekomendacjach kandydujących do CSS3 istnieje wiele opcji trybu mieszania, ale najbardziej przydatnym do naszych celów jest tryb mieszania tła . Ta właściwość pozwala nam mieszać dwa obrazy lub obraz i kolor tła.
Oto kod, którego potrzebujemy:
A oto nasz podstawowy CSS:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Jesteśmy teraz gotowi do dodania trybów mieszania.
Aby to zrobić, dodamy do naszego div dodatkową klasę, na przykład "pomnóż":
Następnie utworzymy drugą regułę stylu:
.blend.multiply{background-blend-mode: multiply;}Jeśli chcesz rzucić okiem na kod, możesz pobierz tutaj pliki źródłowe.
Pomnóż , jak sugeruje nazwa, mnoży piksel bazowy przez kolor mieszania, powodując ciemniejszy kolor. Mnożenie czarnych wyników w kolorze czarnym i mnożenie białych pozostawia niezmieniony obraz.
background-blend-mode: multiply;Nakładka to złożony tryb mieszania. Mnożenie zależy od koloru podstawowego: jasne kolory stają się jaśniejsze, ciemniejsze stają się ciemniejsze.
background-blend-mode: overlay;Biegunowe przeciwieństwo przyciemnienia , rozjaśnienia rozjaśnia obraz poprzez porównanie dwóch zachodzących na siebie pikseli i wybór zapalniczki z dwóch.
background-blend-mode: lighten;Palenie kolorów jest biegunowym przeciwieństwem unikania kolorów , przyciemnia podstawowy kolor, zwiększając kontrast.
background-blend-mode: color-burn;Miękkie światło jest podobne do twardego światła , ale zamiast pomnażania lub przesiewania kolorów, miękkie światło wykorzystuje unik i pali, aby uzyskać subtelniejszy efekt.
background-blend-mode: soft-light;Wykluczenie jest podobne do różnicy , ale daje mniejszy kontrast, więc jest nieco bardziej użyteczne.
background-blend-mode: exclusion;Nasycenie , podobnie jak barwa , łączy dwie wartości koloru bazowego z jedną właściwością koloru mieszanego, w tym przypadku nasycenia.
background-blend-mode: saturation;Jasność jest przeciwieństwem koloru , łączy w sobie odcień i nasycenie koloru podstawowego i luminancję koloru mieszanego.
background-blend-mode: luminosity;