Tag Archives: CSS3

CSS3 Marquees

Leave a reply

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.

Horizontal

Vertical

Of Dice, Dabblet, and CSS

2 Replies

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.