Román Cortés

Relighting Sylvia

28 de Junio del 2010

Relighting Sylvia

Inspired by the research of Paul Debevec on photographic relighting, I’ve created this Flash experiment showing a real-time relighted scene of my girlfriend with her netbook. Watch it here. Please note it requires a fast computer to run at full framerate.

The scene has been captured without any special hardware, just a common reflex camera (Nikon D70) with its remote, a tripod and the netbook as the only light source. The time for shooting all the photos required for the relighting process was about 3-4 minutes, where Silvia — the Spanish for Sylvia — stayed amazingly static for the purpose.

I’ve really enjoyed the development of this experiment because it mixes the most of my hobbies: photography, art, coding, technology, and also it has been a great opportunity to involve my girlfriend in any of my experiments.

My Trip To Germany

20 de Junio del 2010

Few months ago I was invited to Merz Akademy by Olia Lialina to teach a CSS3 workshop for a week in June. I accepted, and it has been not only my first time visiting Germany but an amazing experience.

The Workshop at Merz

Classroom photo by Olia Lialina

First I have to say that Merz Akademy installations are excellent. The best place to study I’ve ever seen. During a week each semester, they invite 8 to 10 expert guests in different fields — music, film, graphic design… — to teach workshops to their students. The students are free to choose in which workshop they want to participate.

My workshop was about web coding with standars and an overview of CSS3. There were 17 students, all of them really nice people, it was a pleasure to work with them. A message to them: Hello! Come to visit me at Málaga, you have a free room here!

We spent the first two days on learning a bit of semantic html, a review of CSS1/2 positioning, CSS sprites… The next two days were spent in experimenting with CSS3 and making something artistical with it.

The last day, projection and presentation of the projects from all the workshops.

Our workshop: CSS3 Guernica by Picasso

In my opinion, one of the better ways to learn is by free playing an experimenting, so after the first days of good coding practices and real life web design examples, we started to play in an artistical and free way with CSS3 — just the same as I usually do with my blog CSS experiments. So, our project was not meant to be useful or applicable to real world web design, but an artistical experiment.

We cutted the painting Guernica in parts, one for each student, and we animated it with CSS3 transitions. You can see the result here:

http://id.merz-akademie.de/guernica/
* Note: it is for webkit browsers only, watch it from Safari or Chrome.

Visiting Smashing Magazine office

Vitaly Friedman and Román Cortés at the Smashing Magazine officeIf you are a common reader of this blog, I suppose there is no need to explain that Smashing Magazine is one of the most important web magazines on web design and development. Since it was at only 2-3 hours by car from Merz Akademy, I went to visit their office with one of the students (Hello Candogan!).

We met Vitaly Friedman, editor-in-chief of Smashing Magazine. He is a really nice person and it was a pleasure to meet him and talk to him in person.

Vitaly gave us signed copies of the Smashing Book (Vitaly, thanks again for the book!). I’ve fully read it right now, and I’ve to say that it is really a good book. If you are into web design/development and you are searching for a good book, I can’t recommend you anything better than this. It is easy to read, well designed in its content, structure and visually, and very complete. I would have like to have a book like this when I was learning web development, it took me years to achieve all the knowledge that is condensed in this single book.

Conclusion

It has been an amazing and intense trip and experience. I would like to thank everybody I’ve met and Merz Akademy for making it possible.

Dancing Typography

29 de Mayo del 2010

Dancing Typography screenshots

In this experiment/new visual effect, the letters from a lyric of a popular song – Never Gonna Give You Up — are repositioned to compose the images of its singer — Rick Astley — dancing in fluid motion. Take a look of it here.

It is an evolution of an experiment I did a month ago where text compose a static image. In this case, I modified the algorithm to achieve the smooth motion by making the  letters move the less as possible to be adapted to the next frame in the video.

As the previous experiment, this was thought to be done with Javascript/CSS, but I’ve finally had to recode it in Flash because the Javascript version was too slow rendering. This is why it is done with Arial font, so a big sorry to typography purists about it.

I’ve included an slider to morph from the lyrics to the video and two checkboxes, one for a interesting slow motion video where it is possible to see in detail how the letters move to create the different frames and a cinematic motion blur that also helps to see the motion, but that unfortunately requires a very fast computer to render at full speed. I hope you enjoy it!

Pure CSS3 Page Flip Effect

17 de Mayo del 2010

CSS3 Page Flip

By using CSS3 gradients, transitions, 2d transforms and clipping, I’ve achieved this pure CSS3 — without Javascript — page flipping effect.  By adding some Javascript it would be possible to do a full catalog viewer just like the existent ones done in Flash, but I wanted to try if it was possible to do it without Javascript… and it is!

It works in Webkit based browsers (Safari and Chrome) only. Take a look of it here.

A Tribute to The Beatles

24 de Abril del 2010

I’ve done this CSS/Javascript experiment as a tribute to The Beatles for its 50th anniversary.

Click on the lyrics!

It works on mostly all the browsers from IE5.5 and up. The best results will be shown if the system has Arial font installed on it and font-antialiasing is enabled. It will look good enough with Helvetica if Arial is not present, but probably not very good with other fonts.

Fit and Shrink Technique

11 de Abril del 2010

