Yesterday, I sent out this tweet:
<font color="#FFFF00"><marquee behavior="alternate" bgcolor="black" scrollamount="10">Sometimes I miss the olden days</marquee></font>
— Bramus! (@bramus) February 12, 2013
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 …
<blink> tag in CSS3 isn’t that hard (it has been done before). Just use an animation and change the
opacity and voilà:
<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.
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!
Leave a comment