Archive of: 2020

• 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

• Clip Path Practice

  July 18, 2020

  I've worked with clip-path and I'm always happy when I get to practice with it more. I often work with Bennett Feely's Clippy, CSS clip-path maker, while working with custom shapes. It's a great tool.

  CSS, HTML

• Skew Transform Practice

  July 17, 2020

  Playing around with a simple skew transform today. Not particularly difficult or deep in any way. Tonight's was a quickie.

  CSS, HTML

• Practicing with the Resize property

  July 16, 2020

  Having spent very little time working with the resize property, I thought I'd give it a try. A lot of these tend to be me just trying new things out. I think that's alright. I'll do bigger and better things at a different time.

  CSS, HTML

• Animated Border Practice

  July 15, 2020

  Worked on animating borders today. Lots more to learn about and tweak before I get something I like, but it was good practice.

  CSS, HTML

• Border Image Practice

  July 14, 2020

  Trying out image-border for the first time. I have a lot to learn about it.

  CSS, HTML