Hier is hoe ik opnieuw theory11 aanmeldings-formulier — hoe zou je het doen?

0
16

Ik liep over een super cool design voor een login-formulier op de website theory11.com. Eigenlijk is de hele site en de producten die zij maken, zijn onvoorstelbaar goed ontworpen, er is gewoon iets over het schone en stijlvolle vorm die echt van me. Plus, het is gewoon zo gebeurde het dat de CodePen Uitdaging die komende week was gebaseerd op vormen uit, dus nam ik een paar minuten en probeerde de handen samen.

Fadeout vector patroon

Een van de dingen die ik dacht was super classy is de manier waarop vector achtergrond-eque patroon was er niet alleen maar vervaagd soort van radiaal. Ik heb niet geprobeerd om te matchen met het patroon precies, ik pakte een van de Activa die in het Deelvenster CodePen en liet het op de <html> – element als een SVG-gegevens-URL-achtergrond-afbeelding met een lage vul-dekking. Dan is een radiaal verloop ligt op de top en maakt de vervagende effect—een radiaal verloop met dezelfde basis-achtergrond kleur, die weer verdwijnt.

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

html {
achtergrond: var(–grijs), 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=”zeshoeken” fill=”%239C92AC” fill-opacity=”0.1″ fill-rule=”nul”%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.31 h-.01L17 42.15V49h-2z”/%3E%3C/g%3E%3C/g%3E%3C/svg%3E’);
}

body {
margin: 0;
hoogte: 100vh;
achtergrond: radiaal verloop(
ellips, midden onder,
var(–grijs–t),
var(–grijs) 90%
);
}

Dubbele rand

Als je alvast een kijkje op de dubbele rand code op theory11 de site, je zult zien het is gedaan met een enkele 2px solid border op een ouder en een ander op het onderliggende element, met een beetje van de vulling ruimte. Prima manier om het te doen, natuurlijk. Maar het herinnerde me aan het feit dat je letterlijk kunt doen verdubbelen als een grens stijl. Je hebt weinig controle over de afstand, maar hey, het is in de buurt!

vorm {
grens: 7px dubbele #AA8B59;
}

Wat is er mee hoek dozen?

Ik had plezier gebouw de rest uit, maar ik gestopt korte omgaan met die hoek dozen. Ik dacht het wel! Mijn eerste gedachte was psuedo-elementen, zoals die zijn prachtige kleine gereedschappen voor het toevoegen van extra flair zonder extra HTML-code. Behalve… je krijgt slechts twee van deze en moeten we hier vier. Blijkt dat is hoe ze het doen—ze krijgen vier omdat ze gebruik maken van zowel de ouder als het kind (de grens).

Peter Schmalfeldt nam een scheur in het doen van het op die manier:

Zie de Pen theory11 aanmelden door Peter Schmalfeldt (@manifestinteractive) op CodePen.

Dan Wilson nam een geheel andere benadering door het te doen met meerdere achtergrond verlopen:

Zie de Pen theory11 teken in (toevoegen hoek dozen met op de achtergrond gradiënten) van Dan Wilson (@danwilson) op CodePen.

Een andere mogelijkheid zou zijn geweest border-image. Ik vind het gebruik van de gevallen voor grens-afbeelding vrij zeldzaam, en de syntaxis vrij moeilijk te grok, maar dit is soort van de perfecte situatie voor. De woning maakt gebruik van “9-slice scaling,” zo stel je een beeld worden afgesneden als een tic-tac-teen raad van bestuur. Vervolgens is elk van die gebieden kunnen herhalen of uitrekken (of variaties van deze). Een afbeelding als deze bruin vorm:

Negen-gesegmenteerde:

En al die niet-hoek secties herhalen richtingen te maken wat het midden van de ruimte is nodig.

SVG heeft vergelijkbare mogelijkheden. Mike Riethmuller heeft een grote post over dat. Ik zal het stelen van zijn demo hier:

Zie de Pen Flexy SVG door Chris Coyier (@chriscoyier) op CodePen.

Zie hoe de verschillende onderdelen van het SVG-stretch anders wanneer de viewport is aangepast? Ik ben er zeker van dat kan worden gebruikt voor onze vorm van het ontwerp.

Ik vind het leuk hoeveel manieren er zijn om iets te doen als dit. Er is de ol’ fashioned manier, waar de hoeken zijn slechts enkele <div> ‘ s die je positie en stijl omhoog als nodig is. Of je kon krijgen extra super mooie en gebruik Houdini / Verf API om het te doen!