CSS3 Marquee

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.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.