Made some fixes to my Codevember day 28 bubbly animation. Turns out, I forgot to add vendor prefixes. WHOOPS! I also took the time to polish the animation up a bit. Thanks to Alex for the heads up! (Check out his video game studio!)

EDIT: 29 is not the same as 28. I must have some fucking number idiocy or something.

Testing is important

Posted on

Updated my Codevember day 29 entry with some changes and fixes, one of which was suggested by a viewer. Thanks @joshbivens! I didn’t test this one very thoroughly because I was trying to beat the clock.

  • use placeholder instead of value: This gives a hint to the user what they need to enter, and also disappears when the user starts entering information.
  • font-family CSS import: Hey, don’t forget to test your stuff, especially when you use web fonts. DERP!
  • change input CSS selector to :not([type="button"]): This is simpler code for this particular example, and allows the existing properties to apply to inputs that aren’t the button instead of specifying which inputs it applies to.
  • add CSS to change color of placeholder text: With changing value to placeholder, the input color no longer applies. Adding input::-webkit-input-placeholder allows us to color the text for webkit browsers. // TODO: Check this in non-webkit browsers.

Codevember day 25: responsive icon navigation

Posted on

Happy Codevember day 25! Today I have for you a little responsive icon navigation that I saw on Pattern Tap. Sadly, the original site is no longer working, but hey, the Web is nothing but fluid, right? That’s why we have responsive design!

I still want to add text next to the submenu icons like the screenshot, but I didn’t have time for it tonight.

See the Pen #codevember day 25 : responsive icon navigation by Smokie Lee (@xtoq) on CodePen.

Codevember day 21 : Star Wars IV crawl

Posted on

So I’ve been wanting to recreate the Star Wars title crawl in CSS for quite a long time now, so I finally decided to stop wanting and start getting. So here you go guys!

The text isn’t Franklin Gothic like the original crawl, and the font-size is a bit off, but hey, this is supposed to be fun and non-perfect, right? RIGHT?! Someone tell my OCD it doesn’t have to be perfect.

(Also, how the fuck did it get to be after midnight?)

See the Pen #codevember day 21 : star wars crawl by Smokie Lee (@xtoq) on CodePen.