Thursday, July 18

Here’s how I recreated theory11’s login form — how would you do it?

I ran across a super cool design for a login form over on the website Actually, the whole site and the products they make are incredibly well designed, there’s just something about the clean and classy form that really got me. Plus, it just so happened that the CodePen Challenge that coming week was based on forms, so I took a few minutes and tried slapping it together.

Fadeout vector pattern

One of the things I thought was super classy was the way that vector wallpaper-eque pattern was not only there but faded out sort of radially. I didn’t try to match the pattern exactly—I just grabbed one from the Assets Panel in CodePen and dropped it onto the <html> element as a SVG data URL background-image with a low fill-opacity. Then a radial gradient sits on top and creates the fading effect—a radial gradient with the same base background color that fades away.

:root {
  --gray: rgb(14, 19, 25);
  --gray--t: rgba(14, 19, 25, 0);

html {
  background: var(--gray) url('data:image/svg+xml,%3Csvg xmlns="" 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) 90%

Double border

If you peek at the double border code on theory11’s site, you’ll see it’s done with a single 2px solid border on a parent and another on the child element, with a bit of padding to space them out. Perfectly fine way to do it, of course. But it reminded me of the fact that you can literally do double as a border style. You have very little control over the spacing, but hey, it’s close!

form {
  border: 7px double #AA8B59;

What about them corner boxes?

I had fun building the rest of it out, but I stopped short of dealing with those corner boxes. I thought about it though! My first thought was psuedo elements, as those are wonderful little tools for adding extra flair without any extra HTML. Except… you only get two of those and we need four here. Turns out that’s how they do it—they get four because they use both the parent and the child (to get the border).

Peter Schmalfeldt took a crack at doing it that way:

See the Pen theory11 sign in by Peter Schmalfeldt (@manifestinteractive) on CodePen.

Dan Wilson took an entirely different approach by doing it with multiple background gradients:

See the Pen theory11 sign in (add corner boxes with background gradients) by Dan Wilson (@danwilson) on CodePen.

Another possibility would have been border-image. I find use cases for border-image rather rare, and the syntax pretty hard to grok, but this is kind of the perfect situation for it. The property uses “9 slice scaling,” so imagine an image being cut up like a tic-tac-toe board. Then each of those areas can repeat or stretch (or variations of those). A graphic like this brown shape:


And all those non-corner sections repeating directionally to make whatever middle space is needed.

SVG has similar potential. Mike Riethmuller has a great post about that. I’ll steal his demo here:

See the Pen Flexy SVG by Chris Coyier (@chriscoyier) on CodePen.

See how different parts of that SVG stretch differently when the viewport is resized? I’m sure that could be used for our form design here as well.

I find it fun how many ways there are to do something like this. There’s the ol’ fashioned way, where those corners are just some <div>s you position and style up as needed. Or you could get extra super fancy and use Houdini / Paint API to do it!

The post Here’s how I recreated theory11’s login form — how would you do it? appeared first on CSS-Tricks.


0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x