Hier ist, wie ich neu theory11-login-Formular — wie würden Sie es tun?

0
46

Ich lief über ein super cooles design für ein login-Formular über die website theory11.com. Eigentlich ist die ganze Website und die Produkte, die Sie machen, sind unglaublich gut gestaltet, es gibt nur etwas über die saubere und elegante form, das mich wirklich. Plus, es ist einfach so passiert, dass die CodePen Herausforderung, die kommende Woche wurde basierend auf den Formen, also nahm ich mir ein paar Minuten und versuchte, schlug es zusammen.

Fadeout-Vektor-Muster

Eines der Dinge, die ich dachte, war super Edel war die Art und Weise, dass Vektor-Tapete-eque Muster war nicht nur da, aber verblasst Art von Radial. Ich habe nicht versucht, die dem Muster entsprechen genau—ich habe mir einfach eine aus dem Bedienfeld “Elemente” in CodePen und ließ es auf das <html> – element als SVG-Daten die URL-hintergrund-Bild mit einer geringen fill-opacity. Dann einen radialen Farbverlauf sitzt oben auf und schafft den fading-Effekt einen radialen Verlauf mit den gleichen Basis-hintergrund-Farbe, die verblasst.

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

html – {
hintergrund: var(–Grau), url(‘data:image/svg+xml,%3Csvg xmlns=”http://www.w3.org/2000/svg” width=”28″ height=”49″ viewBox=”0 0 28 49″%3E%3Cg fill-rule=”evenodd”%3E%3Cg id=”Sechsecke” fill=”%239C92AC” fill-opacity=”0.1″ fill-rule=”ungleich”%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;
height: 100vh;
background: radial-gradient(
ellipse von unten in der Mitte,
var(–Grau–t),
var(–Grau) 90%
);
}

Doppel-Grenze

Wenn Sie einen Blick auf die doppelten Grenz-code auf theory11-Website, Sie werden sehen, es ist fertig, mit einem einzigen 2px solid Grenze auf ein Elternteil und ein anderes untergeordnetes element, mit ein bisschen Polsterung um Raum Sie sich. Perfekt auf die feine Art, es zu tun, natürlich. Aber es erinnerte mich an die Tatsache, dass Sie buchstäblich tun doppelte als eine Grenze Stil. Sie haben sehr wenig Kontrolle über den Abstand, aber hey, es ist ganz nah!

form {
border: 7px double #AA8B59;
}

Was über diese Ecke Boxen?

Ich hatte Spaß beim bauen der rest aus, aber ich hielt kurz den Umgang mit denen, Ecke Boxen. Ich dachte, über die es aber! Mein Erster Gedanke war: Pseudo-Elemente, wie die wunderbare kleine tools für das hinzufügen von zusätzlichen flair ohne extra HTML. Außer… man bekommt nur zwei von denen, und die müssen wir vier hier. Stellt sich heraus, dass s wie Sie es tun—Sie bekommen vier, weil Sie sowohl dem Elternteil und dem Kind (die Grenze).

Peter Schmalfeldt nahm einen Spalt auf machst es so:

Finden Sie den Stift theory11 anmelden von Peter Schmalfeldt (@manifestinteractive) auf CodePen.

Dan Wilson nahm einen ganz anderen Ansatz, indem Sie es mit mehreren hintergrund-Verläufe:

Finden Sie den Stift theory11 anmelden (hinzufügen Ecke Boxen mit hintergrund-Gradienten) von Dan Wilson (@danwilson) auf CodePen.

Eine andere Möglichkeit gewesen wäre, border-image. Ich finde Anwendungsfälle für border-image eher selten, und die syntax ziemlich schwer zu verstehen, aber das ist irgendwie die perfekte situation für ihn. Die Eigenschaft verwendet “9-slice-Skalierung,” so vorstellen, ein Bild wird zerschnitten wie ein tic-tac-toe Bord. Dann in jedem dieser Bereiche können sich wiederholen oder dehnen (oder Variationen davon). Eine Grafik wie diese braune Form:

Neun-Scheiben:

Und alle diejenigen, die nicht-Ecke Abschnitte, Wiederholung gerichtet zu machen, was Mitte Platz benötigt wird.

SVG hat ähnliches Potenzial. Mike Riethmuller hat einen tollen post über, die. Ich werde stehlen seine demo hier:

Finden Sie den Stift Flexy SVG von Chris Coyier (@chriscoyier) auf CodePen.

Sehen Sie, wie verschiedene Teile des SVG-Strecke anders, wenn der viewport verkleinert? Ich bin mir sicher, dass könnte verwendet werden, für unsere form-design auch hier.

Ich finde es lustig wie viele Möglichkeiten es gibt, so etwas zu tun. Gibt ‘s die ol’ fashioned way, wo diese Ecken sind nur einige <div>s Sie position und Stil Bedarf. Oder Sie könnten get extra super schickes und verwenden Houdini / Farbe API, um es zu tun!