Monday, February 8th, 2010

Román Cortés and Ajaxian make up with amazing CSS demos

Category: Announcements, CSS

<p>We have been long term fans of Román and the fantastic demos and samples that he puts together, usually involving CSS goodness. We messed up the other week though when we linked to his work on a scrolling coke can. I do these postings as a labor of love, and since Ajaxian isn’t my day job, that means that the labor often happens at 2am. In this case I made the rookie mistake of grabbing an iframe to his demo so it would run inline. Román then looked up to see his servers getting pummeled and a bill is associated with that traffic. He quickly rick rolled us (thank you for not going for something much worse ;) and Christian Heilman (who is in Europe along with Román) saw it and kindly switched in an image of the code can effect.

I woke up the next morning to learn about this all and see a post that Román did talking about our hot linking. I immediately responded saying how sorry I am. I aim to highlight the great work that is done, not cause an issue.

Román is a great guy and kindly offered to collaborate and show friendship with Ajaxian (and myself) by putting together more amazing demos to share on the blog. Inline. Not hot-linking. :)

Here they are

These effects are CSS level 1 and 2.1 only. There is no javascript, css3 or whatever, just html and css.

They are all based on the CSS 2D displacement map technique that Román Cortés discovered when he created the infamous CSS Coke Can effect. Since displacement maps are very versatile, Román Cortés wanted to show us more and different applications of these.

The Ajaxian Prism

This is simple displacement map usage to distort the borders of the prism, with a transparent .png image on top to add the shadows, orange semi-transparent bg and the Ajaxian’s “a” logo. The background painting is an original artwork by Román Cortés. Move the area around to see the effect the prism has on the underlying painting.

ajaxianprism

Van Gogh’s Starry Night

Van Gogh’s Starry Night separated in 3 layers and displacement map sinusoidal distortions applied to two of them.

starrynight

Sliding and Slicing

A really simple displacement map + rearranged image makes this effect possible. Watch the window blinds do their thing as you move the scollbar.

romajaxian

The Coke Can spinning in the opposite direction of the original

There some comments in the original code can posting that the spinning direction was unnatural. So, here he did spin as the commenters wanted it. To make it possible, he had to mirror the label texture and adapt the source code.

The smashed can

By using several cylindrical displacement map layers with a growing radius and png transparent textures, it is possible to do voxel surface rotations like this one.

crashedcokecan

Thanks for Román for being so reasonable, and for creating such fun examples for us all. We hope to go deeper on the implementation of some of these examples in the future.

Posted by Dion Almaer at 6:52 am
9 Comments

++++-
4.4 rating from 44 votes

9 Comments »

Comments feed TrackBack URI

What comes next? Quake in pure CSS? Just kidding, well done Román, amazing stuff and skills.

Comment by kow — February 8, 2010

I’m gonna be digging into the source code of these because this stuff is mind-blowing! Kudos Román.

Comment by iliad — February 8, 2010

Officially impressed.

Comment by functionform — February 8, 2010

I was very impressed by the initial coke-can CSS trick. These demos are also quite impressive.

Sadly however they all seem to focus around the user scrolling a scrollbar to work.

So as awesome as they are too look at and admire the technology behind them, they don’t seem very practical :(

Comment by Sembiance — February 9, 2010

@Sembiance,

Imagine these examples as the “gracefully degraded” versions. Using these as a base you could add a smattering of javascript on top of them that would hide the scrollbars and work on mouse move or mouse drag. In particular, that beveled “a” could be applied to some sort of image magnifying glass or something, for zooming into spots of an image. And since the underlying technology is pure CSS, the basic approach would still hold water even without javascript enabled.

Brilliant stuff, two thumbs up!

Comment by starkraving — February 9, 2010

@starkraving: with clever use of :hover styles, you could probably even find a way to make a “mouse over zooms” action work without javascript.

Comment by Joeri — February 10, 2010

I also find these demos incredibly cool, but someone help me understand why they’re important? I don’t doubt they are, but its unclear to me exactly what we gain by only using CSS. Are we just demonstrating the power of CSS? Or is there more to it?

Thanks,
Josh

Comment by jestelle — February 11, 2010

Very nice demos.
Specially Sliding and Slicing that I’ve adapted for my needs on my blog, with a link to yours of course.
It works with Firefox, Chrome, Opera, Safari, IE8, even IE7, with a little change, with Windows XP Operating System.
But a friend of mine, who already got Windows 7, reports an error to me. The trouble is an horrible vertical scrolling bar breaking the demo, and appearing whatever browser you use…
Has anyone tested these demos with Windows 7?
Trouble with a .dll, an api????
Any idea?

Thanks for the answer,
Taradale

Comment by Taradale — February 23, 2010

I got an answer to my question:
In Windows 7, the scrollbar is 1px wider, and you just need to add 1px in height to make the demo working.

#ra {height: 318px;}

It’s undetectable in Windows XP

Taradale

Comment by Taradale — February 23, 2010

Leave a comment

You must be logged in to post a comment.