Ich bin auf ein super cooles Design für ein Anmeldeformular auf der Website theory11.com gestoßen. Tatsächlich sind die gesamte Website und die Produkte, die sie herstellen, unglaublich gut gestaltet, aber die saubere und klassische Form hat mich wirklich angesprochen. Außerdem war die CodePen Challenge der folgenden Woche auf Formularen basiert, also habe ich ein paar Minuten gebraucht und versucht, es zusammenzufügen.
Ausgeblendetes Vektor-Muster
Eines der Dinge, die ich sehr klassisch fand, war die Art und Weise, wie das vektorielle Tapeten-artige Muster nicht nur vorhanden war, sondern auch irgendwie radial ausblendete. Ich habe nicht versucht, das Muster exakt nachzubilden – ich habe einfach eines aus dem Assets Panel in CodePen genommen und es auf das <html>-Element als SVG-Daten-URL background-image mit geringer Füllopacity gelegt. Dann liegt ein radialer Verlauf darüber und erzeugt den Ausblendeffekt – ein radialer Verlauf mit derselben Basis-Hintergrundfarbe, der verblasst.
:root {
--gray: rgb(14, 19, 25);
--gray--t: rgba(14, 19, 25, 0);
}
html {
background: var(--gray) 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="hexagons" fill="%239C92AC" fill-opacity="0.1" fill-rule="nonzero"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-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.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.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 at bottom center,
var(--gray--t),
var(--gray) 90%
);
}Doppelter Rand
Wenn man sich den Code für den doppelten Rand auf der Website von Theory11 ansieht, stellt man fest, dass er mit einem einzelnen 2px soliden Rand auf einem Elternelement und einem weiteren auf dem Kindelement mit etwas Padding zur Abgrenzung realisiert wird. Das ist natürlich eine absolut gute Methode. Aber es erinnerte mich daran, dass man tatsächlich double als Randstil verwenden kann. Man hat nur sehr wenig Kontrolle über den Abstand, aber hey, es kommt dem nahe!
form {
border: 7px double #AA8B59;
}Was ist mit diesen Eckkästen?
Ich hatte Spaß daran, den Rest auszubauen, aber ich habe aufgehört, mich um diese Eckkästen zu kümmern. Ich habe darüber nachgedacht! Mein erster Gedanke waren Pseudo-Elemente, da dies wunderbare kleine Werkzeuge sind, um zusätzlichen Flair ohne zusätzlichen HTML-Code hinzuzufügen. Außer… man bekommt nur zwei davon und wir brauchen hier vier. Es stellt sich heraus, dass sie es so machen – sie bekommen vier, weil sie sowohl das Eltern- als auch das Kindelement verwenden (um den Rand zu erhalten).
Peter Schmalfeldt hat sich daran versucht
Siehe den Pen theory11 sign in von Peter Schmalfeldt (@manifestinteractive) auf CodePen.
Dan Wilson ging einen ganz anderen Weg, indem er es mit mehreren Hintergrundverläufen realisierte
Siehe den Pen theory11 sign in (add corner boxes with background gradients) von Dan Wilson (@danwilson) auf CodePen.
Eine weitere Möglichkeit wäre border-image gewesen. Ich finde Anwendungsfälle für border-image eher selten und die Syntax ziemlich schwer zu verstehen, aber dies ist quasi die perfekte Situation dafür. Die Eigenschaft verwendet "9-Slicing-Skalierung", stellen Sie sich also ein Bild vor, das wie ein Tic-Tac-Toe-Brett zerschnitten wird. Dann können sich jeder dieser Bereiche wiederholen oder strecken (oder Variationen davon). Eine Grafik wie diese braune Form
Neunfach aufgeteilt
Und all diese Nicht-Eck-Abschnitte wiederholen sich richtungsweisend, um den benötigten mittleren Raum zu füllen.
SVG hat ähnliches Potenzial. Mike Riethmuller hat einen tollen Beitrag dazu. Ich werde seine Demo hier stehlen
Siehe den Pen Flexy SVG von Chris Coyier (@chriscoyier) auf CodePen.
Sehen Sie, wie sich verschiedene Teile dieser SVG unterschiedlich dehnen, wenn die Ansichtsfenstergröße geändert wird? Ich bin sicher, dass dies auch für unser Formulardesign hier verwendet werden könnte.
Ich finde es lustig, wie viele Wege es gibt, so etwas zu tun. Es gibt den altmodischen Weg, bei dem diese Ecken einfach nur ein paar <div>s sind, die man nach Bedarf positioniert und gestaltet. Oder man kann extra super schick werden und Houdini / Paint API verwenden, um es zu tun!
Als Sie ursprünglich über das Design getwittert haben, habe ich den Randeffekt (mit den Eckkästen) mit
border-imageund einem winzigen SVG nachgebildetMein schneller und schmutziger Versuch, diesen Rand zu erstellen: https://codepen.io/maani/pen/OwaBgV
Man könnte auch mehrere box-shadows für die doppelten Ränder verwenden. Dann hätte man zwar nicht die Transparenz zwischen den beiden Rändern. Aber wenn Transparenz kein Problem ist, gibt bod-shadow viel Kontrolle über Größe und Platzierung jedes "Randes".