Här är hur jag återskapas theory11 inloggning form — hur skulle du göra det?

0
44

Jag sprang över en super cool design för en login-formuläret på webbplatsen theory11.com. Faktiskt, hela området och de produkter som de gör är otroligt väl utformad, det är bara något om ren och elegant form som verkligen fick mig. Plus, det hände bara så att CodePen Utmaning som den kommande veckan var baserad på former, så jag tog ett par minuter och försökte dunka det tillsammans.

Fadeout vektor mönster

En av de saker jag tyckte var super elegant var det sätt som vektor bakgrund-eque mönster var inte bara det men bleka ut sortera av radiellt. Jag försöker inte att matcha exakt—jag tog bara en från Tillgångar Panel i CodePen och tappade det till <html> – elementet som en SVG-data URL-bakgrunden-bild med en liten fylla-opacitet. Sedan en radiell övertoning sitter på toppen och skapar avklingande effekt—en radiell övertoning med samma bas bakgrund färg som tonar bort.

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

html {
bakgrund: var(–grå) url (“data:image/svg+xml,%3Csvg xmlns=”http://www.w3.org/2000/svg” width=”28″ height=”49″ viewBox=”0 0 28 49″%3E%3Cg fylla-artikel=”evenodd”%3E%3Cg id=”hexagoner” fylla=”%239C92AC” fylla-opacitet=”0.1″ fylla-artikel=”noll”%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öjd: 100vh;
bakgrund: radial gradient(
ellips till längst ner i mitten,
var(–grå-t),
var(–grå) 90%
);
}

Dubbel gränsen

Om du kika på dubbel border kod på theory11 webbplats, kommer du att se att det är gjort med en enda 2px solid gränsen på en förälder och en annan på barnet element, med lite utfyllnad till rymden dem. Alldeles utmärkt sätt att göra det, naturligtvis. Men det påminde mig om det faktum att du kan bokstavligen göra dubbel som en gräns stil. Du har mycket lite kontroll över avstånd, men hey, det är nära!

formen {
gränsen: 7px dubbel #AA8B59;
}

Vad är det med dem hörnet lådor?

Jag hade roligt att bygga resten av det, men jag slutade kort att ta itu med dessa hörnet lådor. Jag tänkte på det dock! Min första tanke var pseudo-element, som de är underbara små verktyg för att lägga till extra stil utan någon extra HTML. Utom… du får bara två av dem och vi behöver fyra här. Visar sig att det är hur de gör det—de får fyra eftersom de använder både förälder och barn (för att få den gränsen).

Peter Schmalfeldt tog en spricka på att göra det på detta sätt:

Se Pennan theory11 logga in med Peter Schmalfeldt (@manifestinteractive) på CodePen.

Dan Wilson tog en helt annan strategi genom att göra det med flera bakgrunden gradienter:

Se Pennan theory11 logga in (lägg till hörnet lådor med bakgrund lutningar) av Dan Wilson (@danwilson) på CodePen.

En annan möjlighet skulle ha varit border-image. Jag tycker användningsfall för border-image ganska sällsynta, och syntax ganska svårt att grok, men detta är lite av det perfekta läget för det. Fastigheten använder “9 skiva skalning,” så att föreställa sig en bild att skära upp som en tic-tac-toe styrelsen. Sedan vart och ett av dessa områden kan upprepa eller sträcka (eller variationer av dessa). En bild som denna bruna form:

Nio-skivade:

Och alla dessa icke-hörnsektioner upprepa directionally att göra allt på mitt utrymme behövs.

SVG har liknande potential. Mike Riethmuller har ett bra inlägg om det. Jag ska stjäla hans demo här:

Se Pennan Flexy SVG av Chris Coyier (@chriscoyier) på CodePen.

Se hur olika delar av SVG sträcka på olika sätt när det virtuella är storleken? Jag är säker på att det skulle kunna användas för våra form design här också.

Jag tycker det är kul hur många sätt finns det att göra något liknande. Det är ol’ fashioned way, där dessa hörn är bara några exempel <div>du position och stil upp när det behövs. Eller så kan du få extra super fin och använda Houdini / Måla API för att göra det!