Inhoud
- De opmaak
- De eigenschap Clip-Path
- De eigenschap Shape-Outside
- De interactie
- De inleidende animatie
- Laatste woorden
Dit is een van de beste tijden voor CSS. Het is voor ons niet langer nodig om vast te houden aan rechthoekige websites; we beschikken nu over de nodige tools om met de lay-out te spelen en tegelijkertijd genieten we van geweldige browserondersteuning. Geen zin in CSS? Kies een websitebouwer die beter bij je past.
In dit artikel zal ik wat licht werpen op de wereld van de clip-pad property en CSS Shapes. Om dit te doen, zal ik je laten zien hoe je een voedselpiramide kunt maken en animeren. De demo is in tweeën gedeeld: er is een piramide aan de linkerkant en enkele regels Potter Ipsum-tekst aan de rechterkant, die zich om de piramide heen wikkelen met behulp van CSS-vormen.
Het belangrijkste om op te merken is dat onze piramide is verdeeld in vier delen: een driehoek bovenaan en drie trapeziums eronder. Deze secties zijn onafhankelijk van elkaar, waardoor we elk deel van de piramide vrijelijk kunnen animeren.
De opmaak
Om deze demo te laten werken, is het belangrijk om onze HTML schoon te houden, aangezien dat de basis zal zijn voor al onze CSS.
div> div> div> Triangle / div> div> Trapezoid / div> div> Trapezoid / div> div> Trapezoid / div> / div>! - Sluit .pyramid -> h1> Title / h1> p> Paragraaf 1 / p> p> Paragraaf 2 / p> p> Paragraaf 3 / p> p> Paragraaf 4 / p> / div>! - Sluit .wrapper ->
De .wikkel element heeft een bovenmarge van 5vh en een automatische waarde aan de zijkanten om alle elementen gecentreerd te houden. In dit voorbeeld .piramide zweeft naar links (dit is een vereiste voor de vorm-buiten-eigenschap die we later zullen toevoegen).
Onze vier .zone elementen hebben een opvulling van 40px aan de boven- en onderkant. De breedte, achtergrondafbeeldingen en animatievertraging zijn voor elk verschillend. Om deze reden zullen we de : n-kind () selector om deze stijlen onafhankelijk toe te passen.
De voedselpiramide bestaat uit een driehoek bovenaan en drie trapeziums eronder. Elk onderdeel wordt gedefinieerd door een .zone element, en elk zal een andere breedte hebben. De driehoek bovenaan (.zone: nth-child (1)) een breedte van 25 procent hebben, de trapezium die onder de 50 procent zit, 75 procent voor het derde element en een volledige breedte van 100 procent voor de basis van de piramide.
Nu zouden we een vierkant en drie rechthoeken eronder moeten hebben. Het is tijd om je aan te melden clip-pad.
De eigenschap Clip-Path
De clip-pad property is een geweldig hulpmiddel om delen van een element (afbeeldingen, alinea's en zelfs divs) te verbergen in plaats van het hele blok te tonen. Clip-pad biedt een aantal basisvormen, zoals inzet, cirkel, ellips en veelhoek. We kunnen SVG echter ook gebruiken om complexere vormen en fallbacks te maken.
Dankzij clip-padkunnen we creatiever zijn met onze lay-outs en niet-rechthoekige vormen in onze ontwerpen opnemen. De eigenschap is ontstaan uit een nu verouderde clip-eigenschap die vroeger een absolute of vaste positionering vereiste.
Hoewel de clip-pad property wordt nog niet in elke browser ondersteund, we kunnen een bijna volledige ondersteuning bereiken met een SVG-fallback en de -webkit- voorvoegsel. De enige grote browser die er momenteel geen ondersteuning voor biedt, is Edge.
Om onze piramide te creëren, moeten we ons aanmelden clip-pad voor onze vier .zones. We zullen een polygoonvorm gebruiken en de coördinaten van elk punt definiëren met X- en Y-waarden in percentages, met behulp van : n-kind om elk element afzonderlijk te selecteren.
.zone: nth-child (1) {clip-path: polygoon (50% 0, 100% 100%, 0% 100%); } .zone: nth-child (2) {clip-path: polygon (25% 0, 75% 0, 100% 100%, 0100%); } .zone: nth-child (3) {clip-path: polygon (16,5% 0, 83% 0, 100% 100%, 0100%); } .zone: nth-child (4) {clip-path: polygon (12,5% 0, 87,5% 0, 100% 100%, 0100%); }
Coördinaten op de juiste plaats krijgen via onze code-editor kan onmogelijk lijken. Als we willen voorkomen dat we proberen de coördinaten willekeurig te raden, raad ik ten zeerste aan om de -webkit- prefix en het bewerken van de code in de browser zelf. Met Chrome DevTools kunnen we de code in actie zien terwijl we deze schrijven, waardoor het gemakkelijker wordt om onze vormen te tekenen.
De eigenschap Shape-Outside
Nu onze piramide is gebouwd, is het tijd om de tekst eromheen te laten stromen. De beste manier om tekst om een element heen te laten lopen, is door de vorm-buiten eigendom. Hoewel de browserondersteuning niet goed is (deze wordt alleen ondersteund in Webkit- en Blink-browsers met de -webkit- prefix) is er een polyfill beschikbaar waarmee we de overige browsers kunnen bereiken.
Zoals de clip-pad eigendom, vorm-buiten heeft ook een aantal voorgedefinieerde basisvormen, zoals inzet, cirkel, ellips en veelhoek. Voor deze demo zullen we de polygoon gebruiken om de rechthoekige trapezium te maken die ervoor zorgt dat de tekst om onze piramide loopt.
De waarden van deze coördinaten moeten worden toegepast op .piramide en zie er zo uit:
.pyramid {shape-outside: polygoon (310px 0, 130px 405px, 558px 405px); }
Houd er rekening mee dat deze cijfers slechts voorbeelden zijn - u kunt de hoek van de vorm aanpassen aan uw smaak en behoeften.
De interactie
Omdat elk onderdeel van de piramide onafhankelijk is, kunnen we gemakkelijk presteren :zweven gebeurtenissen op hen. Dit brengt veel kansen met zich mee. We zouden ze allemaal kunnen maken .zone andere informatie weergeven of er gewoon een nieuw venster voor openen.
Voor deze demo heb ik besloten om te spelen met overvloeimodi in de: hover-effecten. Overvloeimodi, die tegenwoordig vaker voorkomen in Photoshop dan in CSS, laten u de browser vertellen hoe u wilt dat uw elementen in elkaar overvloeien.
Er zijn meerdere overvloeimodi beschikbaar om uit te kiezen: onder andere donkerder, lichter, overlay, tint en vermenigvuldigen. Een geweldige tool om ze te leren kennen is de CSS Blender van Sara Soueidan.
Ik heb een achtergrondafbeelding geselecteerd met een RGBA-achtergrondkleur en een alpha-waarde van 0,7. De overvloeimodus die ik heb gekozen, is lichter en aan :zweven Ik heb de Achtergrond kleur alfakanaal naar 0,2 met een overgang van 0,5 seconde.
De code voor de driehoek bovenaan ziet er als volgt uit:
.zone: nth-child (1) {background: rgba (202, 197, 94, 0.7) url ("img / vegetables. jpg"); background-blend-mode: lichter; overgang achtergrondkleur 0,5 sec; } .zone: nth-child (1): hover {background-color: rgba (202, 197, 94, 0.2); }
De inleidende animatie
Dit is het meest vermakelijke deel: wanneer we bepalen hoe elk element de pagina zal binnenkomen. In dit geval komt elk deel van de piramide van boven naar binnen met transform: translateY (-500%); naar transform: translateY (0%);. Sinds elke .zone is onafhankelijk, accumulatief animatie-vertragingen zijn ideaal. Merk op hoe het vierde element (de basis van de piramide) als eerste valt.
.zone: nth-child (1) {animatie-vertraging: 2s; } .zone: nth-child (2) {animatie-vertraging: 1.5s; } .zone: nth-child (3) {animatie-vertraging: 1s; } .zone: nth-child (4) {animatie-vertraging: 0,5s; }
Aan deze code moeten we ook toevoegen animatie-fill-mode: vooruit; om het element op de juiste plaats te houden als de animatie eenmaal voorbij is. Wanneer elementen van boven naar beneden vallen, ziet de animatie er realistischer uit als we een gemak-in-timingfunctie toepassen, omdat dit versnelling emuleert als gevolg van de zwaartekracht (in tegenstelling tot de vooraf gedefinieerde versnellingswaarde).
De h1 element en de alinea's hebben een eenvoudigere animatie. Ze gaan van een RGBA-waarde met een dekking van 0 naar 1. Ze hebben ook verschillende vertragingen.
Laatste woorden
Implementatie voor clip-pad is misschien een beetje traag, maar het gaat vooruit en er zijn mogelijkheden om terug te vallen. Daarom is het een geweldige tijd om het in de productie te gaan gebruiken. Met deze eigenschappen kunnen we creatievere websites maken en gloednieuwe lay-outs verkennen. Heb plezier met clip-pad en breek de mal met de lay-outrevolutie!
Opmerking: als u op het punt staat een nieuwe site te bouwen, moet u uw webhostingprovider overwegen en het is altijd handig om ervoor te zorgen dat uw cloudopslag ook perfect is.
Realted artikelen:
- Kies een websitebouwer met deze toptools
- Zie het allerbeste in websitesjablonen
- Ontdek de beste software voor het testen van gebruikers
