This is pretty neat
pure html+css! best viewed with a pixel font: Press Start 2P or VT323
gay and autistic since 1991
- they/them, he/him
- citriccenobite.ju.mp/
im grey. 32 year old funny little guy (agender) from florida. artist, graphic designer, crochet bastard, yuri warrior, frog enjoyer, bad game enthusiast, and dwarf fortress understander who drinks too much iced tea. banned from twitter for being too epic and sexy.
commissions are OPEN!
🌟🐸🌟
ko-fi (for tips and stickers)
ko-fi.com/citriccenobiteemail (for commissions and inquiries)
grey.j.aster@gmail.com
palette blog
cohost.org/paletterequestYou must log in to comment.
in reply to @kiana's post:
The Pokemon GSC-style text area is achieved by using clip-path to trim the edges of multiple divs into the right shape. If you're curious, there's a great explanation of how to achieve "pixel" corners in CSS here: https://lukeb.co.uk/blog/2022/01/17/pixelated-rounded-corners-with-css-clip-path/
Wooper is achieved using box-shadow. At first I was going to make it manually, but then I remembered I bookmarked a site that can automate the conversion process a long while back thinking it may be useful someday: https://www.pixelartcss.com/
Text animation is achieved with abuse of cohost's built-in CSS "bounce" animation. There's a handy generator by @lexi here: https://cohost.org/lexi/post/53663-finally-my-css-hacki
each pixel of the wooper is a css box-shadow element, recreating wooper's sprite from pokemon crystal. the happy wooper in the "thanks" post is an edit I did of the crystal sprite then converted to css!
Yeahhh, that's really clever!
Did you use a script or something to generate the css for this??
Idk if this is something that's been done a lot before, but this is certainly my first encounter of css box-shadow element pixel art, eheheh
Yep! Luckily I remembered someone else coded a generator a long time ago so I didn't have to. Here's a comment I made with some info on how I accomplished everything in this post! (most of my css crimes posts will have breakdowns in the comments if not in the post itself)
