Innhold
- The Markup
- Clip-Path-egenskapen
- Formen utenfor eiendommen
- Interaksjonen
- Den innledende animasjonen
- Avsluttende ord
Dette er en av de største tidene for CSS. Det er ikke lenger noe behov for oss å holde oss til rektangelbaserte nettsteder; vi eier nå de nødvendige verktøyene for å leke med layout, og nyter godt av nettleserstøtte på samme tid. Ikke interessert i CSS? Velg en nettstedsbygger som passer bedre.
I denne artikkelen vil jeg kaste lys over verdens verden klippesti eiendom og CSS-former. For å gjøre dette vil jeg vise deg hvordan du lager og animerer en matpyramide. Demoen er delt i to: det er en pyramide til venstre og noen linjer med Potter Ipsum-tekst til høyre, som brytes rundt pyramidesiden ved hjelp av CSS Shapes.
Det viktige å merke seg er at pyramiden vår er delt inn i fire deler: en trekant på toppen og tre trapeser under den. Disse seksjonene er uavhengige av hverandre, slik at vi fritt kan animere hver del av pyramiden.
The Markup
For at denne demoen skal fungere, er det viktig å holde HTML-en ren, siden det vil være basen for all vår CSS.
div> div> div> Triangle / div> div> Trapezoid / div> div> Trapezoid / div> div> Trapezoid / div> / div>! - Lukker. pyramid -> h1> Tittel / h1> p> Paragraf 1 / p> p> Avsnitt 2 / p> p> Avsnitt 3 / p> p> Avsnitt 4 / p> / div>! - Lukker. wrapper ->
De . innpakning elementet har en toppmargin på 5vh og en automatisk verdi på sidene for å holde alle elementene sentrert. I dette eksemplet, .pyramide flyter til venstre (dette er et krav for form-utenfor-egenskapen vi skal legge til senere).
Våre fire .sone elementene har en polstring på 40 px på toppen og bunnen. Bredden, bakgrunnsbildene og animasjonsforsinkelsen vil være forskjellige på hver enkelt. Av denne grunn bruker vi : nth-child () velgeren for å bruke disse stilene uavhengig.
Matpyramiden består av en trekant på toppen og tre trapeser under den. Hver del er definert av a .sone element, og hver vil ha forskjellig bredde. Trekanten på toppen (.zone: nth-child (1)) vil ha en bredde på 25 prosent, trapesen som sitter under 50 prosent, 75 prosent for det tredje elementet og en full 100 prosent bredde for bunnen av pyramiden.
Nå skal vi ha en firkant og tre rektangler under den. Det er på tide å søke klippesti.
Clip-Path-egenskapen
De klippesti egenskap er et fantastisk verktøy for å skjule deler av et element (bilder, avsnitt og til og med div) i stedet for å vise hele blokken. Clip-path gir noen få grunnleggende former, slik som innfelt, sirkel, ellips og polygon. Imidlertid kan vi også bruke SVG til å lage mer komplekse former og tilbakefall.
Takk til klippesti, kan vi være mer kreative med layoutene våre og inkludere ikke-rektangulære former i designene våre. Eiendommen ble født fra en nå utfaset klippegenskap som tidligere krevde en absolutt eller fast posisjonering.
Selv om klippesti Eiendommen støttes ennå ikke i alle nettlesere. Vi kan nå nesten full støtte med en SVG-reserve og -webkit- prefiks. Den eneste store nettleseren som foreløpig ikke gir støtte for den, er Edge.
For å skape vår pyramide, må vi søke klippesti til våre fire .soner. Vi vil bruke en polygonform og definere koordinatene til hvert punkt med X- og Y-verdier i prosent, ved hjelp av : niende barn for å velge hvert element uavhengig.
.zone: nth-child (1) {clip-path: polygon (50% 0, 100% 100%, 0% 100%); } .zone: nth-child (2) {clip-path: polygon (25% 0, 75% 0, 100% 100%, 0 100%); } .zone: nth-child (3) {klippesti: polygon (16,5% 0, 83% 0, 100% 100%, 0 100%); } .zone: nth-child (4) {clip-path: polygon (12,5% 0, 87,5% 0, 100% 100%, 0 100%); }
Å få koordinater på rett sted gjennom vår kodeditor kan virke umulig. Hvis vi ønsker å unngå å prøve å gjette koordinatene tilfeldig, anbefaler jeg på det sterkeste å legge til -webkit- prefiks og redigering av koden i selve nettleseren. Chrome DevTools lar oss se koden i aksjon mens vi skriver den, noe som gjør det lettere å tegne figurene våre.
Formen utenfor eiendommen
Nå er pyramiden vår bygget, det er på tide å få teksten til å flyte rundt den. Den beste måten å få tekst til å vikle rundt et element er å bruke form utenfor eiendom. Selv om nettleserstøtten ikke er god (støttes den bare i Webkit og Blink-nettlesere med -webkit- prefiks) det er en polyfill tilgjengelig som vil hjelpe oss å nå de gjenværende nettleserne.
Som klippesti eiendom, form utenfor har også noen få forhåndsdefinerte grunnleggende former, som innfelt, sirkel, ellips og polygon. For denne demonstrasjonen vil vi bruke polygonet til å lage den rettvinklede trapesen som får teksten til å vikle seg rundt pyramiden vår.
Verdiene til disse koordinatene bør brukes på .pyramide og se slik ut:
.pyramid {form-utenfor: polygon (310px 0, 130px 405px, 558px 405px); }
Husk at disse tallene bare er eksempler - du kan justere vinkelen på formen avhengig av smak og nødvendigheter.
Interaksjonen
Siden hver del av pyramiden er uavhengig, kan vi enkelt utføre :sveve hendelser på dem. Dette medfører mange muligheter. Vi kunne lage hver .sone vise annen informasjon, eller bare la den åpne et nytt vindu.
For denne demoen bestemte jeg meg for å spille med blandingsmodus i: hover-effektene. Blandemodus, som er mer vanlig i Photoshop enn i CSS i dag, lar deg fortelle nettleseren hvordan du vil at elementene dine skal blandes sammen.
Det er flere blandingsmodi å velge mellom: mørkere, lysere, legge over, fargetone og formere seg, blant andre. Et flott verktøy for å bli kjent med dem er Sara Soueidans CSS Blender.
Jeg valgte et bakgrunnsbilde med en RGBA-bakgrunnsfarge og en alfa-verdi på 0,7. Blandingsmodusen jeg valgte er lysere og på :sveve Jeg endret bakgrunnsfarge alfakanal til 0,2 med en 0,5 sekunders overgang.
Koden for trekanten på toppen ser slik ut:
.zone: nth-child (1) {bakgrunn: rgba (202, 197, 94, 0.7) url ("img / grønnsaker. jpg"); bakgrunnsblandingsmodus: lys; overgang bakgrunnsfarge 0,5s; } .zone: nth-child (1): hover {bakgrunnsfarge: rgba (202, 197, 94, 0.2); }
Den innledende animasjonen
Dette er den mest underholdende delen: når vi definerer hvordan hvert element skal komme inn på siden. I dette tilfellet vil hver del av pyramiden komme inn fra toppen med transform: translateY (-500%); til transform: translateY (0%);. Siden hver .sone er uavhengig, akkumulerende animasjonsforsinkelser er ideelle. Legg merke til hvordan det fjerde elementet (bunnen av pyramiden) faller først.
.zone: nth-child (1) {animasjonsforsinkelse: 2s; } .zone: nth-child (2) {animasjonsforsinkelse: 1.5s; } .zone: nth-child (3) {animasjonsforsinkelse: 1s; } .zone: nth-child (4) {animasjonsforsinkelse: 0,5s; }
Til denne koden bør vi også legge til animasjon-fyll-modus: fremover; for å holde elementet på rett sted når animasjonen er over. Når elementene faller fra topp til bunn, vil animasjonen se mer realistisk ut hvis vi bruker en funksjon for enkel timing, fordi dette etterligner akselerasjon på grunn av tyngdekraften (i motsetning til den forhåndsdefinerte lettsverdien).
De h1 elementet og avsnittene har en enklere animasjon. De går fra en RGBA-verdi med 0 opacitet til 1. De vil også ha forskjellige forsinkelser.
Avsluttende ord
Implementering for klippesti kan være litt treg, men det går fremover og det er tilbakefall tilgjengelig. Derfor er det en fantastisk tid å begynne å bruke den i produksjon. Med disse egenskapene kan vi lage mer kreative nettsteder og utforske splitter nye oppsett. Ha det gøy med klippesti og knekk formen med layout-revolusjonen!
Merk: Hvis du skal bygge et nytt nettsted, må du vurdere leverandøren av webhotell, og det er alltid nyttig å sørge for at skylagring også er perfekt.
Skikkelige artikler:
- Velg en nettstedbygger med disse toppverktøyene
- Se de aller beste i nettstedmaler
- Oppdag den beste programvaren for brukertesting
