This is pretty neat
pure html+css! best viewed with a pixel font: Press Start 2P or VT323
the real deal trashbaby!
- they/she
ʕ୨•̀ᴥ•́ʔ୨ ︵ ¡ʇɐǝd - Bowling Alley Gijinka. Known jinx. Local crocodile. She likes cows for their haunting moos. Rudeboy. I do the pixel arts and adventure games 4 u
You 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)
