Kom godt i gang med CSS polygoner

I lang tid har den grundlæggende struktur af rektangulære blokke og cirkler, som danner websteder, plaget både designere og kreative udviklere. Så da CSS-klipsti-polygoner kom ind på scenen i WebKit-browsere, brændte jeg straks af spænding.



Brugt primært til indpakning af tekst og maskeindhold, tilbyder ejendommen også designere en chance for at skabe mere spændende figurer i ren CSS uden behov for lærred eller SVG. Jeg følte, at det kunne ændre den måde, jeg designede og udviklede på, med resultater, som det ikke tog lang tid at få indflydelse på.



Clip-path's primære formål er at maskere en region (ikke kun billeder, men faktisk indhold), men i denne vejledning vil jeg gå nærmere ind på, hvad der kan gøres med polygonegenskaben. Jeg tager dig igennem, hvordan Sass for-loops kan bruges til at skabe overgribende overgangseffekter og bringe en samling af CSS-polygoner til live.

Opret sæt divs

Vi skaber en faneffekt, hvor hver af de syv trekantede polygoner animeres fra et centralt punkt



Vi skaber en faneffekt, hvor hver af de syv trekantede polygoner animeres ud fra et centralt punkt

Det vi sigter mod er en effekt, hvor et sæt trekantede former blæser ud fra et centralt punkt (tjek ud Codepen til denne vejledning ). Først skal du oprette divs for så mange polygoner som du har brug for (her bruger jeg syv) og placere dem oven på hinanden.

.polygon-wrap { div { position: absolute; width: 500px; height: 275px; top: 0; left: 0; } }

Opret polygonernes første tilstand

Vi overgår polygonerne, så blæseren vokser fra midten og udad. For at gøre dette ønsker vi først at definere polygonernes oprindelige tilstand. Vi tilføjer en baggrundsfarve, der automatisk maskeres inden for den form, du opretter:

.polygon-wrap { div { -webkit-clip-path: polygon(50% 95%, 50% 95%, 50% 95%); background-color: #46008C; } }

Animationsudløser

Du skal bruge en bevægelsesudløser, for at overgangen kan finde sted. Her placerer vi simpelthen en svævetilstand på indpakningselementet.



.polygon-wrap:hover { }

Opret polygoner

Temmelig dejligt oprettes CSS-polygoner ved hjælp af kun en enkelt kodelinje. Polygoner kan have enhver form, du kan lide: de er ikke bundet til et antal punkter eller sider. Men hvis du overgår en form, som vi er her, skal du huske at bruge det samme antal punkter og bruge det samme punkt i arrayet til at animere hvert af følgende punkter:

..polygon-wrap:hover { div:nth-child(1) { -webkit-clip-path: polygon(19% 42%, 26% 32%, 50% 95%); } }

Denne polygon har en trekantet form, der danner venstre side af den syvdelte ventilator. Procentværdierne stemmer overens med en X- og Y-koordinat baseret på størrelsen på den overordnede div.

Overgange via for-loop

Når du har oprettet dine polygoner 'andre tilstande, kan du oprette et gennemgribende sæt overgange ved hjælp af Sass for-loops. Disse får hver div til at animere lidt langsommere end sin forgænger, hvilket skaber en 'blandet' følelse. Dette øger også ydeevnen, da processoren gør den ene ting efter den anden i stedet for syv ting på én gang.

.polygon-wrap { div { transition: 0.2s; @for $i from 1 through 7 { &:nth-child(#{$i}) { $tdelay: ((($i*0.1))+0.2s); $tduration: ($i*0.05 + 0.25s); transition-delay($tdelay); transition-duration($tduration); } } } }

Denne bit kode skaber i det væsentlige forskellen i timing for hver af div. Den indledende buffer er overgangsbasen (her 0,2 sekunder). Dernæst er der en forsinkelsesværdi (0,1 sekunder). Denne værdi ganges med ordrenummeret for div (fra en til syv) for at give overgangsforsinkelsen.

I stykker

I stykker

I stykker

I et personligt projekt I stykker , Jeg brugte den samme polygonegenskab til at skabe billeder af 30 forskellige truede dyr, hver sammensat af 30 trekantede 'stykker'. Jeg brugte base CSS-overgange til at blande mig fra dyr til dyr i en fejende bevægelse over skærmen. Dyrene ser ud til at forvandle sig til hinanden; en effekt oprettet ved hjælp af de overgangsforsinkelser, der er beskrevet i denne vejledning.

Inden i stykker oprettes bevægelsen sekventielt. div-elementer får underordnede indeks-heltal, som derefter ganges med en bestemt værdi for at give forsinkelsestiden. Jeg brugte 30 div-elementer til at indeholde de 30 individuelle polygoner. Derefter introducerede jeg en overgangsforsinkelse på 0,1 sekund, så den 10. polygon animeret efter et sekund (0,1 x 10) og den 30. polygon overgik efter tre sekunder (0,1 x 30).

bedste bærbare oplader til Galaxy S7

Glitrende effekt

Disse forsinkelser blev også brugt til at skabe en 'glans' på dyrene, som kan ses hvert par sekunder. Forsinkelsessekvensen tillader en simpel opacitetskontakt på alle elementerne, hvilket skaber en fejende glans, der ligner effekten af ​​lys på glas. Dette er et meget specifikt eksempel, og brugen af ​​sådanne forsinkelser er ikke kun begrænset til CSS-polygoner.

Hvad disse forsinkelser specifikt opnår, er et element af flydende bevægelse, der skaber en langt mere naturlig følelsesanimation. Det er en subtil, men enormt givende berøring. Uden denne blanding kan et sæt polygoner, der bliver til noget andet, være meget hårdt for øjet. Det giver også bedre ydelse, da der er færre samtidige bevægelser, der forekommer.

Konklusion

Der har du det! Dette er en fantastisk måde at producere sekventerede bevægelser med polygoner på. Der er masser af spændende kreative muligheder at udforske med CSS-polygoner, så leg rundt og se, hvad du kan gøre med disse former.

Ord : Bryan James

Bryan James er en freelance designer og kreativ koder kendt for at skabe I stykker . Denne artikel blev oprindeligt offentliggjort i nummer 272 af netmagasin .

Kan du lide dette? Læs disse!