Román Cortés

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:

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.

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.


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.

Collaboration with Stu Nicholls / CSSplay

9 de Febrero del 2010

I’ve done a collaboration with Stu Nicholls for an infinite zoom effect with CSS3. I’m happy and glad of have had the oportunity of collaborating with him - he is not only the king of CSS but a really nice person. I hope this is not the last collaboration I do with him.

 Take a look of it here.

Collaboration with Ajaxian

8 de Febrero del 2010

After talking to Dion Almaer and solving problems with him and Ajaxian, now I feel in friendship with them, and to show it we have done a little collaboration were I’ve done 5 new CSS displacement map effects.

 Take a look of these here!