CSS3 Marquee

RSS Readers, please view this one on the site itself.

Yesterday, I sent out this tweet:

<font color="#FFFF00"><marquee behavior="alternate" bgcolor="black" scrollamount="10">Sometimes I miss the olden days</marquee></font>

Rather soon I got a reply by vormplus:

@bramus we should recreate blink and marquee with css3. Add some extra magic to the web ;)

Sparked by this reply I got started …

Recreating the <blink> tag in CSS3 isn’t that hard (it has been done before). Just use an animation and change the opacity and voilà:

Recreating the <marquee> tag in CSS3 turned out to be quite a different beast though, as the first ventures using position: left and the like turned out to be a dead end. Eventually I got it working using the element CSS function as a value for the background property. This, however, only works in Firefox (as it’s the only browser supporting it).

If you’re wondering why position: left didn’t work, there’s a little FAQ contained in the embed above. Essentially I’m making good use of the fact that the units used in the background property are based on the width of the background, and not the width of the containing element.

Elsewhere , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>