We pick up where we left off in Video #034 and continue building out the search area.

This time we're focusing on the "open" state of the search, building the actual form elements themselves. The search field itself uses the HTML5 form element type "search" - which usually has some custom styling associated with it, but because we're using Normalize (Video #011), that's not a problem for us.

We create a new modular bit of CSS (_buttons.scss) for our own use in styling buttons across the site. See what we're doing there? Any bit of styling that mentally makes sense to be isolated, we create a new file for. We can do this as much as we like without worry, because the files get all concatenated together with Sass anyway.

The three-dimensional button look is created just by a whole bunch of comma-separated box shadows. The colors are easy to change, because use (you guessed it!) variables.

$bottomSide: #3852b1;
$rightSide: #203891;

.button, #rcp_submit {
  border: 0; // kill default styling
  background: #4e68c7;
    // right side           // bottom
    1px 0px 1px $rightSide, 0px 1px 1px $bottomSide,
    2px 1px 1px $rightSide, 1px 2px 1px $bottomSide,
    3px 2px 1px $rightSide, 2px 3px 1px $bottomSide,
    4px 3px 1px $rightSide, 3px 4px 1px $bottomSide,
    5px 4px 1px $rightSide, 4px 5px 1px $bottomSide,
    6px 5px 1px $rightSide;

We echo that same styling in the input element (only on the inside rather than the outside), completing the 3D look. The amount the shadows are offset match our $offset variable, leading to some design consistency.

Not in this video, but later on, we figure out that the inner shadows on the inputs is a lot easier to do with just two borders instead of all the shadows (border meet each other at an angle). Not possible on the button unfortunately.

This inset-input style ends up permeating all input styles across the site, for better or worse.


  1. andyunleash
    Permalink to comment#

    For Google Custom Search is it possible to exclude directories/subfolders in a particular case? I’m just thinking for the blog search issue – instead of searching just the blog – would it be possible to exclude everything but the blog in a separate search function?

    • Chris Coyier
      Permalink to comment#

      HMMMMMM. VERY SMART. This is exactly what we do on CodePen to refine results. For some reason I didn’t think about it there. I’ll see what I can do.

  2. ryandolankayak
    Permalink to comment#

    Hi Chris,
    Somewhat off topic to this video but could you just explain a little more on the @import problem you had? I just started sass and codekit after seeing these videos and want to make sure I use the url when needed. Any help would be great.

    • Chris Coyier
      Permalink to comment#

      Using @import in Sass is fantastic. It works like PHP include would, it grabs the contents of the file you reference and puts it there in the final compiled version.

      You can also @import in regular ol’ CSS. It works a bit differently though. It just references the file you specify. It behaves like you’ve included it, but it has to make a request out for the file.

      Also the syntax is slightly different.

      SCSS: @import “file.scss”;
      CSS: @import url(“file.scss”);

      Technically the spec allows for either syntax in regular ol’ CSS, but like everything else, browser support varies and it’s safter to use the url() syntax.

  3. Seth Hall
    Permalink to comment#

    Hey Chris,

    You may not be too concerned about this, but …

    these two things have drastically sped up my dev workflow within ST2:

    zen coding – awesome auto complete. quickly create ul/li navs and tab to fill
    CMD click for multi-cursor select – an example would be $rightSide $bottomSide

    Thanks ,
    Great video

    • Chris Coyier
      Permalink to comment#

      I’m not super proficient with those things, but you’ll be glad to know that both of them come up in this series and we talk about them and use them a bit.

  4. CWSpear
    Permalink to comment#

    In terms of getting your posts at /blog/, I think I’ve got a good solution. You can just change it via WP settings to add in the blog and by hooking into the 404 handler, we can check to see if a link exists by adding /blog/ (if it doesn’t have it) and redirecting correctly if it does, saving you from all the SEO fallout.

    I go into more detail on GitHub, but I have done this on other systems, and I’m confident it would work on WordPress, just gotta hook into its “page not found” handler.

  5. Kelvin Alfonso
    Permalink to comment#

    On the /blog/ question, can’t you theoretically just put all your categories under a category titled “blog” (or the like)? It’s a little dirtier but I feel like it’d work.

  6. Chris Coyier
    Permalink to comment#

    The search issue was resolved by creating a new Google Search Engine with exclude filters for all the subsections of the site, so it only returns blog posts.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.