Decorații de imagine de lux: contururi și animații complexe

Am petrecut ultimele două articole din această serie în trei părți jucându-ne cu degradeuri pentru a realiza decorațiuni cu imagini cu adevărat îngrijite, folosind nimic altceva decât element. În această a treia și ultima piesă, vom explora mai multe tehnici folosind CSS outline proprietate. Ar putea suna ciudat pentru că folosim în general outline a desena o linie simplă în jurul unui element — cam ca border dar poate desena doar toate cele patru laturi simultan și nu face parte din Modelul cutiei.

Totuși, putem face mai mult cu el și asta vreau să experimentez în acest articol.

Să începem cu primul nostru exemplu - o suprapunere care dispare la trecerea cu mouse-ul cu o animație cool:

Am putea realiza acest lucru adăugând un element suplimentar peste imagine, dar asta ne provocăm. nu de făcut în această serie. În schimb, putem ajunge la CSS outline proprietate și pârghie că poate avea un offset negativ și este capabil să se suprapună elementului său.

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);
}

Trucul este să creezi un outline este la fel de gros ca jumătate din dimensiunea imaginii, apoi compensați-o cu jumătate din dimensiunea imaginii cu o valoare negativă. Adăugați puțină semi-transparență cu culoarea și avem suprapunerea noastră!

Restul este ceea ce se întâmplă pe :hover. Actualizăm outline iar tranziția dintre ambele contururi creează efectul de hover rece. Aceeași tehnică poate fi folosită și pentru a crea un efect de estompare în care nu îl mișcăm outline dar fă-l transparent.

În loc să folosesc jumătate din dimensiunea imaginii în aceasta, folosesc un foarte mare outline valoarea grosimii (100vmax) în timp ce aplicați o mască CSS. Cu aceasta, nu mai este nevoie să știți dimensiunea imaginii - trucul funcționează la toate dimensiunile!

Este posibil să întâmpinați probleme de utilizare 100vmax ca valoare mare în Safari. Dacă este cazul, luați în considerare trucul anterior în care înlocuiți 100vmax cu jumătate din dimensiunea imaginii.

Putem duce lucrurile și mai departe! De exemplu, în loc să tăiați pur și simplu extraul outline, putem crea forme și aplica o animație fantezie de dezvăluire.

Cool nu? The outline este ceea ce creează suprapunerea galbenă. The clip-path clipește extra outline pentru a obține forma de stea. Apoi, la hover, facem culoarea transparentă.

Oh, vrei inimi în schimb? Cu siguranță putem face asta!

Imaginează-ți toate combinațiile posibile pe care le putem crea. Tot ce trebuie să facem este să desenăm o formă cu o mască CSS și/sau clip-path și combinați-l cu outline truc. O singură soluție, posibilități infinite!

Și, da, cu siguranță putem anima și asta. Să nu uităm asta clip-path este animabil și mask se bazează pe gradienți - ceva ce am acoperit foarte detaliat în primele două articole ale acestei serii.

Știu, animația este puțin greșită. Acesta este mai mult o demonstrație pentru a ilustra ideea, mai degrabă decât „produsul final” care urmează să fie utilizat într-un loc de producție. Am dori să optimizăm lucrurile pentru o tranziție mai naturală.

Iată un demo care folosește mask in schimb. Este cel cu care te-am tachinat la sfârșit ultimul articol:

Știați că outline proprietatea a fost capabilă de atâta minunatie? Adăugați-l în cutia dvs. de instrumente pentru decorațiuni de imagine fanteziste!

Combină toate lucrurile!

Acum că am învățat multe trucuri folosind degrade, măști, tăiere și contur, este timpul pentru marea finală. Să încheiem această serie combinând tot ceea ce am învățat în ultimele săptămâni pentru a prezenta nu numai tehnicile, ci și pentru a demonstra cât de flexibile și modulare sunt aceste abordări.

Dacă ați văzut aceste demonstrații pentru prima dată, ați putea presupune că există o grămadă de div-uri suplimentare și pseudo-elemente folosite pentru a le scoate. Dar totul se întâmplă direct pe element. Este singurul selector de care avem nevoie pentru a obține aceste forme și efecte avansate!

La finalul

Ei bine, naiba, mulțumesc că ai stat cu mine în această serie din trei părți în ultimele câteva săptămâni. Am explorat o mulțime de tehnici diferite care transformă imaginile simple în ceva atrăgător și interactiv. Veți folosi tot ce am acoperit? Cu siguranta nu! Dar speranța mea este că acesta a fost un exercițiu bun pentru tine de a explora utilizările avansate ale caracteristicilor CSS, cum ar fi gradienții, mask, clip-path, și outline.

Și am făcut totul doar cu unul element! Fără învelișuri div și pseudo-elemente suplimentare. Sigur, este o constrângere pe care ne-o punem, dar ne-a împins și să explorăm CSS și să încercăm să găsim soluții inovatoare pentru cazurile de utilizare obișnuite. Așadar, înainte de a adăuga un marcaj suplimentar în HTML, gândiți-vă dacă CSS este deja capabil să gestioneze sarcina.