» » » » » Twitter like Fixed Header Using LESS CSS Preprocessor

Twitter like Fixed Header Using LESS CSS Preprocessor

7/12/2012 1 comment
Less is the widely used CSS preprocessor that extends CSS with dynamic behavior such as variables, mixins, operations and functions. From the beginning of web designing CSS has not been given the required attention but LESS provides a totally different way to code the stylesheets.
Style like a Programmer:
Since now you have been 'writing' CSS stylesheets but with LESS you will be 'coding' the stylesheets. So if you are a programmer and hate writing the styles, LESS can be more interesting to you. In LESS you can write functions(mixins), expressions, conditions, operators, classes and much more. So now you will get all spice of programming in styling as well. Happy now:)
Twitter Like Fixed Header
Twitter Like Fixed Header
Live Demo Download Script
I have written the LESS code for the Twitter like fixed header. Here I have provided the normal CSS version as well as the LESS version of the stylesheet. You can compare both and see the difference.

Declaring variables in LESS

This stylesheet uses variables for color names like: 
@white: #fff;
@grey: #C6C6C6;

Using variables in LESS

.nav > li > a:hover {
     color: @white;
}

Declaring functions (mixins) in LESS

Mixins are more like functions and can take parameters like function. The below function sets the height and width of any element. 
.set_h_w (@h, @w) {
    height: @h;
    width: @w;
}

Using functions (mixins) in LESS

.head-div {
    .set_h_w('', 800px); /*Do not set the height*/
    margin:auto;
}

The HTML Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebSpeaks.in</title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="less-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
        //jQuery Code to highlight links on mouseover
    var bgPos;
    $('a[title=Connect]').hover(function(){
        var el = $(this).find('i.nav-connect');
        bgPos = el.css('background-position');
        el.css({'background-position':'-80px -80px'});
    }, function(){
        var el = $(this).find('i.nav-connect');
        el.css({'background-position':bgPos});
    });
    $('a[title=Discover]').hover(function(){
        var el = $(this).find('i.nav-discover');
        bgPos = el.css('background-position');
        el.css({'background-position':'-40px -80px'});
    }, function(){
        var el = $(this).find('i.nav-discover');
        el.css({'background-position':bgPos});
    });

    $('.searchbox').focus(hideText);
    $('.searchbox').blur(showText);
     
    function hideText()    {
        if(this.value == this.defaultValue){
               this.value = '';
        }
     }
    
     function showText() {
        if(this.value == ''){
            this.value = this.defaultValue;
        }
     }
});
</script>
</head>
<body>

<div id="head">
    <div class="head-div">
        <ul class="nav">
            <li>
                <a class="nav-link active" href="#" title="Home">
                    <span class="new-wrapper">
                        <i class="nav-home"></i>
                        <i class="nav-new"></i>
                    </span>
                    Home
                </a>
            </li>
            <li>
                <a href="#" title="Connect">
                    <span class="new-wrapper">
                        <i class="nav-connect"></i>
                    </span>
                    Connect
                </a>
            </li>
            <li>
                <a href="#" title="Discover">
                    <span class="new-wrapper">
                        <i class="nav-discover"></i>
                    </span>
                    Discover
                </a>
            </li>
        </ul>
        <i class="bird-topbar-etched"></i>
        <form class="form-search">
            <span class="search-icon">
                <i class="nav-search"></i>
            </span>
            <input class="searchbox" value="Search" type="text"/>
        </form>
    </div>
</div>

</body>

</html>

Complete LESS stylesheet


@white: #fff;
@grey: #C6C6C6;

.border-radius (@radius) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}
.twitter_icons {
    background-image: url(twitter_web_sprite_icons.png);
    background-repeat: repeat-x;
}
.twitter_bgs {
    background-image: url(twitter_web_sprite_bgs.png);
    background-repeat: repeat-x;
}
.set_h_w (@h, @w) {
    height: @h;
    width: @w;
}

