Websites

Light Image Opacity on Hover: CSS Transitions

Occasionally, you want to create an image effect where the default state of an image is a little darker. Then, when a larger-screen user hovers over the image, it brightens to encourage interaction. With this … Read on

Line Animation: CSS Animations

I’ve written a simple, but fun animation that creates a Knight-Rider ‘esk left-to-right continuous CSS animation. The keyframes rule is required for animations of this type (different from CSS transitions). Once you name an animation, … Read on

Pulsating Animation with Pseudo Classes: CSS Animations FTW

Here are a couple CSS animations working together and with pseudo selectors too, for a combined effect. It’s worth noting that CSS animations have pulse as a potential key-value pairing. Additionally, here, the use of … Read on

Fade In Page Elements: CSS Animations & Transitions

You’ve no doubt seen a website that has subtle fade in animations. These are usually opacity-related animations where images or text appear to ‘fade’ into view over a half to full seconds’ time. These animations … Read on

Flex & CSS Grid, Layout Properties: Web Dev WorkShop

As of early 2018, CSS Grid is a relatively new approach to layout. Flex or flexbox has been a layout option for a couple of years now, though past approaches such as floats still also … Read on