Archive of: css

• Animating with audio playback

  March 11, 2021

  Today I wanted to try animating text based on the time elapsed within an audio element. I was wondering if animating a transcript for a podcast could be an entertaining way to provide a more visual presentation for readers of a podcast's transcripts. Making animation an option and not a default would be how I would approach it. Adding in some animations could help add the podcasters' personalities to the transcripts. Now I just need to figure out how to load in a transcript to help with the animation process. What I did today was far too tedious and not ideal for a 30-plus minute podcast.

  100daysofcode, CSS, HTML, audio element

• Video Graphics Done With HTML, CSS, and JavaScript

  March 10, 2021

  Today I wanted to try displaying and hiding elements placed on top of a video within a grid using JavaScript. It's a decent first attempt and it will be fun to work with in the future.

  100daysofcode, HTML, CSS

• 100 Days of Code - Week 4

  March 9, 2021

  Another week of the 100 Days of Code challenge down and many more to go. I wonder if what I’m doing is beneficial or worth sharing, but I know every bit of practice helps.

  100daysofcode, CSS, HTML

• Shifting Position Within A Grid

  March 9, 2021

  Today I wanted to see how easy would it be to move an element around on a grid using arrows keys and buttons for touchscreen devices. Turns out it is a bit trickier than I anticipated in terms of tracking the correct values, but I was able to eventually get something working with some code I put to use in my style customizer prototype. I manipulated CSS variables/custom properties to update the position of the yellow square within the grid. I wonder what I'll be able to build on top of this in the future.

  100daysofcode, CSS, HTML

• Mock Recipe Listing

  March 8, 2021

  I cannot recall every doing any sort of mockup or prototype of a recipe listing. I think it would be fun to build one that has some animated elements and helps the recipe's viewer keep track of what they have completed so far and the ingredients they need. I think I'll do more with this at a later time and hopefully put it to use on this site if I ever post some recipes.

  100daysofcode, CSS, HTML

• Making Moving Bubbles

  March 7, 2021

  Building upon what I made yesterday, I have made the bubbles animate and move upwards and hopefully outside of the viewport. I'm going to work on making the bubbles poppable in the future, but it will have to be done on a different day. I want to make the animations more dynamic as well. At the moment they're just animated via CSS and the specific animation assigned to the bubbles is based on whether they are odd or evenly numbered.

  100daysofcode, CSS, HTML

• Making Bubbles

  March 6, 2021

  I played around with randomizing the position of bubbles made from a string taken from a text input. I'll do more with this idea at a later time, but I'm happy that I have the first few steps out of the way.

  100daysofcode, CSS, HTML

• 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.

  100daysofcode, CSS, HTML

• 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.

  100daysofcode, CSS, HTML

• 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

  100daysofcode, CSS, HTML