Scott O'Hara is a UX designer & developer based out of Boston Massachusetts. He loves pushing the limits of CSS, designing for everyone, writing about what he knows & what he's learning and developing wonderful product experiences.

Scott's articles

  1. You Can Do That With CSS?

    Awhile back, I published an article on how to mimic CoDrops’ Morphing Menu Button demo. I then wrote a quick follow-up showing how to expand on the original demo to provide some additional JavaScript-like overlay functionality.

    That was kind of the start of it all…

    I wanted to go further with CSS-only solutions to see how far I could take interfaces devoid of JavaScript.

    Please keep in mind: some of these demos are purely meant to show how powerful CSS has become. I will talk more about why some of these demos should actually be converted over to a JavaScript solution.

    One more thing: To keep things simple, I’m going to provide only the absolute necessary HTML and CSS in the demos. So don’t expect copy and pasting to get the exact results I outline here. However, if you want to see the source code for each example, you can check that out on CodePen and I will provide a link to the source files at the end of the article.

    A Simple Form Example

    I recently wrote an article demonstrating two no-JavaScript examples of providing user feedback while filling out forms.

    As a pretty straight forward intro, I thought I’d provide another simple form example.

    See the Pen Display Form Label on Focus with CSS by SitePoint (@SitePoint) on CodePen.

    Here we have three text inputs that are using placeholders as their labels. This is really a UX no-no, but I’ve run into many situations where the “designer in charge” has fought tooth-and-nail to block the addition of visible labels.

    Gross.

    My solution to get around this ridiculous problem was to provide the labels as “tool tip reminders” when a user focuses in on an input:

    [code language="html"]


    [/code]

    As you can see, nothing too fancy going on with the HTML there. The only thing that’s a little out of the ordinary is that the <label> comes after the input.

    Now here’s the CSS needed to get this working: