1. Tramp – Lowell Fulson

Beautifully paced, and with some great graphic elements, our only complaint with this video is that it’s not longer.

Click here to view this gallery.

If you’re a music lover and a font fan, then a kinetic typography video beats the more traditional genres hands-down. While you’ve no doubt seen a few famous examples, we’ve gathered up some lesser-watched creations for your viewing pleasure.

Although varied in style, these videos all use kinetic typography, or “moving text,” to illustrate the lyrics of a song. We’ve been impressed with how creative people can get with such a simple concept.

SEE ALSO: 10 Stories Beautifully Told with Animated Typography

Take a look through our selection in the slide show. We know there are dozens more great examples in existence, so link us in the comments to any of your favorites we’ve not included.

More About: animation, dev and design, kinetic typography, music videos, typography, videos, YouTube

For more Dev & Design coverage:


Monday’s Google Doodle celebrates the birthday of Queen’s legendary singer Freddie Mercury, and it’s definitely one of the most interesting doodles to come out of Google‘s workshop yet.

Arguably one of the best vocalists in rock music history, Mercury was born on Sept. 5, 1946, and died on Nov. 24, 1991. He was known for his flamboyant presence on stage, amazing four-octave vocal range and an unforgettable series of hits which ranged from hard rock to power ballads to neoclassical pieces.

Monday’s Doodle is also accompanied by a blog post from Google, which was written by none other than Queen’s guitarist Brian May, who recently performed at the MTV Video Music Awards with Lady Gaga.

SEE ALSO: Top 10 Animated Google Doodles [VIDEOS] | Where Do Google Doodles Come From?

“Some people imagine Freddie as the fiery, difficult diva who required everyone around him to compromise. No. In our world, as four artists attempting to paint on the same canvas, Freddie was always the one who could find the compromise — the way to pull it through. If he found himself at odds with any one of us, he would quickly dispel the cloud with a generous gesture, a wisecrack or an impromptu present,” May wrote.


BONUS: More Google Doodles


The Christmas Google Doodle

Each package gets larger with a mouse-over, and a click on it returns search results pertinent to a specific country or the particular items featured in a scene. This one is from December 24, 2010.

Charlie Chaplin Google Doodle

The Google Doodle team stars in an homage to the silent film era’s greatest star’s 122nd birthday, April 15, 2011.

Google Logo Repelled by Cursor

This one’s done in HTML5 and was published Sept. 7, 2010. To get the full effect, here’s one you can interact with.

John Lennon Google Doodle

This Doodle commemorated John Lennon’s 70th birthday in October 2010.

Martha Graham

Debuting May 10, 2011, this Google Doodle marks dance choreographer Martha Graham’s birthday.

Robert Bunsen

Commemorated the birthday of the inventor of the Bunsen burner, German chemist Robert Bunsen on March 31, 2011.

Thomas Edison

The great inventor’s birthday was honored on February 11, 2011.

Independence Day

Marking Independence Day 2010.

Pac-Man’s 30th Anniversary

A real crowd pleaser was this playable Pac-Man game, which appeared on May 21. 2010. Here’s a playable version.

More About: animation, Freddie Mercury, Google, google doodle, queen

537-link-glow

In my previous CSS3 article, we created blurred text using a shadow and a transparent text color. Today, we’ll use a similar technique to create animated glowing links.

Text-shadow is a versatile CSS3 property which is supported in all browsers without vendor prefixes. Except one. Sorry IE9 users — you’ll need to wait a few more months for IE10. It’s not just useful for shadows, though. On a darker background, a white “shadow” appears to make the text glow:

CSS3 Glowing Text

This can be applied when the user hovers/focuses over a link. With a little CSS3 transition magic, we can create an animated glowing effect. Let’s write some code. Starting with our HTML, we’ll apply a “glow” class to a link:


<a href="#" class="glow">Glowing Link</a>

Our first CSS3 declaration defines the initial state and the vendor-prefixed transition properties. The transition starts immediately and lasts for half a second. I found “linear” timing produced the most natural effect, but you can experiment with others (ease, ease-in, ease-out, ease-in-out, cubic-bezier):


a.glow, a.glow:hover, a.glow:focus
{
	text-decoration: none;
	color: #aaf;
	text-shadow: none;
	-webkit-transition: 500ms linear 0s;
	-moz-transition: 500ms linear 0s;
	-o-transition: 500ms linear 0s;
	transition: 500ms linear 0s;
	outline: 0 none;
}

We can now define the glowing text properties. I found that a single text-shadow such as 0 0 8px #fff was a little too subtle. Two shadows produced a better result — one white and one bright yellow at slightly different offsets:


a.glow:hover, a.glow:focus
{
	color: #fff;
	text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}

View the glowing links demonstration page. The source contains all the code and I recommend you experiment with different animation and text-shadow properties.

warning: More blurry behavior in Opera

This animated effect works well in Firefox, Chrome and Safari. IE9 doesn’t support text-shadow so the effect can’t be seen. Opera supports CSS3 transitions but it only affects certain properties. Color works well, but it’s not applied to text shadows — which results in more abrupt animation. This should be fixed in a future version.

The second set of links on the demonstration page shows a back-lit effect created by changing the text color to the same as the background. However, this makes the text invisible on IE9 and below. To solve the problem, we can either use Modernizr or write our own text-shadow detection code, e.g.


if (document.createElement("detect").style.textShadow === "") {
	document.getElementsByTagName("html")[0].className += " textshadow";
}

Have fun with the technique. Please leave your comments and a URL if you create a nice effect on your site.