How should I re-create this design in HTML and CSS?

Question

I'm looking for a little sage advice from some helpful HTML/CSS masters. I am in the process of building a website to help people in my area find an apartment. I've been working with a friend of mine who does graphics design and he created some really nice looking mockups that I am now working on implementing in HTML/CSS.

I attached an image of the filters and I was wondering how I should create them. If I use CSS to style the pill shaped inputs, it probably won't work on all browsers. Should I take the approach of creating small, repeating blue lines that form the background of the inputs?

I'm not asking for someone to write the code for me, but I was wondering if anyone has advice on taking a CSS or image based approach to building a design that looks like the attached mockup.

Answer 1

It depends on your audience. I target only the latest browsers, so I choose the latest CSS. Almost anything is possible in CSS. If you must support older browsers, use JS as a fallback.

Here's what I did in pure CSS in about 20 mins. Of course it could be much better, but I didn't want to spend any more time on it, just wanted to get you started if you decide to go that way.

Here's the demo: http://jsfiddle.net/ThinkingStiff/PHTsb/

HTML:

<div id="bedrooms" class="button">
    <div id="walking">Walking</div>
    <div class="body">Bedroom</div>
    <div class="count">1</div>
    <div class="down">&#x25bc;</div>
</div>

CSS:

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Satisfy);

body
{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQI12Pw8fH5X19fD8YMMAZIkAHGANEAiZwUkmznO8QAAAAASUVORK5CYII=);
}

#bedrooms
{
width: 146px;        
}

.button
{
background-color: #65c3e6;
background-image: linear-gradient( 
    top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -webkit-linear-gradient( 
    top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -moz-linear-gradient( 
    top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -o-linear-gradient( 
    top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -ms-linear-gradient( 
    top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
border-bottom: 1px solid #4998b8;
border-radius: 22px;
border-top: 1px solid #cbeef7;
box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-webkit-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-moz-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-o-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-ms-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
color: white;
height: 36px;
margin: 30px 0 0 30px;
position: relative;
}

#walking
{
font: bold 24px Satisfy;
left: -17px;
letter-spacing: -2px;
position: absolute;
text-shadow: 3px 3px 3px rgba(69,69,69,.2), -1px 1px 1px rgba(69,69,69,.1);
top: -13px;
transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
-ms-transform:rotate(-15deg);
}

.body
{
border-right: 1px solid #73c7e6;
display: inline-block;
font: normal 24px/24px Yanone Kaffeesatz;
height: 30px;
margin-left: 10px;
padding: 6px 8px 0 0;
text-shadow: 1px 1px 1px rgba(69,69,69,.2), -1px 1px 1px rgba(69,69,69,.1);
text-transform: uppercase; 
vertical-align: top;
}

.count
{
border-left: 1px solid #8fd4eb;
color: #185269;    
display: inline-block;
font: bold 16px/16px Helvetica, Arial;
height: 25px;
padding: 11px 6px 0 8px;
margin-left: 1px;
text-shadow: 1px 1px 1px rgba(255,255,255,.3), -1px 1px 1px rgba(255,255,255,.2);
vertical-align: top;
}

.down
{
color: #42778c;    
display: inline-block;
font: normal 14px/14px Helvetica, Arial;
height: 24px;
padding-top: 12px;
text-shadow: 1px 1px 1px rgba(255,255,255,.3), -1px 1px 1px rgba(255,255,255,.2);
vertical-align: top;
}

Answer 2

You are right about the browser support.

So I wouldn't go the CSS route with this.

I would make the left and right rounded borders and make them into images.

I also would create a 1px width image of the background and repeat this horizontally (repeat-x).