Ganeshnomicks

The design I had been using for this blog is now out. Its free and open source you can download it from Opendesigns. It is third in the Ganesh## series B)

Preview | Download

The wordpress theme will be up soon

While redesigning this site I came across a css hack by which borders inclined at an angle can be created. I observed it while designing the navigation and decided against removing the slants cuz I think they’re cool.

I decided to play a bit with this little hack and made myself some hills using plain html and css.

You can view it here.

The CSS

#hill
{
float: left;
width: 250px;
margin: 0px;
font-size: 21px;
}
#hill a {
display: block;
width:0px;
padding: 5px 5px 5px 10px;
border-bottom: 125px solid #fff;
text-decoration: none;
color: #000;
}
#hill ul{
margin: 0px;
list-style-type: none;
padding: 0px;
}
.h1
{
background: #e3e147;
border-left: 300px solid #e3e147;
}
.h2
{
background: #47e3b5;
border-top: 125px solid #fff;
border-left: 300px solid #47e3b5;
}

.h3
{
border-left: 300px solid #47c0e3;
border-top: 125px solid #fff;
background: #47c0e3;
}

.h4
{
border-left: 300px solid #e34765;
border-top: 125px solid #fff;
background: #e34765;

}

The HTML

<div id = “hill”>
<ul>
<li><a href=”#” class= “h1″></a></li>
<li><a href=”http://ganeshiyer.net/about/” class= “h2″></a></li>
<li><a href=”http://ganeshnomicks.blogspot.com/” class= “h3″></a></li>
<li><a href=”http://feeds2.feedburner.com/ganeshiyer/rssfeed” class= “h4″></a></li>

</ul>
</div>

I’d love to see your results, post ‘em here.

This is the list of Opensource designs I have created. All these designs are written using valid XHTML and CSS. The graphics were created from either Photoshop or Gimp. These are highly accessible and usable layouts that use css divs instead of tables to demarcate various elements of the pages.