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;
  box-shadow:
    // 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.

Comments

  1. User Avatar
    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?

    • User Avatar
      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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    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.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag