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

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


I ran across a super cool design for a login form over on the website theory11.com. 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=”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%
);
}
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:

Nine-sliced:

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.
Source: CssTricks

Posted on August 8, 2018 in API, Austin Web Designer, code, css, Design, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Development Austin, Drupal Support, Expert Drupal Development, html, The, Web Design Services, website

Share the Story

Back to Top