Using a solid border for the cursor instead of having it in the text content is a nice touch; because it's separated out you could probably use another animation to get it blinking, too.
Yep, that was my thought, but there might be complications I haven't thought of. This is me guessing without having tried anything.
couldn't get it to render in a way I was happy with
I might be repeating something you already noticed, but cursors only blink after you stop typing, so if you weren't delaying the effect until after the typing was done that might have contributed.
Comments
I built this website to see what was possible with only one div, and a stylesheet.
No JS, No other HTML, just CSS.
Source: https://github.com/archiewood/pure-css-site
After examples showcased at https://a.singlediv.com/, I would not be surprised by anything...
Epic. Tho where are the next level hover states?!
http://go-here.nl/omg-tables.html
the css is js generated but doesn't need to be
That was pretty far out on mobile
:D
That's not fair, they clearly have illustration skills ;)
Wow. Thanks for sharing.
Her work is mind blowing. The dusting zone is my new favorite game
https://thedusting.zone/
Jesus this is insane
Aaah that one was great, thank you for reminding!
I see multiple <divs> in the source of that site. That's not a single div.
Each image on that page is created with just a single div.
Maybe each image; but still not a single div.
wow these are beautiful
<html> and <body> accept pseudo-elements. Why add such bloat?!
Might as well just link the hosted CSS file:
https://pure-css-site.netlify.app/index.css
This is a 404, btw. Private repo?
oops well i just saw this took off and have made it public - thanks
Cool, is the div necessary? Could you style the <link>?
Nice! I love seeing stuff like this on HN.
Using a solid border for the cursor instead of having it in the text content is a nice touch; because it's separated out you could probably use another animation to get it blinking, too.
i was kind of messing around with this blinking idea but couldn't get it to render in a way I was happy with
would you use another keyframe or did you have something else in mind
Yep, that was my thought, but there might be complications I haven't thought of. This is me guessing without having tried anything.
I might be repeating something you already noticed, but cursors only blink after you stop typing, so if you weren't delaying the effect until after the typing was done that might have contributed.
I’m getting 404. Is it because I’m not logged in?
repo was private, now public!
That link currently 404s, and doesn't seem to be listed when manually navigating up to the user repository list.
Link is broken for me (404).
I am both horrified and impressed.
I can’t see the repo, Archie
Getting a 404