html {
    .set_h_w(100%, ''); /* fix height to 100% for IE */
    max-height:100%; /* fix height for other browsers */
    padding:0; /*remove padding */
    margin:0; /* remove margins */
    border:0; /* remove borders */
    background:@white; /*color background - only works in IE */
    /* hide overflow:hidden from IE5/Mac */
    /* \*/
    overflow:hidden; /*get rid of scroll bars in IE */
    /* */
}
body {
    .set_h_w(100%, '');
    max-height:100%;
    overflow:hidden;
    padding:0;
    margin:0;
    border:0;
    font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
    .set_h_w(100%, '');
    display:block;
    max-height:100%;
    overflow:auto;
    padding-left:100px;
    position:relative;
    z-index:3;
    word-wrap:break-word;
    top:45px;
}
#head {
    position:absolute;
    margin:0;
    top:0;
    display:block;
    .set_h_w(40px, 100%);
    line-height:40px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    .twitter_bgs;

    .head-div {
        .set_h_w('', 800px);
        margin:auto;
    }

    ul.nav{
      margin:0;
      padding:0;
      background:transparent;
      position:absolute;
      margin-left:0px;
      padding-left:0px;
      font-size: 12px;
    }

    ul li{
        display:inline;
    }

    .nav > li > a {
        display: block;
        .set_h_w(12px, '');
        font-weight: bold;
        line-height: 1;
        color: #BBB;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .75);
        position: relative;
        text-decoration:none;
        float: left;
        padding: 13px 12px 15px;
    }

    .nav > li > a:hover {
        color: @white;
    }

    .new-wrapper {
        position: relative;
        float: left;
    }

    .nav {
        i {
            float: left;
            margin: -5px 2px 0 0;
        }
        .active {
            background-position: 0 -50px;
            .twitter_bgs;
            color: #ffffff;
        }
        .nav-home {
            background-position: 0 -110px;
            .twitter_icons;
            height: 22px;
            width: 22px;
        }
        .nav-new {
            .twitter_icons;
            .set_h_w(3px, 24px);
            background-position: -200px -50px;
            position: absolute;
            top: 26px;
            left: 50%;
            margin-left: -15px;
            line-height: 1;
            text-align: center;
        }
        .nav-connect {
            background-position: -80px -50px;
            .twitter_icons;
            .set_h_w(22px, 22px);
        }
        .nav-discover {
            background-position: -40px -50px;
            .twitter_icons;
            .set_h_w(22px, 22px);
        }
    }

    .bird-topbar-etched {
        .set_h_w(21px, 24px);
        .twitter_icons;
        position: absolute;
        top: 0;
        left: 50%;
        margin-top: 10px;
        margin-left: -12px;
        -webkit-transition: all .15s ease-in-out;
        background-position: -40px 0;
    }

    .form-search {
        .set_h_w(26px, 202px);
        float: right;
        
        .search-icon {
            z-index: 3;
            position: absolute;
            top: 0;
            display: block;
            .set_h_w(26px, 26px);
            cursor: pointer;
            
            .nav-search {
                .set_h_w(14px, 12px);
                margin-left: 176px;
                background-position: -20px -710px;
                display: inline-block;
                zoom: 1;
                vertical-align: text-top;
                .twitter_icons;
            }
        }
        .searchbox{
            .set_h_w('', 163px);
            background: none repeat scroll 0 0 #ccc;
            border: 1px solid black;
            color: #555555;
            font: 13px Arial,sans-serif;
            padding: 6px 25px 4px 6px;
            .border-radius(13px);
            -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
            -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
        }
        .searchbox:focus {
            background: none repeat scroll 0 0 #ffffff;
            border: 1px solid #999999;
        }
    }
}

table {
    tr {
        td    {
            .set_h_w(100px, 300px);
            .border-radius(12px);
            background-color:@grey;
            margin:botton:30px;
            padding: 15px;

            a {
                color: #007B9F;
                font-size:1.5em;
                text-decoration:none;
            }
        }
    }
}

The Classic CSS stylesheet

