Crisp's blog

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<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>

Note that I use em's to make it scalable with the rest of the 'design'