Román Cortés » A Tribute to The Beatles

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.

css, javascript

28 Comentarios

manuel el 24 de Abril del 2010:

Muy bueno, me gusta!! felicidades!
Matthew James Taylor el 24 de Abril del 2010:

Another classic CSS ASCII art example. Well done! :)
Mark el 24 de Abril del 2010:

Wow, you always make things look like magic in just a few lines of code, congrats!
Luis el 24 de Abril del 2010:

Román, tienes un talento impresionante. Nunca dejas de sorprenderme.
Wordpress Wiz el 24 de Abril del 2010:

Awesome! I really like that. Did you do the other guys?
Sp0nky el 25 de Abril del 2010:

Can u explain how u do it?:D i see nice work here :D i will visit soon ..good work dude ;)
Alberto Tarsicio el 26 de Abril del 2010:

Me encanta Javi!! un saludo
Goofy el 29 de Abril del 2010:

“Yesterday” - that’s McCartney’s song, not Lennon’s…
Román Cortés Builds A Tribute to The Beatles « Awesome But Useless el 2 de Mayo del 2010:

[…] plain old CSS and JavaScript Román has built a tribute to The Beatles for their 50th anniversary. I haven’t revealed the surprise in the screen shot, but if you […]
??????????? ??????? ??? ?????? CSS ? JavaScript | ??? CSS el 4 de Mayo del 2010:

[…] ???????????? ????????? ?? CSS+HTML, Roman Cortes ??????? ????????? ?? ???? ?????? ??????? ??????? ?? ????? «Yesterday» ? […]
Josué Palma Blog » Tributo a los Beatles en CSS/Javascript el 4 de Mayo del 2010:

[…] http://www.romancortes.com/blog/a-tribute-to-the-beatles/ […]
Paceaux el 11 de Mayo del 2010:

Román - ingenioso!

Por favor, ¿puede explicarnos el Javascript?

Veo que se usa el function ani() para animar las letras, pero como se cambian los coordenadas?

¡Enseñanos, por favor!
AfssX el 15 de Mayo del 2010:

Buen uso de las matemáticas, y admirable creatividad!
matejlatin el 21 de Mayo del 2010:

love The Beatles… great work :)
Sam el 22 de Mayo del 2010:

“Goofy” is correct; Yesterday was actually McCartney’s first solo hit. He wrote it and it was recorded by Paul alone, after the other Beatles had left the studio. Producer George Martin later added the strings. At the time, Lennon and McCartney were contractually required to list both names on each other’s songs, regardless how much either contributed.

None of this should detract from the fabulous work you’re doing with CSS, however. Mind-boggling what you’ve demonstrated at this site. Good work!
Román Cortés el 29 de Mayo del 2010:

[…] A Tribute to The Beatles […]
Rosa María Vélez V el 1 de Junio del 2010:

Hola,
He encontrado tu pagina y me han gustado muchos trabajos, el de tener paciencia excelente y este también.
Felicitaciones,
Rosa María
tkxuyen el 16 de Junio del 2010:

Dear Mr.

Sooo great, really love this! Can you explain a bit how you do this!? Certainly the algorithm just move the characters a bit in each frame on a pre-defined path, but how can you get the “morphing path” between the text and the final ascii-art!?

Best
TKXuyen
OMG el 17 de Junio del 2010:

OMG that’s really nicely done wow! :)
13??????html5?css3?? | ?????|woiweb|?????????? el 15 de Julio del 2010:

[…] A Tribute to the Beatles […]
O maravilhoso mundo do CSS3! | Gaiuss oBlog el 16 de Julio del 2010:

[…] http://www.romancortes.com/blog/a-tribute-to-the-beatles/ […]
?? ???? ????? 12 ??????? ??????? ?????? ????? ??? HTML 5 ?CSS 3! « ????? ???? ?????????? el 16 de Julio del 2010:

[…] 10. A Tribute to the Beatles […]
” 13??????html5?css3??– HTML5,CSS3,WEB????????? el 18 de Julio del 2010:

[…] A Tribute to the Beatles […]
13???CSS3+HTML5?????????? | Open Eye, Open Mind el 19 de Julio del 2010:

[…] A Tribute to the Beatles […]
13????HTML5?CSS3???? | Open Eye, Open Mind el 22 de Julio del 2010:

[…] A Tribute to the Beatles […]
?????? » Blog Archive » ???HTML5?CSS3???? el 24 de Julio del 2010:

[…] A Tribute to the Beatles […]
13??????html5?css3?? | ???????? el 24 de Julio del 2010:

[…] A Tribute to the Beatles […]
13??????html5?css3?? | ???? el 29 de Julio del 2010:

[…] A Tribute to the Beatles […]