Recent

• Injecting Line Breaks

  I like this method of providing visually impactful breaks, especially in titling. By using this method everything still reads as one line for screen readers, but breaks visually for the sighted.

• Character Animation

  It can be easy to underestimate what a program or site is capable of, but as this article on various types of character animations shows, there are all sorts of ways to up your game! Animations can be as simple as using a png image and CSS animation, or using Skeletal Animation, as this post details. I’m not quite there yet, but I am actively looking for a 30-100 day CSS code challenge so I can learn and practice CSS images and animations.

• Floating Labels with CSS

  I was looking up options on how to better align input labels and I came across this article. Making the label appear as a placeholder, then having it move out of the way when the user clicks on the field seems like a fun alternative to the usual styling.

• Little UI Details

  I am so glad this post was shared with me today. As someone without a design background it can sometimes be hard for me to pinpoint why something looks good. This really broke down usable design into bite-sized pieces. You’ll probably see a few of these techniques show up on this site soon!

• Hover Effects With CSS Variables

  Although this effect is a little gaudy for my taste, this is a really fun look at using JavaScript and CSS variables to add some user delight to a simple button interaction.