Codevember day 16: CSS Maze

Posted on

I’m going to learn an HTML preprocessor and I thought a maze might be a good thing to try to build programmatically. First though, I had to make sure I could do it in CSS and HTML without a preprocessor…

Obviously this isn’t much of a maze, but it’s a good proof of concept. I’ll probably figure out how to do an animation to auto-solve it later, but first things first!

See the Pen #codevember day 16: CSS maze by Smokie Lee (@xtoq) on CodePen.

Codevember day 14 : Fallout TV

Posted on

I made the husband a Fallout inspired map to lead him to his birthday present and I decided to try to recreate the overlay effect of a cathode ray tv in CSS. Not super thrilled with the scan animation, but since I’m still learning CSS animation I’m not too annoyed. I’m going to look into making the “gloss” look a bit more realistic, or use it again in another project and make it look more real there.

Then I got a little crazy and was like, I can make this look like a TV set too! Just thrown together mostly, I feel bad spending so much time on these little experiments when I have so little time to spare, but then again they’re great practice for front-end work and just creativity in general. Such is life. Happy Codevember!

See the Pen #codevember day 14 : Fallout TV by Smokie Lee (@xtoq) on CodePen.

Codevember day 13 : mountain header

Posted on

A little something I cooked up for #codevember today. It’s a mountain header with a serene little cloud passing by. Combination of #codevember 11 and #codevember 5. Yeah, it should be #16 but I was never very good at math.*

See the Pen #codevember day 13 : mountain header by Smokie Lee (@xtoq) on CodePen.

*Totally funny story: I had this originally listed as a combination of #12 and #5 equaling #16. I TOLD YOU I WAS BAD AT MATH.

Codevember day 11 : Mountain

Posted on

When I was working for BPS, I had to redesign the footer for the website. Among my research was this interesting piece from PatternTap:

Footer from Napkin Labs

While this was unsuitable for the type of UX we needed at BPS, I thought it would be a fun, easy Codevember project. I was right! This is also responsive, at least height-wise. I’ll probably use it for my CodePen header at some point in the future.

See the Pen #codevember day 11 : Mountain by Smokie Lee (@xtoq) on CodePen.

Codevember #4 : Fitbit moon

Posted on

I saw the moon from the sleep tracking section of the Fitbit app and I thought to myself, “Hey, that would be easy to do for Codevember!” Sure, it is easy, when you’re not distracted by homework you forgot you needed to do…so I rushed a little and didn’t clean things up the way I’d like. I also want to go back and add the stars at some point. It was still fun. Enjoy!

See the Pen codevember #5 : Fitbit Moon by Smokie Lee (@xtoq) on CodePen.