Román Cortés' 3d css

HTML & CSS
1

http://www.romancortes.com/blog/
(CSS 3D Meninas, 14 Dec 2009)

Pretty neat, not that I’d say it validates (but it easily could). I almost can’t believe he wrote all that CSS by hand.

Note, I actually had to sit with my mouse over the image for a while before I saw the whole thing, so if you don’t see humans, give it a bit.

Pretty neat, does not use CSS transforms or anything goofy. This is plain-old shuffling sprites around on :hover but done in a complicated and awesome way.

Just don’t show your clients this, they’ll want you to do this with their photos lawlz.

2

Yes, it did take quite a while to load the whole lot but it is certainly interesting stuff.

3

That is quite beautiful :).

4

I agree, a lot of work went into it’s creation but it’s a very clever and beautifully presented effect. :slight_smile:

5

Looks very good :slight_smile: (but a lot of work)

Reminds me a bit of Alex’s demo where you get scrolling where you get scrolling when you open or close the window. There’s some other [URL=“http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/”]demos here.

6

Good lord, is Cameron Adams giving us the finger? : )

7

Ah, I love that! Fantastic work and definitely inspiring.

8

very very awesome, i will have to make some of my own now, i was actually planning on doing that (something similar), right after finishing the infinitely looping css perpetual wheel i was making.

9

Yuri: all I want for Christmas is a p0ny and some parent selectors.

Get on it!

BTW Cortés is the guy who did that “image” of Homer Simpson totally from abso-po’d letters, which didn’t work for me back when I first saw it because you need Verdana. Now that I have that font, it looks fantastic.

10

darn! i can’t believe i have to do all that now!
[leaves to find some pony and parent selectors]

BTW Cortés is the guy who did that “image” of Homer Simpson totally from abso-po’d letters, which didn’t work for me back when I first saw it because you need Verdana. Now that I have that font, it looks fantastic.

linky linky? xD

11

That is very impressive indeed! :slight_smile:
That CSS is mind numbing, it must have been his pet project for quite some time.

I am kinda confused though about these pixel background-position values in decimals. I didn’t think that browsers were really honoring that, I was under the impression they were rounding them out.

a#a7:hover b.d1 {
    background-position: 313px 0;
    width: 313px
}
a#a7:hover b.d2 {
    background-position: -440.7px 18px;
}
a#a7:hover b.d3 {
    background-position: -2.33333333333px -216px;
    width: 397.666666667px
}
a#a7:hover b.d4 {
    background-position: -4.66666666667px -74px;
}
a#a8:hover img {
    left: 312px
}
a#a8:hover b.d1 {
    background-position: 312px 0;
    width: 312px
}
a#a8:hover b.d2 {
    background-position: -440.8px 18px;
}
a#a8:hover b.d3 {
    background-position: -2.66666666667px -216px;
    width: 397.333333333px
}
a#a8:hover b.d4 {
    background-position: -5.33333333333px -74px;
}
a#a9:hover img {
    left: 311px
}
a#a9:hover b.d1 {
    background-position: 311px 0;
    width: 311px
}
a#a9:hover b.d2 {
    background-position: -440.9px 18px;
}
a#a9:hover b.d3 {
    background-position: -3px -216px;
    width: 397px
}
a#a9:hover b.d4 {
    background-position: -6px -74px;
}
a#a10:hover img {
    left: 310px
}
a#a10:hover b.d1 {
    background-position: 310px 0;
    width: 310px
}
a#a10:hover b.d2 {
    background-position: -441px 18px;
}
a#a10:hover b.d3 {
    background-position: -3.33333333333px -216px;
    width: 396.666666667px
}
a#a10:hover b.d4 {
    background-position: -6.66666666667px -74px;
}
a#a11:hover img {
    left: 309px
}
a#a11:hover b.d1 {
    background-position: 309px 0;
    width: 309px
}
a#a11:hover b.d2 {
    background-position: -441.1px 18px;
}
a#a11:hover b.d3 {
    background-position: -3.66666666667px -216px;
    width: 396.333333333px
}
a#a11:hover b.d4 {
    background-position: -7.33333333333px -74px;
}
a#a12:hover img {
    left: 308px
}
a#a12:hover b.d1 {
    background-position: 308px 0;
    width: 308px
}
12

