We hebben de laatste twee artikelen in deze driedelige serie gespeeld met verlopen om echt nette beelddecoraties te maken met niets anders dan de outline eigendom. Dat klinkt misschien vreemd omdat we over het algemeen outline om een eenvoudige lijn rond een element te trekken — een beetje zoals border maar het kan alleen alle vier de zijden tegelijk tekenen en maakt geen deel uit van het doosmodel.
We kunnen er echter meer mee doen, en daar wil ik in dit artikel mee experimenteren.
Fancy Image Decorations-serie
Laten we beginnen met ons eerste voorbeeld - een overlay die verdwijnt bij de muisaanwijzer met een coole animatie:
We zouden dit kunnen bereiken door een extra element over de afbeelding toe te voegen, maar dat is wat we onszelf uitdagen niet te doen in deze serie. In plaats daarvan kunnen we reiken naar de CSS outline eigenschap en hefboomwerking dat het een negatieve compensatie kan hebben en in staat is om zijn element te overlappen.
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);
}De truc is om een outline dat is zo dik als de helft van de afbeeldingsgrootte en verschuif deze vervolgens met de helft van de afbeeldingsgrootte met een negatieve waarde. Voeg wat semi-transparantie toe met de kleur en we hebben onze overlay!
De rest is wat er gebeurt op :hover. We updaten de outline en de overgang tussen beide contouren zorgt voor het coole zweefeffect. Dezelfde techniek kan ook worden gebruikt om een vervagend effect te creëren waarbij we de outline maar maak het transparant.
In plaats van de helft van de afbeeldingsgrootte in deze te gebruiken, gebruik ik een zeer grote outline dikte waarde (100vmax) terwijl u een CSS-masker toepast. Hierdoor is het niet langer nodig om de afbeeldingsgrootte te kennen - de truc werkt bij alle formaten!
U kunt problemen ondervinden bij het gebruik van 100vmax als een grote waarde in Safari. Als dit het geval is, overweeg dan de vorige truc waarbij je de vervangt 100vmax met de helft van de afbeeldingsgrootte.
We kunnen nog verder gaan! Bijvoorbeeld, in plaats van simpelweg de extra te knippen outline, kunnen we vormen maken en een mooie onthullingsanimatie toepassen.
Cool toch? De outline is wat de gele overlay creëert. De clip-path clips de extra outline om de stervorm te krijgen. Vervolgens maken we de kleur transparant met de muisaanwijzer.
Oh, wil je in plaats daarvan harten? Dat kunnen wij zeker!
Stelt u zich eens alle mogelijke combinaties voor die we kunnen maken. We hoeven alleen maar een vorm te tekenen met een CSS-masker en/of clip-path en combineer het met de outline truc. Eén oplossing, oneindig veel mogelijkheden!
En ja, we kunnen dit zeker ook animeren. Laten we dat niet vergeten clip-path is animeerbaar en mask is afhankelijk van gradiënten - iets dat we in de eerste twee artikelen van deze serie zeer gedetailleerd hebben behandeld.
Ik weet het, de animatie is een beetje glitchy. Dit is meer een demo om het idee te illustreren in plaats van het "eindproduct" dat in een productiesite moet worden gebruikt. We willen dingen optimaliseren voor een meer natuurlijke overgang.
Hier is een demo die gebruik maakt van mask in plaats van. Het is degene waarmee ik je plaagde aan het einde van het laatste artikel:
Wist je dat de outline eigendom tot zoveel ontzag in staat was? Voeg het toe aan je gereedschapskist voor mooie afbeeldingsdecoraties!
Combineer alle dingen!
Nu we veel trucjes hebben geleerd met verlopen, maskers, knippen en contouren, is het tijd voor de grote finale. Laten we deze serie afsluiten door alles wat we de afgelopen weken hebben geleerd te combineren om niet alleen de technieken te demonstreren, maar ook te laten zien hoe flexibel en modulair deze benaderingen zijn.
Als je deze demo's voor de eerste keer zou zien, zou je kunnen aannemen dat er een heleboel extra divs-wrappers en pseudo-elementen worden gebruikt om ze uit te voeren. Maar alles gebeurt direct op de
Afsluiten
Nou, jeetje, bedankt dat je de afgelopen weken met me omging in deze driedelige serie. We hebben een hele reeks verschillende technieken onderzocht die eenvoudige afbeeldingen veranderen in iets opvallends en interactiefs. Gebruik je alles wat we hebben behandeld? Zeker niet! Maar ik hoop dat dit een goede oefening voor je is geweest om je te verdiepen in geavanceerd gebruik van CSS-functies, zoals verlopen, mask, clip-path en outline.
En we deden alles met slechts één
