Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Oh so that is why nobody actually said yes to the war, a surprise attack!
Unfortunately (for me) this was going to be my solution so I guess I better come up with something silly or clever as this basically ticks all of the sensible options!
p.s. you can't tick "accessible" without the prefers-reduced-motion Media query to switch the blink and animations off and just swap the words out!
Love it (oh crap, I can't say that in a war can I....errrmm), sorry I meant I hate it! 🤣
Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
This is going to be a very short war if you keep taking all the fun ideas! This was essentially my second entry so between you both I am now left with pure HTML and a type…righter (and that will be silly!)
A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
add vertical-align:bottom to them main span to avoid this. It's the baseline alignment that is inconsistent across browser. For the other issue, you have to rectify the height. the 1.2 I used is an approximation that you have to update based on your real font. Each browser/OS has its own default font so the result may not be the same for everyone OR set the line-height equal to height and you won't get the issue.
Oh so that is why nobody actually said yes to the war, a surprise attack!
Unfortunately (for me) this was going to be my solution so I guess I better come up with something silly or clever as this basically ticks all of the sensible options!
p.s. you can't tick "accessible" without the
prefers-reduced-motionMedia query to switch the blink and animations off and just swap the words out!Love it (oh crap, I can't say that in a war can I....errrmm), sorry I meant I hate it! 🤣
This is my secret "speed-of-light" attack. A HIT in less than 24h!
No one can beat this!
So I am thinking I am going to make this fair despite your trickery, I will start easy and do a HTML only version first! 😉
Does this count?
This is going to be a very short war if you keep taking all the fun ideas! This was essentially my second entry so between you both I am now left with pure HTML and a type…righter (and that will be silly!)
So you have ideas, the rest are excuses 😝
I know a way of doing it in pure HTML, but it requires several files. I'm curious about the type-righter 🤔
Dude that was amazing! Never saw a typewriter effect that doesn't rely on monospace fonts!
I'd add (and very clearly highlight) that to your pros list
✔️ Doesn't require monospace fonts
✔️ Can use any font
on the other hand, monospace probably looks more typewriter-like, but technically this feat is still amazing
This is amazing, great work with all the explaining demos! 👏
Thanks 😊 I am waiting to see your ideas now 😋
Did you forget to handle positioning, or is it just me:
add
vertical-align:bottomto them main span to avoid this. It's the baseline alignment that is inconsistent across browser. For the other issue, you have to rectify the height. the 1.2 I used is an approximation that you have to update based on your real font. Each browser/OS has its own default font so the result may not be the same for everyone OR set the line-height equal to height and you won't get the issue.This is exactly what I was looking for! Brilliant <3
@afif may I call first of all?
You are doing amazing things , using only CSS.
Well done please continue
don't worry, I am not planning to stop 👍
I am unable to understand what the issue is with the first letter. Can someone explain this to me?
If I wanted the text to only play once and then pause, how would I code that?