Fantazyjne dekoracje obrazu: kontury i złożone animacje

Ostatnie dwa artykuły z tej trzyczęściowej serii spędziliśmy bawiąc się gradientami, aby stworzyć naprawdę ładne dekoracje obrazów, używając wyłącznie element. W tym trzecim i ostatnim kawałku zamierzamy zbadać więcej technik przy użyciu CSS outline własność. To może zabrzmieć dziwnie, ponieważ generalnie używamy outline narysować prostą linię wokół elementu — coś w rodzaju border ale może narysować tylko wszystkie cztery boki na raz i nie jest częścią modelu pudełkowego.

Możemy jednak z tym zrobić więcej i właśnie z tym chcę poeksperymentować w tym artykule.

Zacznijmy od naszego pierwszego przykładu — nakładki, która znika po najechaniu myszą z fajną animacją:

Moglibyśmy to osiągnąć, dodając dodatkowy element na obrazie, ale właśnie to stawiamy sobie wyzwanie nie do zrobienia w tej serii. Zamiast tego możemy sięgnąć po CSS outline właściwości i dźwigni, że może mieć ujemne przesunięcie i może nakładać się na swój element.

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

Sztuką jest stworzenie outline jest tak gruby, jak połowa rozmiaru obrazu, a następnie przesuń go o połowę rozmiaru obrazu z wartością ujemną. Dodaj trochę półprzezroczystości z kolorem i mamy naszą nakładkę!

Reszta dzieje się dalej :hover. Aktualizujemy outline a przejście między obydwoma konturami tworzy fajny efekt najechania. Ta sama technika może być również wykorzystana do stworzenia efektu zanikania, w którym nie poruszamy outline ale uczyń to przejrzystym.

Zamiast używać w tym przypadku połowy rozmiaru obrazu, używam bardzo dużego outline wartość grubości (100vmax) podczas stosowania maski CSS. Dzięki temu nie trzeba już znać rozmiaru obrazu — ta sztuczka działa we wszystkich rozmiarach!

Możesz napotkać problemy przy użyciu 100vmax jako duża wartość w Safari. Jeśli tak jest, rozważ poprzednią sztuczkę, w której zastępujesz 100vmax z o połowę mniejszym rozmiarem obrazu.

Możemy posunąć się jeszcze dalej! Na przykład zamiast po prostu przycinać dodatek outline, możemy tworzyć kształty i stosować fantazyjną animację odsłaniania.

Fajnie prawda? The outline jest tym, co tworzy żółtą nakładkę. The clip-path przycina ekstra outline aby uzyskać kształt gwiazdy. Następnie po najechaniu kursorem zmieniamy kolor na przezroczysty.

Och, chcesz zamiast tego serc? Z pewnością możemy to zrobić!

Wyobraź sobie wszystkie możliwe kombinacje, jakie możemy stworzyć. Wszystko, co musimy zrobić, to narysować kształt za pomocą maski CSS i/lub clip-path i połącz go z outline sztuczka. Jedno rozwiązanie, nieskończone możliwości!

I tak, zdecydowanie możemy to również animować. Nie zapominajmy o tym clip-path jest animowany i mask opiera się na gradientach — coś, co bardzo szczegółowo omówiliśmy w pierwszych dwóch artykułach z tej serii.

Wiem, animacja jest trochę błędna. Jest to bardziej demonstracja ilustrująca pomysł, a nie „produkt końcowy” do wykorzystania w zakładzie produkcyjnym. Chcielibyśmy zoptymalizować rzeczy, aby przejście było bardziej naturalne.

Oto demo, które używa mask zamiast. To ten, którym droczyłem się z tobą pod koniec ostatni artykuł:

Czy wiesz, że outline nieruchomość była zdolna do tylu wspaniałości? Dodaj go do swojego zestawu narzędzi, aby uzyskać fantazyjne dekoracje obrazu!

Połącz wszystkie rzeczy!

Teraz, gdy nauczyliśmy się wielu sztuczek za pomocą gradientów, masek, przycinania i konturów, nadszedł czas na wielki finał. Zakończmy tę serię, łącząc wszystko, czego nauczyliśmy się w ciągu ostatnich kilku tygodni, aby pokazać nie tylko techniki, ale także pokazać, jak elastyczne i modułowe są te podejścia.

Jeśli oglądałeś te dema po raz pierwszy, możesz założyć, że do ich wykonania używa się wielu dodatkowych opakowań divów i pseudoelementów. Ale wszystko dzieje się bezpośrednio na element. To jedyny selektor, którego potrzebujemy, aby uzyskać te zaawansowane kształty i efekty!

Zamykając

O rany, dzięki za spędzanie czasu ze mną w tej trzyczęściowej serii przez ostatnie kilka tygodni. Zbadaliśmy wiele różnych technik, które przekształcają proste obrazy w coś przyciągającego wzrok i interaktywnego. Wykorzystasz wszystko, co omówiliśmy? Zdecydowanie nie! Ale mam nadzieję, że to dobre ćwiczenie, aby zagłębić się w zaawansowane zastosowania funkcji CSS, takich jak gradienty, mask, clip-path, outline.

I zrobiliśmy wszystko tylko jednym element! Bez dodatkowych obwolut div i pseudo-elementów. Jasne, jest to ograniczenie, które sami sobie nakładamy, ale zmusiło nas to również do zbadania CSS i znalezienia innowacyjnych rozwiązań dla typowych przypadków użycia. Tak więc, zanim wpompujesz dodatkowe znaczniki do kodu HTML, zastanów się, czy CSS jest już w stanie obsłużyć to zadanie.