CSS hamburger for #codevember today. Now I’m hungry…too bad Mama’s isn’t open. That place is great.
In addition to #codevember, there’s another challenge going around CodePen called Ten Lines. You get 10 lines of HTML that you can’t change, and you can only use 10 lines (styles) of CSS to style them. This is what I came up with after playing around a little bit. Enjoy!
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!
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!
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.*
*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.
When I was working for BPS, I had to redesign the footer for the website. Among my research was this interesting piece from PatternTap:
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.
Was playing around with blend modes and linear gradients when I ended up with this. I was trying to make a different kind of background entirely, but it’s still kind of neat. Change the colors and sizes to your heart’s content.
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!