Get tired of the classic typewriter and its blinking caret? I am here to the rescue with my 'Scrabble' writer. A new and innovative way to type your text.
Impress your visitor with such unexpected animation!
See the Demo
The HTML code is pretty basic and all you have to do is to adjust a CSS variable (for the number of letters) and the font-size:
<span class="scrabble"><span>CSS</span></span>
<span class="scrabble"><span>is</span></span>
<span class="scrabble animate" style="--n:5"><span>crazy</span></span>
You can easily animate any text you want:
PS: click on the "rerun" button to see the animation again
A quick overview of the previous events:
@alvaromontoro started the war with his CSS-only typewriter:
I replied with my "simple-code" implementation
He strike back with a cartoon 0-element version
Another warrior (@auroratide) is trying to defeat us with an SVG version!
But, I am here with my secret weapon: the Scrabble writer!
Top comments (13)
The marquee is an obsolete element. Better not rely on it as it may stop working at any time.
Something really strange on this post, it kept auto reloading the page on my iPhone! Really weird...
The fiddle just doesn't load when the page stops auto refreshing?! Phone is in "low power" mode as well so possibly a CPU fault? Anyone else noticed it?
Thought it was the GIFs causing memory issue but they are small.
It would be really interesting to see what causes it (even tried changing to chrome and viewing it there, still same issue).
Anyway, aside from the random questions, love this concept!
The answer to all these questions is simple: You are getting a lot of damage from this war! Your CPU, your phone, your ship, .. everything is damaged!
🤣
Seriously though it is weird! Not had it on any other article, I wonder if there is something strange with the GIFs or something causing the page to cause an error? I might throw a couple of test articles up tomorrow before I finally write my entry for the war!
You're my favorite person on this site!
oh, the whole site! 😯 thanks 😊
Yep, I love CSS more than anything and you're a leader in creating new use cases
Yeah, I love "thinking outside of the box" and trying to figure out unexpected things 😉
sounds interesting !
Very nice!
We got overflow:
yes it's intended. It's a one line solution (I am using white-space:nowrap and keeping the default nowrap of flex-wrap)