Väljamõeldud pildikaunistused: piirjooned ja keerulised animatsioonid

Oleme selle kolmeosalise seeria viimased kaks artiklit mänginud gradientidega, et teha tõeliselt kenad pildikaunistused, kasutades ainult element. Selles kolmandas ja viimases tükis uurime rohkem CSS-i kasutavaid tehnikaid outline vara. See võib tunduda veider, sest me üldiselt kasutame outline elemendi ümber lihtsa joone tõmbamiseks — nagu border kuid see suudab joonistada ainult kõiki nelja külge korraga ja see ei kuulu kastimudelisse.

Kuid me saame sellega rohkem ära teha ja just seda tahan selles artiklis katsetada.

Alustame oma esimese näitega – ülekate, mis kaob hõljumisel laheda animatsiooniga:

Võiksime seda saavutada, lisades pildile täiendava elemendi, kuid see on see, mida me endale proovime mitte selles sarjas teha. Selle asemel saame jõuda CSS-i poole outline omadus ja võimendus, et sellel võib olla negatiivne nihe ja see suudab oma elementi kattuda.

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

Trikk on luua outline mis on sama paks kui pool pildi suurusest, seejärel nihutage see negatiivse väärtusega poole pildi suurusest. Lisage värviga poolläbipaistvust ja meil on ülekate!

Ülejäänu on see, mis juhtub :hover. Uuendame outline ja üleminek mõlema piirjoone vahel loob laheda hõljumise efekti. Sama tehnikat saab kasutada ka tuhmumisefekti loomiseks seal, kus me ei liiguta outline aga tee see läbipaistvaks.

Selle asemel, et kasutada poole väiksemat kujutist, kasutan väga suurt outline paksuse väärtus (100vmax) CSS-maski rakendamisel. Sellega pole enam vaja pildi suurust teada – see trikk töötab igas suuruses!

Kasutamisel võib tekkida probleeme 100vmax kui Safaris suur väärtus. Kui see nii on, kaaluge eelmist nippi, kus asendate 100vmax poole väiksema pildiga.

Saame asju veelgi kaugemale viia! Näiteks selle asemel, et lihtsalt ekstra kärpida outline, saame luua kujundeid ja rakendada väljamõeldud paljastamisanimatsiooni.

Lahe eks? The outline on see, mis loob kollase ülekatte. The clip-path klipid lisa outline tähekuju saamiseks. Seejärel, hõljutades, muudame värvi läbipaistvaks.

Oh, kas sa tahad hoopis südameid? Kindlasti saame sellega hakkama!

Kujutage ette kõiki võimalikke kombinatsioone, mida saame luua. Kõik, mida peame tegema, on joonistada kujund CSS-maski ja/või clip-path ja ühendage see outline trikk. Üks lahendus, lõputud võimalused!

Ja jah, me saame kindlasti ka seda animeerida. Ärgem seda unustagem clip-path on animeeritav ja mask tugineb gradientidele – mida käsitlesime selle sarja kahes esimeses artiklis ülimalt üksikasjalikult.

Ma tean, animatsioon on natuke tõrges. See on pigem demo, et illustreerida ideed, mitte tootmiskohas kasutatav lõpptoode. Tahaksime asju optimeerida loomulikuma ülemineku jaoks.

Siin on demo, mis kasutab mask selle asemel. See on see, millega ma sind lõpus kiusasin viimane artikkel:

Kas teadsite, et outline vara oli võimeline nii palju vingeid? Lisage see oma tööriistakasti väljamõeldud piltide kaunistamiseks!

Kombineeri kõik asjad!

Nüüd, kui oleme õppinud palju nippe, kasutades gradiente, maske, väljalõiget ja kontuuri, on aeg suureks finaaliks. Lõpetagem see seeria, ühendades kõik, mida oleme viimastel nädalatel õppinud, et tutvustada mitte ainult tehnikaid, vaid näidata, kui paindlikud ja modulaarsed need lähenemisviisid on.

Kui nägite neid demosid esimest korda, võite eeldada, et nende välja tõmbamiseks kasutatakse hunnikut täiendavaid div-mähiseid ja pseudoelemente. Kuid kõik toimub otse element. See on ainus valija, mida vajame nende täiustatud kujundite ja efektide saamiseks!

Pakke kuni

Tänan, et olete viimastel nädalatel selles kolmeosalises sarjas minuga koos veetnud. Uurisime erinevaid tehnikaid, mis muudavad lihtsad pildid millekski pilkupüüdvaks ja interaktiivseks. Kas kasutate kõike, mida käsitlesime? Kindlasti mitte! Kuid ma loodan, et see on olnud teile hea harjutus CSS-i funktsioonide täpsemate kasutusviiside, näiteks gradientide, mask, clip-pathja outline.

Ja me tegime kõike ainult ühega element! Ei mingeid täiendavaid div-ümbriseid ja pseudoelemente. Muidugi on see piirang, mille me endale seadsime, kuid see sundis meid ka CSS-i uurima ja püüdma leida uuenduslikke lahendusi tavalistele kasutusjuhtudele. Seega, enne kui lisate oma HTML-i täiendava märgistuse, mõelge sellele, kas CSS on juba võimeline ülesandega toime tulema.