Edycja zdjęć w CSS: Łączenie technik

() translation by (you can also view the original English article)

W ostatnich dwóch tutorialach tej serii dowiedzieliśmy się, jak za pomocą filtrów i trybu wtapiania kompletnie zmienić wygląd zdjęcia. W tym tutorialu opowiem o podstawach obróbki zdjęć z wykorzystaniem obu właściwości naraz.

Podstawy

Każda obróbka zdjęć, która wykracza poza najprostsze podstawy, wymaga na ogół użycia więcej niż jednego elementu. Możemy używać do tego pseudoelementów. Pojawia się tu tylko jeden problem: element img mieści się w obrębie elementów podmienianych, dlatego :before i :after nie będą działały dla tagów obrazka. Aby się z tym uporać, musimy stworzyć dla obrazka wrapper (opakowanie). Najlepiej nadaje się do tego tag figure. Kod powinien więc wyglądać mniej więcej tak:

1	<figure>
2	<img src="image-url">
3	</figure>

Wszystkie efekty edycji, nad którymi będziemy pracować, będą korzystać ze wspólnego wyjściowego CSS.

figure {
  position: relative;
}

figure:before,
figure:after {
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Dzięki użyciu pseudoelementów :before i :after mogę teraz skorzystać z kilku różnych trybów wtapiania (blend modes). Zauważ, że ustawiłem width i height na 100%, aby w całości objąć figure, i użyłem pozycjonowania absolutnego, które pozwoli na dokładne dopasowanie.

Na ogół do nakładania filtrów na zdjęcia czy też do wtapiania lub innych efektów będziemy wykorzystywać właśnie pseudo elementy. Zdjęcie poniżej posłuży nam jako punkt wyjścia do obróbki.

image of motorcycle as example for editing

Zdjęcie czarno-białe o dużym kontraście

By utworzyć zdjęcie o dużym kontraście, możesz po prostu podnieść wartość kontrastu, jeśli jednak zwiększysz dodatkowo jasność, uzyskasz bardziej dramatyczny efekt. Gdybyśmy korzystali wyłącznie z filtrów, na tym mniej więcej kończyłyby się możliwości. Korzystając z trybu wtapiania możesz jednak dorzucić jeszcze cień do wewnątrz (inset box-shadow) z wtapianiem nakładkowym (overlay), co da jeszcze ciekawszy wynik.

img {
  filter: contrast(1.8) brightness(1.5) grayscale(1);
}

figure:before {
  z-index: 3;
  mix-blend-mode: overlay;
  box-shadow: 0 0 200px black inset;
}

Właściwość z-index sprawi, że nasze pseudo elementy znajdą się powyżej zdjęcia. Ja wykorzystałem wtapianie nakładkowe, by zdjęcie po nałożeniu cienia box-shadow było nieco ciemniejsze.

Przesuwając myszką ponad zdjęciem, możesz sprawdzić, czym różnią się poszczególne filtry, zestawy filtrów oraz tryby wtapiania.

Aby poćwiczyć, poeksperymentuj z różnymi wartościami dla box-shadow na CodePen demo.

Postarzanie zdjęć

Kolory na starych fotografiach na ogół są wyblakłe, a na brzegach pojawia się czerwonawo-brązowa smuga. Aby odtworzyć ten efekt, musimy skorzystać z kolejnych elementów i filtrów. Nasz CSS będzie wyglądał tak:

img {
  filter: saturate(0.6);
}

figure {
  filter: contrast(1.1) saturate(1.9) sepia(0.7) grayscale(0.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 250px brown inset;
  background: rgba(125, 100, 0, 0.3);
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 150px pink inset;
  background: rgba(198, 155, 0, 0.3);
}

Tym razem zastosowałem filtry zarówno do image, jak i do figure. Generalnie chodzi nam o to, by zdjęcie stało się mniej kolorowe. Osiągniemy to za pomocą filtra nasycenia (saturate) o wartości niższej niż 1. Filtry na figure nakładamy już po całym wtapianiu. Jeśli nie nałożysz tych filtrów, odcienie brązu na wynikowym zdjęciu zostaną mocno uwydatnione, a nie o to nam chodzi.

Zauważ, że użyłem również półprzezroczystego tła dla obu pseudoelementów. Nadaje to zdjęciom czerwonawo-brązowy odcień. Box-shadow wykorzystałem do tego, by nadać obrysowi odcień nieco bliższy brązowemu.

Aby uzyskać jak najlepszy rezultat, poeksperymentuj z różnymi właściwościami w demo.

Zmiana zabarwienia

Tym razem nadamy zdjęciu błękitne zabarwienie (hue). W przeciwieństwie do barw ciepłych, dołożenie chłodnych odcieni, np. niebieskiego, sprawi, że zdjęcia będą mniej męczyły wzrok.

Oto CSS, który musimy wprowadzić:

img {
  filter: brightness(1.1) contrast(1.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 100px rgba(100, 150, 200, 1) inset, 0 0 300px rgba(100, 150, 200, 1) inset;
}

figure:after {
  z-index: 3;
  mix-blend-mode: difference;
  background: rgba(0, 0, 255, 0.3);
}

Na początek zwiększę jasność i kontrast zdjęcia. W ten sposób upewnimy się, że mniej wyraziste barwy nie znikną, a samo zdjęcie nie stanie się w wyniku edycji nazbyt wyblakłe.

Na ogół musimy użyć kilku box-shadow o jasnych barwach na raz, by zmiany były zauważalne. Właśnie dlatego dodałem do zdjęcia dwa błękitnawe box-shadow. Gdy użyjemy samego box-shadow, błękitnego odcienia nabierze tylko sam brzeg obrazka. Aby rozprowadzić błękitną barwę po całym zdjęciu, użyłem jej jako tła (background) w pseudoelemencie :after. Tak wygląda rezultat użycia wszystkich filtrów na raz:

Spróbuj nadać zdjęciu zielone lub czerwone zabarwienie w demo.

Żółtawa mgła

Czy zdarzyło Ci się kiedyś w lekko pochmurny wieczór widzieć drobiny piasku w powietrzu, niesione wiatrem? W takich warunkach pogodowych wszystko nabiera żółtawego zabarwienia, a przedmioty wydają się nieco wyblakłe. Aby odtworzyć ten efekt, skorzystamy z takiego oto kodu CSS:

img {
  filter: saturate(0.2);
}

figure {
  filter: contrast(1.8) brightness(1.1) saturate(1.5);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 100px rgba(0,0,0,0.5) inset;
  background: rgba(125, 100, 0, 0.3);
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 500px rgba(0,0,0,0.6) inset;
  background: rgba(198, 155, 0, 0.3);
}

Na początek ograniczam nasycenie (saturation) zdjęcia. Tak pseudoelement :before, jak i :after otrzymują transparentne żółtawe tło, co nadaje odpowiednie zabarwienie. Jeśli użyjemy metody wtapiania hard-light pod :after, mgła będzie gęstsza.

Box-shadow przy pseudoelementach zogniskuje uwagę na motocykliście. I na zakończenie, gdy nadamy wysoki kontrast (contrast), jasność (brightness) i nasycenie (saturation) elementowi figure, wzmocnimy mgłę.

W naszym demo możesz wypróbować różne wartości dla poszczególnych właściwości stylu, by przekonać się, jak wpłynęłyby one na ostateczny rezultat.

Podsumowując

Edytowanie zdjęć w CSS nie jest trudne. Jeśli zapamiętasz uwagi, które dawałem w tym tutorialu, na pewno samodzielnie stworzysz wiele kapitalnych filtrów.

Dla praktyki poeksperymentuj z przykładami z tego tutorialu albo spróbuj odtworzyć niektóre z filtrów z Instagrama. Możesz też przejrzeć bogaty wybór filtrów i efektów z Envato Marketplace, jeśli szukasz akurat filtrów gotowych do wykorzystania.