I have seen loads of people say "it can't be done" and....well it can't (yet)!
However after seeing this awesome post by Alvaro Motoro on how much Jeff Bezos makes per second (and with the useful comment by Temani Afif) I realised I could fake it!
I have shamelessly stolen about 90% of the mark-up for Alvaro's post, I hope he doesn't mind!
Click on the black boxes to generate your password. Click again to start the randomiser going again to pick another password! Simple.
Note: as many of you know I advocate for accessibility, the below is not accessible, it is a silly experiment NOT to be used in the real world.
The chance of generating the same password is actually very low due to human reaction times, rendering times etc.
Obviously as I said earlier, I wouldn't recommend this for production.....it isn't actually random, it isn't accessible and you can't copy and paste the generated password.
In fact it is pretty rubbish as a password generator!
However the principle of "faking" random could be used for all sorts of things such as a random colour picker, dice etc.
Anyway, as it isn't usable in production I am not even going to explain it, just thought I would lay claim to the title of the first person to create a CSS only password generator (as I don't think anyone has done it before)!
(Ok I will explain a little).
We toggle a checkbox and use CSS to grab the checked state. When the checkbox is unchecked (we start checked) we use animation-play-state: paused; to stop all animations. When it is checked we unpause all the animations..
input:checked + label span.number::before {
animation-play-state: running;
}
As for the animations - each box is simply jumping between letters and numbers at a super fast pace, with a different timing for each box so you get the appearance of randomness.
Update
For anyone who likes CSS witch craft / voodoo here is Temani Afif)'s "single element" version (it is two elements...I have to get a dig in somewhere 🤣).
It doesn't work in anything other than Chromium based browsers (at the moment) but how can you possibly not be impressed with the creativity, I think I learned at least 5 new CSS tricks just from that fiddle alone!
I am going to say mine is better just because it uses 62 characters instead of 26...😋
Top comments (30)
@alvaromontoro your Bezos calculator made me realise this was possible, I hope you don't mind me stealing your CSS from the fiddle!
@afif once again your little tip in the comments made me realise this was possible, plus I realised I nearly killed you with the lack of CSS in my last post so I thought I better make it up to you! (don't hate my awful CSS skills...I know you could have done it in 2 lines of CSS using emojis whilst holding a candle...we aren't all CSS Gods! 🤣)
I see the CSS syndrom affected you 😋 .. pay attention you may loss you SVG skills if you continue this way 😁
A small optimization using
steps()jsfiddle.net/fvombg9y/1/by the way, Alvaro wrote an article around random numbers on CSS: css-tricks.com/are-there-random-nu...
Interesting as I was looking for ways to do random and that article never came up, I guess that is a double shout out to Alvaro then! You were bound to have seen an article on this before....but I still haven't found a password generator with it (unless you are going to disappoint me!) 🤣
Thank you for the shoutout :)
You can actually make the CSS password generator accessible by using a method similar to the article (instead of having the letters in the
::before, have them in the HTML and show/hide them). That way, users will be able to select them.But remember: the passwords generated this way are not secure. They are only pseudo-random, so the password can be guessed/cracked knowing some factors.
Yeah I did think that after Temani pointed me to your article, but I couldn’t work out a way of doing it that didn’t require 620 elements.
I hope I covered the “don’t use this in production it isn’t actually random” clearly enough in the article but that is always the danger when you put code up, people just use it without thinking!
That is really strange, I tried with steps originally and things were ending up misaligned....maybe I was a dumb ass and put the wrong number in!
My one element idea (chromium only for now) jsfiddle.net/n9vjbr20/ .. well, couldn't resist to bring my hack to this one 😜
Can't you just let me enjoy my big brain moment for a whole hour before dazzling and destroying me with some CSS voodoo!
That one fiddle probably contains about 20 things I need to learn about CSS! lol.
Well I had to put it in the actual article....insanely creative mate!
an optimized version jsfiddle.net/u5t1bqsj/2/ still with less code 😉
Even more amazing but that one seems to flicker for some reason after pausing and unpausing....I would give you tips on how to fix that obviously but I don't want to take that joy away from you 😋 haha
yes I went to fast with the math. Here is the fixed version: jsfiddle.net/u5t1bqsj/3/
Right you can stop now! 🤣 Updated article with it now it works!
Reminds me of those gifs I saw on social media where they tell you to take a screenshot of it to pick something random.
I'm curious to know if we can use keyframes on the cursor property to animate cursors.
I just look at this and ask: WHY?😂 But for real, you learn something new about the capabilities of CSS every day.
No real reason other than introducing the concept of pseudo random CSS until we finally get random as part of the spec.
There isn't any real world practical use I can actually think off where I wouldn't use JS instead!
And I was wondering about that.
btw nice profile image.
Thanks, that’s another random article I wrote about right there....I promise I do have a plan for my content writing but at the moment I am king of random lol
I think I'll stick around to see how random it gets🤣
Solo los dioses de css pueden hacer experimentos a capricho. Yo he aguardado esta publicación solo para jugar con mis tonterías, experimentar y aprender. Lo que es basura para algunos para mí es algo valioso. Saludos y gracias por compartir.
Att: aprendis de CSS. 🧸
This is fun! Even if it's not accessible, it's important to do stuff just for fun. I hadn't seen the Bezos calculator, that is just scary :-o
Yeah tell me about it! 38 seconds for an aston martin, I would have to work 38 years to get that 🤣🤣
amazing!
amazing!
My mind = blown 💥
That’s how feel every time I see something by Temani! Makes me realise how much I have left to learn (and doesn’t help my imposter syndrome lol)
I am keeping this, thanks!
All yours, I hope you find a way to make use of the principle (please don’t use it as it is though 🤣🤣)