I was thinking the same thing. The CSS is massive. Kudos to this
I am kinda confused though about these pixel background-position values in decimals. I didn’t think that browsers were really honoring that, I was under the impression they were rounding them out.

a#a7:hover b.d1 {
    background-position: 313px 0;
    width: 313px
}
a#a7:hover b.d2 {
    background-position: -440.7px 18px;
}
a#a7:hover b.d3 {
    background-position: -2.33333333333px -216px;
    width: 397.666666667px
}
a#a7:hover b.d4 {
    background-position: -4.66666666667px -74px;
}
a#a8:hover img {
    left: 312px
}
a#a8:hover b.d1 {
    background-position: 312px 0;
    width: 312px
}
a#a8:hover b.d2 {
    background-position: -440.8px 18px;
}
a#a8:hover b.d3 {
    background-position: -2.66666666667px -216px;
    width: 397.333333333px
}
a#a8:hover b.d4 {
    background-position: -5.33333333333px -74px;
}
a#a9:hover img {
    left: 311px
}
a#a9:hover b.d1 {
    background-position: 311px 0;
    width: 311px
}
a#a9:hover b.d2 {
    background-position: -440.9px 18px;
}
a#a9:hover b.d3 {
    background-position: -3px -216px;
    width: 397px
}
a#a9:hover b.d4 {
    background-position: -6px -74px;
}
a#a10:hover img {
    left: 310px
}
a#a10:hover b.d1 {
    background-position: 310px 0;
    width: 310px
}
a#a10:hover b.d2 {
    background-position: -441px 18px;
}
a#a10:hover b.d3 {
    background-position: -3.33333333333px -216px;
    width: 396.666666667px
}
a#a10:hover b.d4 {
    background-position: -6.66666666667px -74px;
}
a#a11:hover img {
    left: 309px
}
a#a11:hover b.d1 {
    background-position: 309px 0;
    width: 309px
}
a#a11:hover b.d2 {
    background-position: -441.1px 18px;
}
a#a11:hover b.d3 {
    background-position: -3.66666666667px -216px;
    width: 396.333333333px
}
a#a11:hover b.d4 {
    background-position: -7.33333333333px -74px;
}
a#a12:hover img {
    left: 308px
}
a#a12:hover b.d1 {
    background-position: 308px 0;
    width: 308px
}

[/QUOTE]

They do round them out Ray, there is no such thing as a half pixel, or in this case 2/3rds of a pixel :).

13

Right, that is how I have always understood it too.

So what is the point in all of these decimal values then if they are not really being honored?

I guess that would be an appropriate question for his blog.

14

Perhaps he himself doesn’t know it? Many people are under the assumption that a half pixel exists. I’ll shoot him an email or post a question on his blog about it :D. I want to hear his answer. It should be interesting either way.
PS-I can’t seem to find the link to his CSS file now? I just had it and now I can’t find it…

15

Here is the html with internal css
http://www.romancortes.com/ficheros/meninas.html

16

Maybe the dimensions were generated by a program of some sort.

It could also be that it’s making use of Geckos floating integer calculations where it seems to remember and re-distribute fractional measurements across the range rather than on a one to one basis.

If I understand correctly then that’s what’s being said here.

http://ejohn.org/blog/sub-pixel-problems-in-css/

17

http://www.romancortes.com/blog/homer-css/

My Spanish has slowly been ebbing away from me, but I’ll give it a try (tho Yuri can prolly do it better lawlz)

Since doing my design of the SigT logo in CSS two years ago, I had the idea to do more complex drawings which could use the Verdana font and absolute positioning in CSS, generating a form of vector image that could be directly embedded in the HTML code.

I opted for Homer Simpson as he is sufficiently popular and recognisable:
[homer pic here]
The result is cross-browser; it’s compatible in the following browsers under Windows:

• Internet Explorer 5.5, 6 and 7

• Opera 9

• Firefox 2

• Safari 3

(I wonder) How does this appear in other OSes and browsers?
(Note: in order to correctly see this, you need to have the Verdana font installed on your machine)

…
I’ve also seen the sub-pixel thing in Javascripts and I always wondered why they did that.

18

http://www.romancortes.com/blog/pure-css-coke-can/

LOLlerskates.

19

Holy Crap!

20

Very nice - clever use of fixed positioning :slight_smile: