DEV Community

Cover image for Animated no-element typewriter
Alvaro Montoro
Alvaro Montoro

Posted on • Updated on

Animated no-element typewriter

After sharing a typewriter effect with CSS, @afif beat the drums of "CSS War" and created a different solution, and @inhuofficial hopped in and is preparing a "type-righter"... Here's another entry: an animated no-element cartoon of a typewriter.

And the demo on CodePen (click the "re-run" button at the bottom right corner to see the animation again):

There is no HTML tab because there's no HTML code on this pen. The trick? CodePen adds a basic HTML structure, including the <body> tag so that we can add styles via CSS to the body, and it will look like there aren't any HTML elements, but there are some... they are just hiding!

Latest comments (22)

Collapse
 
posandu profile image
Posandu

What a cute little typewriter !

Collapse
 
dannyengelman profile image
Danny Engelman

You are speaking in Berlin so must be German. Judging by this design you never used a typewriter...

Collapse
 
coeneivan profile image
Ivan Coene

Dahm that's cool!

Collapse
 
mayannaoliveira profile image
Mayanna Oliveira

It's so cute! I like it so much. Thanks to share with us.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks 😊

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Cool. Now make it accessible.

Collapse
 
cgousley profile image
Clayton G. Ousley

It's a typewriter. You can't get even install a screen reader on a typewriter.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Pretty sure these days you could install a screen reader on a mid-priced shower-head xD

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

Ouch! 😅

We could make it more accessible but we'd need to add a role="image" and an aria-label="animated cartoon of a typewriter typing 'Hello!'" to the body... All this would be easier to do if we moved this to a component (replace body with .typewriter in the CSS)... More tips for making CSS art more accessible 😊

Collapse
 
grahamthedev profile image
GrahamTheDev

Can you add role="image" to the <body> element? I would imagine that isn't supported as the <body> element isn't something you can focus with a screen reader?

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

Good point. I would need to test, but it probably would be better to move it to a different element altogether.

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

I tested having aria-label and role="img" with Chromevox and VoiceOver. They both announce it as an image and read the aria-label, and VoiceOver also mentions it's empty. It doesn't look ideal anyway. Probably better to move it to an element to make it more accessible.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I'll be talking about this topic on the Hamburg HTML Meetup on Tuesday at 7PM CET:

Zoom meeting coming soon 🙂

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Technically it is, as it is purely decorative and CSS doesn't show up!

Although it would be easy to make it accessible "to standards" with the content property as it now accepts alt text! It has 70% support already (although screen readers haven't caught up yet!)

content: "" / "Typewriter typing out hello";
Enter fullscreen mode Exit fullscreen mode

And as the animation is short it doesn't need a prefers-reduced-motion.

Crap, I just said nice things / supportive thing about an enemy article again...I really need to work on this "being at war" thing 🤣

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I need to read about this

Collapse
 
afif profile image
Temani Afif

Now, the real fun starts. Get ready for my next attack!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

animated gif of a man asking to bring it

Collapse
 
nombrekeff profile image
Keff

I never though I'd say this, but I'm enjoying the war!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Join us! Come to the dark side... we have (CSS) cookies 😉🍪

Collapse
 
nombrekeff profile image
Keff

Hmm, cookies... really tempting... But I think I'll stick to the "Swiss" cheese for this war and maybe join in the next one 😜

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

@afif @inhuofficial do we have a topic for next time? Swiss cheese?

Thread Thread
 
afif profile image
Temani Afif

we don't decide about topic in advance. It won't be funny 😉 anyone can start a war at any time! We need some "random" and "unexpected" things