About the cube again

By crisp on Monday 28 May 2012 01:46 - Comments (15)
Categories: CSS, Tweakers.net, Views: 14.253

You may have noticed that my weblog design is not exactly 'state of the art', and to be honest: I do not intend it to be that way. I just want it to be 'outstanding', and using 'lime' as a background-color achieves just that :P

There is however one gimmick that does make my tweakblog stand out: it's the '3D cube' in my header that's just pure CSS (and as a developer of tweakers.net I made an exception in the tweakblogs code to get it there ;)).

But time goes on, and what used to be hot (almost) six years ago is a commodity now.

CSS has advanced through the years, but the ability to go beyond horizontal or vertical still reminds me of the slantastic demo of Eric Meyer. Even though it appears this particular technique did not get much leverage in every day website design it has always been in the back of my mind.

This reminder recently got activated again when I was working on the button design for our website overhaul (dubbed 'Tweakers.net 7'); there was a particular design for 'back' buttons that were styled as arrows pointing left. The developer that was actually implementing this feature used background-images to create the right design (and it's hover-companion). I however thought that it would be possible to create this button-style in pure CSS using the 'slanting borders' technique, so I came up with this:

Terug

Just one element and making creative use of the :before and :after pseudo-elements and the slanting-borders technique of Eric Meyer :) (use view-source to see the code)

This made me think about the CSS 'gimmick' that I used to have on my weblog, and a recent tweet pointing to some of these nice css-tricks made me rethink again: wouldn't it be possible to create my 'cube' using just one element in CSS?

Short answer: yes!

Longer answer: yes, even with a more 3D-like look!

Result:


Cascading Stylesheet:
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
#cube3d {
    width: 0;
    height: 60px;
    border-style: solid;
    border-color: blue lime blue red;
    border-width: 20px 50px 0 50px;
    position: relative;
    margin-top: 25px;
}
#cube3d:before, #cube3d:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    overflow: hidden;
}
#cube3d:before {
    top: -35px;
    left: -50px;
    border-color: white white blue white;
    border-width: 0 50px 15px 50px;
}
#cube3d:after {
    bottom: 0;
    left: -50px;
    border-color: transparent white white white;
    border-width: 30px 50px 0 50px;
}


Now I just need to add some CSS3 animation :P

Volgende: D oplossing voor het reiskosten probleem 06-'12 D oplossing voor het reiskosten probleem
Volgende: JSMin+ version 1.4 07-'11 JSMin+ version 1.4

Comments


By Tweakers user kipusoep, Monday 28 May 2012 09:28

Nice, just one thing though; there's no Anti-aliasing for the 'Terug'-button, which make it look kinda ugly :P

By Tweakers user ViperNL, Monday 28 May 2012 09:38

Bij mij wel volgens mij. Zelfs als ik inzoom zijn de schuine randjes netjes kartelvrij.
Bij sommige zoomstapjes zie ik wel een witte lijn tussen het schuine gedeelte en het rechthoekige gedeelte.

By Tweakers user Gropah, Monday 28 May 2012 09:38

I don't think there is any way to AA css, if I understand css correctly, but I probably won't :P

By Tweakers user Chesta, Monday 28 May 2012 10:42

IE9 en FF12 doen hier wel AA, Chrome niet. Ik vind het wel bij z'n username passen :P

By Tweakers user MetalfanBlackness, Monday 28 May 2012 11:18

Wat ik jammer vind aan de nieuwe box is dat je bij bijvoorbeeld de #cube3d:after bij border color moet opgeven welke border-color (= achtergrond kleur) kleur je wilt hebben.
Als deze kleur niet exact matched met de achtergrond kleur van het element dat er omheen zit krijg je een box te zien om je cube heen, zoals dat nu ook is, omdat de achtergrond kleur van het midden van je blog ook niet wit is. Het had mooi geweest als deze automagisch zou matchen, maar dat lijkt me wat moeilijker om te maken.

By Tweakers user WeeJeWel, Monday 28 May 2012 12:06

Waarom niet gewoon een blokje die je een beetje kantelt dmv transform? Heb je in ieder geval wl AA-lijnen :)

By Tweakers user kmsch, Monday 28 May 2012 12:49

I'm afraid I'll have to point out that you made a tiny spelling mistake, which is or course balanced by the eminence of your blogpost. I'll quote it for you.. "But time goes one, and what used to be hot (almost) six years ago is a commodity now."
The mistake, of course, is in the one, which should be on. Oh, and you wrote an excellent blogpost, that should be mentioned too.

By Tweakers user phex, Monday 28 May 2012 13:37

As suggested by WeeJeWel;
In the :before and :after pseudo selectors add this for chrome:

-webkit-transform:rotate(0.01deg);

The rotation is so small you don't really notice it while it gives smooth borders.

http://jsfiddle.net/HRZB3/

[Comment edited on Monday 28 May 2012 13:52]


By Tweakers user kipusoep, Monday 28 May 2012 15:17

phex wrote on Monday 28 May 2012 @ 13:37:
As suggested by WeeJeWel;
In the :before and :after pseudo selectors add this for chrome:

-webkit-transform:rotate(0.01deg);

The rotation is so small you don't really notice it while it gives smooth borders.

http://jsfiddle.net/HRZB3/
Dat ziet er inderdaad beter uit

By Tweakers user Modularized, Monday 28 May 2012 15:38

koeny 3 wrote on Monday 28 May 2012 @ 12:49:
I'm afraid I'll have to point out that you made a tiny spelling mistake, which is or course balanced by the eminence of your blogpost. I'll quote it for you.. "But time goes one, and what used to be hot (almost) six years ago is a commodity now."
The mistake, of course, is in the one, which should be on. Oh, and you wrote an excellent blogpost, that should be mentioned too.
or course

By Tweakers user JoWannes, Monday 28 May 2012 16:29

Mooie blogpost, dat zeker. Je achtergrond ziet er helemaal niet uit, maar dat weet je allicht zelf ook. :+ Wel bedankt voor de linkjes. :)

[Comment edited on Monday 28 May 2012 16:29]


By Jan, Monday 28 May 2012 18:40

There is a new layout for Tweakers.net coming? :)

By Tweakers user Jaap-Jan, Monday 28 May 2012 19:36

Jan wrote on Monday 28 May 2012 @ 18:40:
There is a new layout for Tweakers.net coming? :)
You obviously don't read the development-round-ups on tweakers.net. ;)

By Tweakers user SlickRik, Tuesday 29 May 2012 14:35

Als ik met mijn ogen van links naar rechts beweeg (als in lezen) dan wissel ik van oog dat de achtergrond ziet. Bij het wisselen gaat de achtergrond knipperen (iets donker, iets lichter). Naar mijn smaak is de achtergrond teveel aanwezig/ te schreeuwerig.

By Jan, Wednesday 30 May 2012 18:38

Jaap-Jan wrote on Monday 28 May 2012 @ 19:36:
[...]
You obviously don't read the development-round-ups on tweakers.net. ;)
I used to. :+

Comments are closed