About the cube
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:
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:
Note that I use em's to make it scalable with the rest of the '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'

12-'06 Having fun with IE - part 3: doctype switching
11-'06 Having fun with IE - part 2: CSS inheritance
Comments
Comments are closed