Archive of: March, 2021

• Playing with backdrop-filter

  March 5, 2021

  The other day I saw a nifty tool for web design, Glassmorphism CSS Generator (glassmorphism.com), via a tweet from Andy Clarke. It introduced me to the backdrop-filter property, so I thought I would take the time to use it and learn about it. I had to enable flags withing Firefox to get it to work, but it's pretty handy.

• Picture Element Practice

  March 4, 2021

  I've been wanting to get more familiar with the picture element and the srcset attribute, so I made use of a photo of this little bird I spotted on a wire outside my window today. The photo should be square if your device is in portrait orientation, and the photo should be a wide crop if your device is in landscape orientation.

• Object-fit and scaling images within an overflow container

  March 3, 2021

  I'm still not used to using object-fit, so I wanted to play around with it a bit. I made use of it in this post along with transitions to try and recreate this effect I've seen on a number of sites. I'm not sure if this cannot be done with a background image as well, but I took a shot at it using just an img and overflow:hidden set on the wrapping picture element. Something feels wrong about applying the overflow to the picture element, so I probably wouldn't use this same technique on a live site

• Simple Flexbox Header

  March 2, 2021

  I did some practice with Flexbox on Treehouse today and thought I'd try reworking the practice that I followed. I made sure to make use of the supports feature query, and I tried nested media queries this time around. It looks like they worked!

• 100 Days of Code - Week 3

  March 1, 2021

  I’ve made it through another week of the 100 Days of Code challenge. There’s nothing fancy within these posts, but I did learn a few new things related to CSS and JavaScript this week.

• Simple Button Animation Name Swap

  March 1, 2021

  I wanted to see how difficiult it might be to swap out a button's animation. Turns out it is not as difficult as I anticipated. I learned about the CSSKeyframesRule via MDN today, so I think I'll find a way to make use of it for something like this rather than the approach I took today.