CSS3 Marquees

I came across an old question on Stack Overflow that I answered years ago. It was asking how to scroll text, vertically, in a marquee-like fashion. At the time, I had answered that you would need to use Flash, or JavaScript/jQuery. I thought to myself, you would most certainly need to animate the top value of a positioned element, or maybe increase a negative margin or something.

Well, we live in a very different world today. And today, we have access to @keyframes, animation, and so much more in modern browsers. This got me wondering what type of simple marquee I could whip up in an instant (wound up playing with this for a little over an hour). What I came up with is posted below.

Take some time to read through the¬†embedded¬†comments, and play with the code. If you have any questions please feel free to post them in the comments below and I’ll assist as I am able.



Of Dice, Dabblet, and CSS

I discovered dabblet.com some time back and never really spent much time there. Don’t get me wrong, it made a great first impression, however I am not super-talented in the CSS department, and it seems to be a tool for those who are.

I decided to return this evening and try my hand at creating some dice with nothing but CSS. I recently became a Potentate of the Rose, so this was a relevant and timely interest. After a couple hours of distracted back-and-forth, I finally had something pretty attractive.

While I don’t consider myself much of a CSS power-house, dabblet.com made the tedious process of building these die super-fun and very palatable. If you find yourself giving dabblet a run (and I suggest you do it), be sure to thank @leaverou for all of her hard work on such an awesome tool.

The final result can be seen here, or in the framed demo below.