Acceleroto – new website

By Mike Berg / January 25th, 2013 / Portfolio / No Comments

Acceleroto - new websiteIt was a pleasure working with Bryan to create a fresh new look for his website. The goal was clarity and simplicity, both in the visuals and the navigation. There is as little as possible displayed on each page; there’s no sidebar or subnav, and the search field is hidden away behind the top edge of the screen.

Making that search field was my favourite little part of the site, and it’s so simple. 100% CSS, no JavaScript at all, and it works like a charm. Here’s the CSS for it, if you feel like making something similar yourself. The html is pretty WordPress-specific, but you get the idea.

HTML:

</p> <div class="search"> <form method="get" id="searchform" action="/"> <input type="text" value="Search..." onclick="this.value='';" name="s" id="s" /><br /> </form> <p><img src="/images/icon-search.png"> </div> <p>

CSS:
#header .search {
 position: absolute;
 right: 86px;
 top: -32px;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;
 z-index: 999;
 }
 #header .search form#searchform{
 padding: 3px 10px;
 background-color: #eff0f4;
 -webkit-border-radius: 0px 0px 3px 3px;
 border-radius: 0px 0px 3px 3px;
 margin: 0;
 }
 #header .search input#s{
 background-color: #888;
 border: none;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 color: #fff;
 }
 #header .search img {
 float: right;
 background-color: #eff0f4;
 -webkit-border-radius: 0px 0px 3px 3px;
 border-radius: 0px 0px 3px 3px;
 padding: 5px;
 margin: 0 10px 0 0;
 }
 #header .search:hover{
 top: 0px;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;
 }