CODEWITHSUNDEEP
cssresponsive-designzurb-foundation
lexeme
lexeme

Reputation: 2973

Custom search bar and responsive grid

I've found cool article http://www.tripwiremagazine.com/2012/01/how-to-create-a-seach-bar-in-photoshop.html recently. Don't know how to handle background images inside responsive grid. How do I make such a search bar using Zurb Foundation grid? Is it possible?

Thanks!

Upvotes: 1

Views: 2268

Answers (1)

DMTintner
DMTintner

Reputation: 14729

The search bar in the design could be styled completely with CSS and then you wouldn't have to use background images at all. Here are a few main points of code that would make this work:

HTML:

<div class="input-container">
     <input type="text" />
     <button>Search</button>
</div>

The text input:

input[type="text"] {
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
    border-radius: 5px;
    background-color: #fff;
}

the button:

button {
    margin-left: -10%;
    background-image: -webkit-linear-gradient(top, #117a03 0%,#287c15 100%);
    border-radius: 0 5px 5px 0;
    height: 32px;
    padding: 0 5px;
    border: 1px solid #bbb;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px #fff;
    color: #074F03;
    text-shadow: 0px 1px #ccc;
    font-weight: bold;
}

You need to add the vendor prefixes for CSS3 properties, but this is a pretty basic starting point and should give you everything you need. Here's a fiddle with it working: http://jsfiddle.net/J6Dvz/

Upvotes: 1

Related Questions