Fantazyjne dekoracje obrazu: maski i zaawansowane efekty najechania

Witamy w drugiej części tej trzyczęściowej serii! Nadal dekorujemy obrazy bez dodatkowych elementów i pseudoelementów. Mam nadzieję, że poświęciłeś już czas na strawienie Część 1 ponieważ będziemy kontynuować pracę z wieloma gradientami, aby tworzyć niesamowite efekty wizualne. Wprowadzimy również CSS mask właściwość dla bardziej złożonych dekoracji i efektów najechania.

Przejdźmy do pierwszego przykładu, nad którym wspólnie pracujemy…

Znaczek pocztowy

Wierzcie lub nie, aby uzyskać efekt CSS znaczka pocztowego, to dwa gradienty i filtr:

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

Jak widzieliśmy w poprzedni artykuł, pierwszym krokiem jest zrobienie miejsca wokół obrazu za pomocą padding więc możemy narysować gradient tła i zobaczyć go tam. Następnie używamy kombinacji radial-gradient() i linear-gradient() wyciąć te kręgi wokół obrazu.

Oto ilustracja krok po kroku, która pokazuje, jak skonfigurowane są gradienty:

Zwróć uwagę na użycie round wartość w drugim kroku. Jest to bardzo ważne dla triku, ponieważ zapewnia dopasowanie rozmiaru gradientu, aby był idealnie wyrównany ze wszystkich stron, bez względu na szerokość lub wysokość obrazu.

Cena Od Specyfikacja: Obraz jest powtarzany tak często, jak zmieści się w obszarze pozycjonowania tła. Jeśli nie pasuje wiele razy, jest przeskalowywany tak, aby pasował.

Zaokrąglona rama

Spójrzmy na inną dekorację obrazu, która wykorzystuje koła…

W tym przykładzie użyto również a radial-gradient(), ale tym razem stworzyłem kręgi na około obraz zamiast efektu wycięcia. Zauważ, że używam również round wartość ponownie. Najtrudniejsza część to przezroczysta przerwa między ramką a obrazem, gdzie sięgam po CSS mask własność:

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

Maskowanie pozwala nam pokazać obszar obrazu — dzięki linear-gradient() tam - jak również 20px z każdej strony — dzięki conic-gradient(), 20px to nic innego jak zmienna --s który definiuje rozmiar ramy. Innymi słowy, musimy ukryć lukę.

Oto co mam na myśli:

Gradient liniowy to niebieska część tła, a gradient stożkowy to czerwona część tła. Ta przezroczysta część między obydwoma gradientami jest tym, co wycinamy z naszego elementu, aby stworzyć iluzję wewnętrznej przezroczystej granicy.

Wewnętrzna przezroczysta granica

W tym przypadku nie zamierzamy tworzyć ramki, ale raczej spróbujemy czegoś innego. Zamierzamy stworzyć przezroczystą granicę wewnętrzną wewnątrz nasz wizerunek. Prawdopodobnie nie jest to przydatne w realnym świecie, ale to dobra praktyka z maskami CSS.

Podobnie jak w poprzednim przykładzie, będziemy opierać się na dwóch gradientach: a linear-gradient() dla części wewnętrznej, a conic-gradient() dla części zewnętrznej. Zostawimy odstęp między nimi, aby uzyskać efekt przezroczystej granicy.

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

Być może zauważyłeś, że gradient stożkowy w tym przykładzie ma inną składnię niż w poprzednim przykładzie. Oba mają stworzyć ten sam kształt, dlaczego więc są różne? Dzieje się tak, ponieważ możemy osiągnąć ten sam wynik przy użyciu różnych składni. Na początku może to wyglądać na mylące, ale to dobra funkcja. Nie jesteś zobowiązany do znalezienia dotychczasowy rozwiązanie do osiągnięcia określonego kształtu. Musisz tylko znaleźć jedno rozwiązanie, które Ci odpowiada, spośród wielu dostępnych.

Oto cztery sposoby tworzenia zewnętrznego kwadratu za pomocą gradientów:

Jest jeszcze więcej sposobów, aby to osiągnąć, ale rozumiesz.

Nie ma podejścia Best™. Osobiście staram się znaleźć taką, która ma najmniejszy i najbardziej zoptymalizowany kod. Dla mnie najbardziej odpowiednie jest każde rozwiązanie, które wymaga mniejszej liczby gradientów, mniejszej liczby obliczeń i mniejszej liczby powtarzanych wartości. Czasami wybieram bardziej szczegółową składnię, ponieważ daje mi to większą elastyczność w zmienianiu zmiennych i modyfikowaniu rzeczy. Wiąże się to z doświadczeniem i praktyką. Im więcej bawisz się gradientami, tym więcej wiesz, jakiej składni użyć i kiedy.

Wróćmy do naszej wewnętrznej przezroczystej granicy i zagłębimy się w efekt zawisu. Jeśli nie zauważyłeś, jest fajny efekt najechania, który przesuwa tę przezroczystą ramkę za pomocą font-size sztuczka. Chodzi o to, aby zdefiniować --d zmienna o wartości 1em. Ta zmienna kontroluje odległość granicy od krawędzi. Możemy przekształcić w ten sposób:

--_d: calc(var(--d) + var(--s) * 1em)

… dając nam następujący zaktualizowany kod CSS:

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

Połączenia font-size jest początkowo równy 0 ,więc 1em jest również równy 0 i --_d jest równy --d. Jednak po najechaniu kursorem font-size jest równa wartości określonej przez an --o zmienna, która ustawia przesunięcie obramowania. To z kolei aktualizuje --_d zmienna, przesuwając granicę o przesunięcie. Następnie dodaję kolejną zmienną, --s, aby kontrolować znak, który decyduje o tym, czy granica przesuwa się do wewnątrz, czy na zewnątrz.

Połączenia font-size sztuczka jest naprawdę przydatna, jeśli chcemy animować właściwości, które w innym przypadku są nieożywione. Właściwości niestandardowe zdefiniowane za pomocą @property może to rozwiązać, ale wsparcie dla tego wciąż brakuje w chwili, gdy to piszę.

Ujawnienie ramki

W pierwszej części tej serii wykonaliśmy następującą animację ujawniania:

Możemy przyjąć ten sam pomysł, ale zamiast obramowania o jednolitym kolorze użyjemy gradientu takiego:

Jeśli porównasz oba kody, zauważysz następujące zmiany:

1. Użyłem tej samej konfiguracji gradientu z pierwszego przykładu wewnątrz mask własność. Po prostu przeniosłem gradienty z background własność do mask własność.
2. dodałem repeating-linear-gradient() aby utworzyć granicę gradientu.

Otóż ​​to! Ponownie wykorzystałem większość tego samego kodu, który już widzieliśmy – z bardzo małymi poprawkami – i otrzymałem kolejną fajną dekorację obrazu z efektem najechania.

/* Solid color border */

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px;   /* the border thickness*/
  --g: 5px;  /* the gap on hover */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

Wypróbujmy inną animację klatki. Ten jest trochę trudny, ponieważ ma trzyetapowa animacja:

Pierwszym krokiem animacji jest powiększenie dolnej krawędzi. W tym celu dostosowujemy background-size z linear-gradient():

Pewnie zastanawiasz się, dlaczego dodaję również górną krawędź. Potrzebujemy go do trzeciego kroku. Zawsze staram się zoptymalizować kod, który piszę, więc używam jednego gradientu, aby pokryć zarówno górną, jak i dolną stronę, ale górny jest ukryty i odsłonięty później za pomocą mask.

W drugim kroku dodajemy drugi gradient, aby pokazać lewą i prawą krawędź. Ale tym razem robimy to za pomocą background-position:

Możemy się tutaj zatrzymać, ponieważ mamy już ładny efekt z dwoma gradientami, ale jesteśmy tutaj, aby przesuwać granice, więc dodajmy odrobinę maski, aby osiągnąć trzeci krok.

Sztuką jest ukrycie górnej krawędzi, dopóki nie pokażemy dołu i boków, a następnie zaktualizujemy mask-size (lub mask-position), aby pokazać górną część. Jak powiedziałem wcześniej, możemy znaleźć wiele konfiguracji gradientów, aby osiągnąć ten sam efekt.

Oto ilustracja gradientów, których będę używał:

Używam dwóch stożkowych gradientów o szerokości równej 200%. Oba gradienty pokrywają obszar, pozostawiając odkrytą tylko górną część (ta część będzie później niewidoczna). Po najechaniu przesuwam oba gradienty, aby pokryć tę część.

Oto lepsza ilustracja jednego z gradientów, dająca lepsze wyobrażenie o tym, co się dzieje:

Teraz umieszczamy to w środku mask nieruchomość i gotowe! Oto pełny kod:

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

Wprowadziłem również kilka zmiennych do optymalizacji kodu, ale powinieneś się do tego przyzwyczaić.

A co z czterostopniową animacją? Tak, to możliwe!

Brak wyjaśnienia, ponieważ to twoja praca domowa! Weź wszystko, czego nauczyłeś się w tym artykule, aby przeanalizować kod i spróbować wyrazić, co on robi. Logika jest podobna do wszystkich poprzednich przykładów. Kluczem jest wyizolowanie każdego gradientu, aby zrozumieć każdy etap animacji. Nie zoptymalizowałem kodu, aby było trochę łatwiejsze do odczytania. mam zoptymalizowana wersja jeśli jesteś zainteresowany, ale możesz też spróbować samodzielnie zoptymalizować kod i porównać go z moją wersją dla dodatkowej praktyki.

Zamykając

To tyle, jeśli chodzi o część 2 tej trzyczęściowej serii poświęconej kreatywnym dekoracjom obrazu przy użyciu tylko element. Teraz dobrze wiemy, jak można łączyć gradienty i maski, aby tworzyć niesamowite efekty wizualne, a nawet animacje — bez sięgania po dodatkowe elementy lub pseudoelementy. Tak, singiel wystarczy tag!

Mamy jeszcze jeden artykuł z tej serii. Do tego czasu, oto bonusowe demo z fajnym efektem najechania, w którym używam mask złożyć uszkodzony obraz.