R
Román Cortés
romancortes.com · Personal blog · on HN since 2008
Román Cortés, a Spanish developer, writes up his JS1k demos and pure CSS art, including 3D effects, a Homer Simpson and a 1kb Christmas tree.
What HN saysCommenters call his work amazing and link his explanations of the JS1k entries, though one notes his CSS tricks date back years.
37HN people shared it
19linked it in comments
24stories submitted
1.0Kstory points
2 years agolast shared
2008people per year2026
Most-shared posts
- 1Román Cortés » How I did the 1kb Christmas Tree6 people · 17 points · first shared 2010 · 2 comments on HN
- 2Pure CSS 3D effect4 people · 102 points · first shared 2009 · 27 comments on HN
- 33D Meninas explained4 people · 6 points · first shared 2010 · discussion on HN
- 4Furbee - My Js1k Spring ‘13 entry4 people · 3 points · first shared 2013 · discussion on HN
- 5Pure CSS new 3D effect3 people · 253 points · first shared 2010 · 28 comments on HN
- 6The Making of Nefertiti 1kb (2018)3 people · 200 points · first shared 2018 · 20 comments on HN
- 7Homer Simpson 100% in CSS :)3 people · 23 points · first shared 2008 · 6 comments on HN
- 8Meninas3 people · first shared 2009
- 91k Rose - How a 3D Rose was made in under 1K of javascript2 people · 322 points · first shared 2012 · 38 comments on HN
- 10The Lack of Netiquette1 people · 76 points · first shared 2010 · 19 comments on HN
- 11Pure CSS3 iBooks-like Page Flip effect1 people · 5 points · first shared 2010 · discussion on HN
- 12Pacman in HTMTL51 people · 4 points · first shared 2011 · 3 comments on HN
- 13Dancing typography – Pretty cool1 people · 2 points · first shared 2014 · discussion on HN
- 14Relighting Photography1 people · 2 points · first shared 2010 · discussion on HN
- 15Tweet-sized JS IQ test solver1 people · 2 points · first shared 2011 · discussion on HN
What HN people wrote when they linked it
rayshan · 2019-01-10
I worked with Javier (hi! ) at Montage Studio where we built a web app framework and an IDE inspired by the Apple development stack. Javier is an amazing mind and a wizard at CSS. Fun fact: he used to sketch out code in good 'ol Notepad! Here are a few more js1k entries by him:
http://www.romancortes.com/blog/furbee-my-js1k-spring-13-entry/
https://js1k.com/2012-love/demo/1100
https://js1k.com/2010-xmas/demo/856
ricardobeat · 2013-05-05
This is amazing.
Roman Cortes has also posted an explanation for his 3D + fur entry: http://www.romancortes.com/blog/furbee-my-js1k-spring-13-entry/
jurjenh · 2010-03-01
I just followed some of the links and came across a very interesting effect, much in line with the theme of the "broken web"...
if you follow the homer simpson link you end up on the blog of Roman Cortes, which happens to be in spanish. Chrome helpfully offers to translate the page into english for me (and does a reasonable job too), which is great, but destroys the CSS effect, and you get a somewhat different homer than everyone's used to...
http://www.romancortes.com/blog/homer-css/
leeoniya · 2024-12-25
pete_b · 2013-06-01
As others have pointed out, well crafted or not, it doesn't add anything new to what people know can be done with CSS if you hack it hard enough; 5 years ago someone made a Homer Simpson in pure CSS (before border-radius) and it worked in IE 5.5:
http://www.romancortes.com/blog/homer-css/
If you think SVG is a craftless 'just export it' type of technology then you're not really getting it - it's xml - human readable and editable.
You get a lot more out of it if you know how to read the source, add/remove/alter the elements by hand if needs be. So plenty of valuable skills to develop, things to learn and opportuties for push yourself without resorting to yet another demonstration of how it's possible to simulate vector illustration if you apply copious amounts of divs and CSS.
dbloom · 2013-03-27
Writeup from the demo's creator:
http://www.romancortes.com/blog/furbee-my-js1k-spring-13-entry/
rplnt · 2012-02-06
I remember this site because of another 1k js competition, result of which was a Christmas Tree -- http://www.romancortes.com/blog/how-i-did-the-1kb-christmas-tree/
middus · 2011-01-05
wget http://webdesignledger.com/tips/web-design-trends-in-2011
They "iframed" http://www.romancortes.com/ficheros/meninas.html and Roman fooled them (see 4. Happy Hotlinking).
morganpyne · 2011-01-04
I was trying to remember when I first came across attempts at pure-css 3d stuff, and remembered seeing a rotating coke can and a 3d renaissance painting quite a while ago. (I could have sworn it was a year or two but the dates on the articles don't agree with that)
Anyway, here are two interesting css only 3d effects from Román Cortés:
http://www.romancortes.com/blog/pure-css-coke-can/
http://www.romancortes.com/blog/css-3d-meninas/
These are the first ones I remember seeing - anybody know of anything earlier?
antimatter15 · 2010-12-23
The author's explanation on how it was done: http://www.romancortes.com/blog/how-i-did-the-1kb-christmas-tree/
clyfe · 2010-12-17
Kilimanjaro · 2010-09-26
Kudos to Roman Cortes for his ingenious work that I believe inspired this and many other works.
http://www.romancortes.com/blog/css-3d-meninas/
http://www.romancortes.com/blog/3d-meninas-explained/
coderdude · 2010-01-26
The other examples on his blog are even cooler... check this out. http://www.romancortes.com/blog/css-3d-meninas/
ableal · 2010-01-26
And that one points to an explanation of the method, with diagrams and the partial pictures used:
http://www.romancortes.com/blog/3d-meninas-explained/
faramarz · 2010-01-26
Very cool. My question is.. how did he scan the coke-can? http://www.romancortes.com/ficheros/coke-label.jpg
ajross · 2010-01-26
No scripting. Here's a direct link to the effect page:
http://www.romancortes.com/ficheros/css-coke.html
Looks like it's just slicing up a wraparound texture vertically -- no scaling, just subsampling. The can and highlight are just composited on top. Slick and clever.
Note that it's really not "3D" in a meaningful sense. It's doing pixel-aligned warping only, and is hard-coded to a cylinder (any "lathe" shape would also work). This is the same trick that the Amiga used for the bouncing ball in 1985.
diN0bot · 2009-12-14
a little while back, possibly through hn, i found an artist who took 2 or 3 still photos simultaneously from different perspectives. kind of like a...dang, i'm failing at google and wikipedia today....you know the camera with two lenses that provides a 3d effect, only that requires looking at each image separately with each eye.
the artist in this case turns the two images into an animated gif.
spooky cool effect. i'm trying harder to find the link.....(eit)
still can't find it!!!
a much cooler post by the OP
http://www.romancortes.com/ficheros/starry.html
scorxn · 2009-12-14
nathanwdavis · 2009-12-14
I've seen this effect used litely on other sites before to create the perception of depth in a background, but still 2D. This is the first I've seen the technique used to create a 3D view. Very cool!!
Check out the source ( http://www.romancortes.com/ficheros/meninas.html ) and you'll see it was no simple task.