Her er hvordan jeg gjenskapt theory11 er login form — hvordan ville du gjøre det?

0
19

Jeg kjørte over en super kul design for et innloggingsskjema over på nettsiden theory11.com. Faktisk, hele nettstedet og produktene de lager er utrolig godt laget, det er bare noe om ren og elegant form som virkelig fikk meg. Plus, det bare så skjedde at CodePen Utfordring det kommende uken var basert på former, så jeg tok et par minutter og prøvde slapping det sammen.

Uttoning vektor mønster

En av de tingene jeg syntes var super stilig var den måte som vektor bakgrunnsbilde-eque mønster ble ikke bare det, men falmet ut slags radielt. Jeg hadde ikke prøve å matche mønsteret nøyaktig—jeg bare tok en fra Eiendeler Panelet i CodePen og droppet det på <html> elementet som en SVG-data URL background-image med en lav fylle-dekkevne. Deretter en radial gradient sitter på toppen og skaper fading effekt—en radial gradient med samme base bakgrunnsfarge som svinner.

:root {
–grå: rgb(14, 19, 25);
–grå–t: rgba(14, 19, 25, 0);
}

html {
bakgrunn: var(–grå) url(‘data:image/svg+xml,%3Csvg xmlns=”http://www.w3.org/2000/svg” bredde=”28″ høyde=”49″ viewBox=”0 0 28 49″%3E%3Cg fylle-regelen=”evenodd”%3E%3Cg id=”rutene” fylle=”%239C92AC” fylle-opacity=”0.1″ fylle-regelen=”ikke-null”%3E%3Cpath d= – M13.99 9.25l13 7.5v15l-13 7.5L1 31.75 v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81 v-2.3zM15 0v7.5L27.99 15H28v-2.31 h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z”/%3E%3C/g%3E%3C/g%3E%3C/svg%3E’);
}

body {
margin: 0;
høyde: 100vh;
bakgrunn: radial-gradient(
ellipse på midten av bunnen,
var(–grå–t),
var(–grå) 90%
);
}

Dobbel ramme

Hvis du kikke på den doble grensen kode på theory11 nettsted, vil du se at det er gjort med et enkelt 2px solid grensen på en far og en annen på barnet element, med litt polstring til verdensrommet dem ut. Helt greit måte å gjøre det på, selvfølgelig. Men det minnet meg på det faktum at du kan bokstavelig talt gjøre dobbelt som en ramme stil. Du har svært lite kontroll over avstand, men hei, det er nær!

formen {
grensen: 7px dobbeltrom #AA8B59;
}

Hva om dem corner bokser?

Jeg hadde det moro med å bygge resten av det ut, men jeg stoppet kort for å håndtere de hjørne bokser. Jeg tenkte på det selv! Min første tanke var psuedo elementer, som de er fantastiske små verktøy for å legge til ekstra stil uten noen ekstra HTML. Bortsett fra… du får bare to av dem, og vi trenger fire her. Det viser seg at det er slik de gjør det—de får fire fordi de bruker både foreldre og barn (for å få grensen).

Peter Schmalfeldt tok sjansen på å gjøre det på den måten:

Se Penn theory11 logge på ved Peter Schmalfeldt (@manifestinteractive) på CodePen.

Dan Wilson tok en helt annen tilnærming ved å gjøre det med flere bakgrunnen graderinger:

Se Penn theory11 logg på (legg til corner bokser med bakgrunn gradienter) av Dan Wilson (@danwilson) på CodePen.

En annen mulighet ville ha vært border-bilde. Jeg finner bruksområdene for grensen-bilde heller sjeldne, og syntaksen ganske vanskelig å grok, men dette er en slags perfekt situasjon for det. Eiendommen bruker “9 skive skalering,” så tenk deg et bilde blir kuttet opp som en tic-tac-toe-brett. Da hver av disse områdene kan gjenta eller strekk (eller varianter av disse). En grafisk som dette brun form:

Ni-skiver:

Og alle de ikke-hjørne deler gjenta retningen til å gjøre hva midten plass er nødvendig.

SVG har samme potensial. Mike Riethmuller har et flott innlegg om det. Jeg vil stjele hans demo her:

Se Penn ha bøyelige SVG av Chris Coyier (@chriscoyier) på CodePen.

Se hvordan ulike deler av det SVG strekke seg annerledes når vinduet er endret? Jeg er sikker på at det kunne bli brukt for vårt form design her også.

Jeg synes det er morsomt hvor mange måter det er å gjøre noe som dette. Det er ol’ gammeldagse måten, hvor de hjørnene er bare noen <div>s posisjon og stil opp etter behov. Eller du kan få ekstra super fancy og bruk Houdini / Maling-API til å gjøre det!