Create a minimalistic black and white navigation with HTML and CSS

10.09.2013 by Ilia Raiskin

HTML CSS Design

In this tutorial I'm going to show you how to create a minimalistic black and white navigation using HTML and CSS.

HTML

body {
padding: 0;
margin: 0;
background: #F3F3F3;
-webkit-font-smoothing:antialiased;
}

.back-nav{
background:white;
}

.bw-nav {
list-style: none;
list-style-type: none;
margin: 0 auto;
width: 430px;
padding-left: 0;
}

.bw-nav li {
float: left;
border-right: 1px solid rgb(248, 248, 248);
}

.bw-nav li.bw-first-li{
border-left:1px solid rgb(248, 248, 248);
}

.bw-nav li a {
font-family: Helvetica, sans-serif;
display: block;
padding: 30px 15px;
font-size: 14px;
text-decoration: none;
color: rgb(141, 141, 141);
-webkit-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
padding: 50px;
}

.bw-nav li a:hover {
background: black;
color: white;
}

CSS

<div class="back-nav">
<ul class="bw-nav">
<li class="bw-first-li">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<br style="clear:both;"/>
</ul>
</div>

That's it. The CSS transitions add a nice and smoothing animation to our navigation. Feel free to change colors, the font and more!

About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.

Create a minimalistic black and white navigation with HTML and CSS

HTML

CSS

About the author

Ilia Raiskin

Did you like this post? Any feedback is highly appreciated. Feel free to leave a comment.

Follow & Subscribe

About us

Info