The CSS ‘Scrabble’ writer — The next gen typewriter

This content originally appeared on DEV Community and was authored by Temani Afif

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:

Typewriter Effect with CSS

Alvaro Montoro ・ Aug 27 ・ 3 min read

#css #html

I replied with my "simple-code" implementation

A scalable CSS only Typewriter Effect

Temani Afif ・ Aug 28 ・ 4 min read

#css #html #webdev #beginners

He strike back with a cartoon 0-element version

Animated no-element typewriter

Alvaro Montoro ・ Aug 29 ・ 1 min read

#css #html #webdev #art

Another warrior (@auroratide ) is trying to defeat us with an SVG version!

A Typewriter, but with no HTML, CSS, or JS?!

Timothy Foster ・ Aug 29 ・ 2 min read

#codepen #svg #html

But, I am here with my secret weapon: the Scrabble writer!

This content originally appeared on DEV Community and was authored by Temani Afif

Print Share Comment Cite Upload Translate Updates

APA

Temani Afif | Sciencx (2021-08-29T20:42:29+00:00) The CSS ‘Scrabble’ writer — The next gen typewriter. Retrieved from https://www.scien.cx/2021/08/29/the-css-scrabble-writer-the-next-gen-typewriter/

MLA

" » The CSS ‘Scrabble’ writer — The next gen typewriter." Temani Afif | Sciencx - Sunday August 29, 2021, https://www.scien.cx/2021/08/29/the-css-scrabble-writer-the-next-gen-typewriter/

HARVARD

Temani Afif | Sciencx Sunday August 29, 2021 » The CSS ‘Scrabble’ writer — The next gen typewriter., viewed ,<https://www.scien.cx/2021/08/29/the-css-scrabble-writer-the-next-gen-typewriter/>

VANCOUVER

Temani Afif | Sciencx - » The CSS ‘Scrabble’ writer — The next gen typewriter. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/29/the-css-scrabble-writer-the-next-gen-typewriter/

CHICAGO

" » The CSS ‘Scrabble’ writer — The next gen typewriter." Temani Afif | Sciencx - Accessed . https://www.scien.cx/2021/08/29/the-css-scrabble-writer-the-next-gen-typewriter/

IEEE

" » The CSS ‘Scrabble’ writer — The next gen typewriter." Temani Afif | Sciencx [Online]. Available: https://www.scien.cx/2021/08/29/the-css-scrabble-writer-the-next-gen-typewriter/. [Accessed: ]

rf:citation

» The CSS ‘Scrabble’ writer — The next gen typewriter | Temani Afif | Sciencx | https://www.scien.cx/2021/08/29/the-css-scrabble-writer-the-next-gen-typewriter/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.