Code Archive

• 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

• Mask Image Practice Part One

  July 22, 2020

  Working with mask-image today after watching Chris Coyier's Youtube video on the subject. I ran into some very strange behavior with test code from MDN on both Chrome and Firefox on my Windows 10 PC. However, that same code worked perfectly in Safari on iPadOS 13. It was very odd and that tells I still have lots to learn. That never changes.

  CSS, HTML

• Animating an HSLa background color

  July 21, 2020

  I ran into some trouble getting an animation that used HSL for a background color to work properly. After a bit of working with it, and with the help of an HSL color picker, I was able to sort out where I was goofing up.

  CSS, HTML

• Place Items practice

  July 20, 2020

  Andy Bell shared info about the place-item property in a tweet recently. I had never heard of it, but it is quite handy and wanted to try it out. I wish I had better content within the example, but this should help me remember to use it.

  CSS, HTML

• Clip Path Animation Practice

  July 19, 2020

  Today I've made an animation using the clip-path property. It's a bit tricky to figure out how adjusting the polygon will alter the shape during the animation. I would think a tool like Sketch, Figma, of maybe Adobe XD would be able to give me a way to see how the polygon will change throughout the animation.

  CSS, HTML