@CHARSET "ISO-8859-1";
html {
    height:100%; /* fix height to 100% for IE */
    max-height:100%; /* fix height for other browsers */
    padding:0; /*remove padding */
    margin:0; /* remove margins */
    border:0; /* remove borders */
    background:#fff; /*color background - only works in IE */
    /* hide overflow:hidden from IE5/Mac */
    /* \*/
    overflow:hidden; /*get rid of scroll bars in IE */
    /* */
}
body {
    height:100%;
    max-height:100%;
    overflow:hidden;
    padding:0;
    margin:0;
    border:0;
    font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
    display:block;
    height:100%;
    max-height:100%;
    overflow:auto;
    padding-left:100px;
    position:relative;
    z-index:3;
    word-wrap:break-word;
    top:45px;
}
#head {
    position:absolute;
    margin:0;
    top:0;
    display:block;
    width:100%;
    height:40px;
    line-height:40px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background-image: url(twitter_web_sprite_bgs.png);
    background-repeat: repeat-x;
}
#head .head-div {
    width:800px;
    margin:auto;
}
#head ul.nav{
  margin:0;
  padding:0;
  background:transparent;
  position:absolute;
  margin-left:0px;
  padding-left:0px;
  font-size: 12px;
}
#head ul li {  display:inline;}

.nav > li > a {
    display: block;
    height: 12px;
    font-weight: bold;
    line-height: 1;
    color: #BBB;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .75);
    position: relative;
    text-decoration:none;
    float: left;
    padding: 13px 12px 15px;
}
.nav > li > a:hover {
    color: #ffffff;
}
.new-wrapper {
    position: relative;
    float: left;
}
.nav i {
    float: left;
    margin: -5px 2px 0 0;
}
.nav .active {
    background-position: 0 -50px;
    background-image: url("twitter_web_sprite_bgs.png");
    color: #ffffff;
}
.nav .nav-home {
    background-position: 0 -110px;
    background-image: url("twitter_web_sprite_icons.png");
    background-repeat: repeat-x;
    height: 22px;
    width: 22px;
}
.nav .nav-new {
    background-image: url("twitter_web_sprite_icons.png");
    background-position: -200px -50px;
    position: absolute;
    top: 26px;
    left: 50%;
    height: 3px;
    margin-left: -15px;
    line-height: 1;
    text-align: center;
    width: 24px;
}
.nav .nav-connect {
    background-position: -80px -50px;
    background-image: url("twitter_web_sprite_icons.png");
    background-repeat: repeat-x;
    height: 22px;
    width: 22px;
}
.nav .nav-discover {
    background-position: -40px -50px;
    background-image: url("twitter_web_sprite_icons.png");
    background-repeat: repeat-x;
    height: 22px;
    width: 22px;
}
.bird-topbar-etched {
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: 10px;
    margin-left: -12px;
    -webkit-transition: all .15s ease-in-out;
    background-position: -40px 0;
    width: 24px;
    height: 21px;
    background-image: url("twitter_web_sprite_icons.png");
}
#head .form-search {
    width: 202px;
    height: 26px;
    float: right;
}
.search-icon {
    z-index: 3;
    position: absolute;
    top: 0;
    display: block;
    width: 26px;
    height: 26px;
    cursor: pointer;
}
.nav-search {
    margin-left: 176px;
    background-position: -20px -710px;
    width: 12px;
    height: 14px;
    display: inline-block;
    zoom: 1;
    vertical-align: text-top;
    background-image: url(twitter_web_sprite_icons.png);
    background-repeat: no-repeat;
}
#head .searchbox{
    background: none repeat scroll 0 0 #ccc;
    border: 1px solid black;
    color: #555555;
    font: 13px Arial,sans-serif;
    padding: 6px 25px 4px 6px;
    width: 163px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#head .searchbox:focus {
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #999999;
}

table tr td{height:100px; width:300px; -moz-border-radius:12px; background-color:#C6C6C6; margin:botton:30px;}
table tr td a{color: #007B9F; font-size:1.5em; text-decoration:none;}

1 comments:

We would love to hear from you...

Subscribe to: Post Comments (Atom)
back to top