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!
Top comments (22)
Cool. Now make it accessible.
Ouch! 😅
We could make it more accessible but we'd need to add a
role="image"and anaria-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 (replacebodywith.typewriterin the CSS)... More tips for making CSS art more accessible 😊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?Good point. I would need to test, but it probably would be better to move it to a different element altogether.
I tested having
aria-labelandrole="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.I'll be talking about this topic on the Hamburg HTML Meetup on Tuesday at 7PM CET:
Zoom meeting coming soon 🙂
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
contentproperty as it now accepts alt text! It has 70% support already (although screen readers haven't caught up yet!)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 🤣
I need to read about this
It's a typewriter. You can't get even install a screen reader on a typewriter.
Pretty sure these days you could install a screen reader on a mid-priced shower-head xD
Now, the real fun starts. Get ready for my next attack!
I never though I'd say this, but I'm enjoying the war!
Join us! Come to the dark side... we have (CSS) cookies 😉🍪
Hmm, cookies... really tempting... But I think I'll stick to the "Swiss" cheese for this war and maybe join in the next one 😜
@afif @inhuofficial do we have a topic for next time? Swiss cheese?
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
It's so cute! I like it so much. Thanks to share with us.
Thanks 😊
Dahm that's cool!
You are speaking in Berlin so must be German. Judging by this design you never used a typewriter...
What a cute little typewriter !