Archive of: html

• Styling elements in the Shadow DOM

  August 1, 2020

  Chris Coyier posted a nifty video on his YouTube channel the other day covering styling elements in the Shadow DOM using CSS custom properties. I wanted to work a bit with it so I can make use of them when I add icons to this site.

  CSS, HTML

• Audio only Video element

  July 31, 2020

  Just a quick test of placing only audio within the video element. I'm trying to figure out how many uses there may be for this approach since you can include captions or subtitles to display alongside the audio.

  CSS, HTML

• Audio Element Practice

  July 30, 2020

  I was messing around with my microphones and Sony ICD-PX333 today, and wanted to see if I could dip my toes in some audio stuff for my website. So I'm playing with the audio element today.

  CSS, HTML, audio

• Aimless Grid and Flexbox Practice

  July 29, 2020

  I was working a bit aimlessly today while trying to put something together that seemed interesting. I did not succeed, but I got some more practice in with grid and flexbox.

  CSS, HTML

• Smooth Scrolling Behavior

  July 28, 2020

  Today I'm testing out smooth scrolling. I heard about it on the most recent episode of the Smashing Podcast featuring Chris Ferdinandi.

  CSS, HTML

• Background Clip Text Round 2

  July 27, 2020

  Trying to get background-clip working with text again. Hopefully I can sort things out this time.

  CSS, HTML

• Background Clip Practice

  July 26, 2020

  Playing with and learning more about the background-clip property today. Text is a bit odd to work with within Code Editor, but I'm not sure how it looks when added to my CMS.

  CSS, HTML

• Something is better than nothing

  July 25, 2020

  Today's practice is nothing special. I just animated a shadow on a paragraph. I'm not quite burned out, but I couldn't come up with something useful to finish before the end of the day.

  CSS, HTML

• A Quick Calendar Made With CSS Grid

  July 24, 2020

  I wanted to see how quickly I could mock up a calendar using CSS grid. Using VS Code along with Emmet made it pretty easy. It's not the best layout, but I was able to put it together in about 15 minutes without too much effort. I'm looking forward to the next time I give this a shot.

  CSS, HTML

• Simulating LED Rope light with border and box shadow

  July 23, 2020

  Today I played around with the silly idea of animating a border and box shadow on a div to simulate the look of LED rope lights. A gradient on the border would probably lead to better results.

  CSS, HTML