About the cube

By crisp on vrijdag 1 december 2006 00:20
Category: Other, Views: 5.222

What's up with the cube in my weblog-'design'?

I'm not much of a designer but I didn't want my blog to have one of the default WordPress themes either. Because I'm not a designer I decided to not even try to make a design so I just kept it real simple. Some things are still remaining from the original Kubrich theme I took as a basis but I might minimize those away as well.

The only real style-element is the cube on the left in the header (only visible in CSS-capable browsers) which was something I came across when I recalled the 'slantastic' demo from Eric Meyer and went to look for some more examples.

I found the cube on Claire Campbell's site about style and CSS design and found it intriguing. The original markup and css of the example was like this:

HTML:

<style type="text/css">
#cubecontainer {
    width: 120px;
    margin: 1em auto;
    text-align: center;
}
.cubedraw {
    line-height:0px;
    width:0px;
    height:0px;
    margin: 0px;
    font-size: 0px;
    border-style:solid;
}
.c1 {
    border-color: white white blue white;
    border-width: 0px 60px 45px 60px;
}
.c2 {
    border-color: blue lime white red;
    border-width: 45px 60px 0px 60px;
}
.c3 {
    border-color: white lime white red;
    border-width: 0px 60px 0px 60px;
    height: 20px;
}
.c4 {
    border-color: white red white white;
    border-width: 0px 60px 45px 0px;
    float: left;
}
.c5 {
    border-color: white white white lime;
    border-width: 0px 0px 45px 60px;
    float: left;
}
</style>
<div id="cubecontainer">
    <div class="cubedraw c1"></div>
    <div class="cubedraw c2"></div>
    <div class="cubedraw c3"></div>
    <div class="cubedraw c4"></div>
    <div class="cubedraw c5"></div>
</div>

I found a way to make it with less code, and more particular with one less inner division. I also more liked the cube to be more tilted backwards. This is the style and markup for my version:

HTML:

<style type="text/css">
#cube {
    height: 6.5em;
    width: 6em;
    float: left;
}
#cube div {
    width: 0;
    height: 0;
    border-style: solid;
    overflow: hidden;
}
#cube .c1 {
    border-color: white white blue white;
    border-width: 0 3em 1.5em 3em;
}
#cube .c2 {
    border-color: blue lime blue red;
    border-width: 1.5em 3em 0 3em;
    height: 2em;
}
#cube .c3 {
    border-color: white red white white;
    border-width: 0 3em 1.5em 0;
    float: left;
}
#cube .c4 {
    border-color: white white white lime;
    border-width: 0 0 1.5em 3em;
    float: left;
}
</style>
<div id="cube">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
</div>