Here it is my latest CSS collaboration with Stu Nicholls: http://www.cssplay.co.uk/menu/fast.html

I had the idea for a pure CSS “content overflow detection” and coded it fast just to see if it would work, and it did work. So, I contacted Stu Nicholls from CSSplay to see if we could work together on an useful demo for the just discovered technique, and we have finished for the images “Fit and Shrink Technique” as Stu has finally named it. I’m always proud of collaborating with Stu, the king of CSS :)

 Tuve la idea de un “detector de overflow de contenido” en CSS puro. Es decir, algo que me permitiese realizar algún tipo de acción con CSS cuando el contenido de una página o de un div es mayor de determinadas dimensiones. Probé si mi idea podía funcionar, y lo hizo, así que contacté con Stu Nicholls para mostrárselo y ver si podíamos hacer juntos alguna demo útil con esta técnica. Lo que hemos hecho es un código que permite redimensionar una imagen de forma inteligente a unas dimensiones dadas, sólo con CSS y sin necesidad de Javascript o redimensionado vía servidor. Lo que hace es que dado un hueco con determinado alto y ancho para colocar una imagen (por ejemplo, 200×200 píxeles), si la imagen es más pequeña de dicho tamaño, se muestra centrada y si es más larga o ancha, se redimensiona manteniendo las proporciones.

 Sólo agregar que siempre es un placer y me siento honrado de poder collaborar con Stu. Él es el rey del CSS.

Scroll down CSS

5 de Abril del 2010

This is just a really simple CSS effect I’ve just done. I’m not sure if it is new or not, but it was fun to play with typography.

http://www.romancortes.com/ficheros/scroll_down.html

Esto es un efecto muy sencillito que acabo de hacer con CSS. No estoy seguro de si es algo nuevo o no (supongo que no), pero fue entretenido jugar con la tipografía.

Important notice

1 de Abril del 2010

Good Day,

With warm hearts I offer my friendship, and my greetings, and I hope this post meets you in good time. However, I am sincerely seeking your confidence in this transaction, which I propose with my free mind and as a person of integrity.

I know this post must come to you as a surprise, more so that we have not met before. I maintain the theory that business is people and contacts hence this post to you. I am particularly interested in dealing with you because I expect you to be reliable and be more helpful.

My name is Román Cortés a Spanish citizen. My uncle Mr. Román Proper was the chairman of parliament’s in Spain and the former chief whip of the ruling political party PSOE. My uncle, as a result of trust and Confidence he has mandated me that I search for a Reliable and trustworthy foreign partner, who will assist me in receiving some funds, which we have in cash Totalling USD 27.5m (Twenty-seven million five hundred thousand dollars and 3 cents) into a personal, company or any Reliable foreign bank account for safe keeping for a period of time, since our family bank accounts Within and outside the country have all been Frozen by the authorities.

However, I still want to let you know that this money is under the custody of a Private Security And Finance Company in USA. I am believing you to be a trustworthy person and will not take advantage of us when the money gets to you. The total sum will be shared as follows: for your assistance we are offering you 20%, 75% for my family, 2% will be used for the reimbursement of all the expenses we will incurr in the process of this transaction and 3% will be donation to orphanage homes and the poor.

There is no risk involved as we have put all modalities in place to see to the success of this project.

If you are interested in assisting us, urgently reply via the contact form in this page. Please endeavour to keep this Transaction confidential. I will be very glad if you can come forward to help us. I thank you in advance as I anticipate your assistance in enabling me achieve this goal.

God bless,

Román Cortés.

P.S. I’m also selling cheap Viagra if you are interest in:

Pure CSS Skull with Flames

10 de Febrero del 2010

(versión en castellano abajo)

This post is inspired by the comments on Reddit for my Pure CSS Coke Can effect:

Reddit comments

The comments of G_Morgan asking for a skull and l00pe for adding flames are just so hilarious that I decided to make it real.

This is, again, based in CSS displacement maps, and uses mainly CSS 1 and a few properties from CSS 2.1. It works on IE7, IE8, and the most of the latest browser - Chrome, Safari, Opera, Firefox.

I downloaded the voxel head medical image from the examples here a long time ago, but they have redesigned the website and I can’t find the link for the data. I also used the same data in my Flash voxel experiment. Please note that I did it as a collaboration with Mr. Doob, and it is stored in his server. Since he decided that his websites should not be shown on Internet Explorer, our common experiment is affected too, so it is not going to work on IE.

Castellano

Este post está inspirado por los comentarios que recibí en Reddit sobre mi efecto de la lata de Coca-Cola en CSS.

Varios de dichos comentarios eran humorísticos como suele ser habitual en Reddit. Dos de ellos me hicieron reir muchísimo: una persona dijo algo que se podría traducir aproximadamente como “Ahora lo que tienes que hacer es un efecto con una calavera”. Otra persona agregó: “¡No olvides las llamas!”. En ambos casos eran comentarios irónicos, pero me puse a pensar en lo divertido que sería hacerlo de verdad y… ¡aquí lo tenéis!

El efecto se basa en mapas de desplazamiento, al igual que la Coca-Cola. Es principalmente CSS 1 con alguna que otra propiedad de CSS 2 y funciona en todos los navegadores actuales.