Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 29, 2021 08:42 pm GMT

The CSS 'Scrabble' writer The next gen typewriter

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!

CSS scrabble writer

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!

to be continued


Original Link: https://dev.to/afif/the-css-scrabble-writer-the-next-gen-typewriter-fbi

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To