Archive of: css

• Palindrome flip

  February 12, 2021

  Happy Lunar New Year to all! Today I wanted to play with a bit of DOM manipulation and flip today's date since it is a palindrome. This was fun to make.

  100daysofcode, CSS, HTML, JS

• Quiz Prototype

  February 11, 2021

  I've been thinking about building an online vocabulary quiz for the students that my wife and I teach English to every once in a while. So I built my first prototype. This was an interesting exercise and I feel like I will be able build out a viable version with a couple of more hours of work.

  100daysofcode, CSS, HTML, JS

• Playing with clip-path and an orange cat

  February 10, 2021

  Today I wanted to work more with using SVGs within the clip-path property. I spotted this cat earlier today while out for a walk. It was a bit shy, but I got a few good pictures of it. An unfortunate thing I just learned after creating this post is the path doesn't quite fit within the current layout (as of today, 2021/2/10) of these code posts, but hopefully I can sort out a better solution in the future. I tend to build each of these posts on a single HTML page outside of CMS, and end up having to make tweaks afterwards to make things display correctly afterwards. Ah technical debt, we meet again.

  100daysofcode, CSS, HTML, SVG, clip-path

• Practice begins anew

  February 9, 2021

  I'm starting up another stretch of daily coding posts. This is post 001 of 100 posts I hope to complete. Many of them may be one-off posts, but I'm hoping to learn a lot and put what I learn to good use.

  100daysofcode, HTML, CSS

• Working with print styles in CSS

  December 18, 2020

  Today, I was working on recreating my resume in HTML form so it can be a living document that I can keep it updated and do some interesting things with it.

  CSS, print

• Testing out JavaScript image replacement

  December 2, 2020

  I've been thinking about building super lightweight pages that prompt the user to decide whether or not they want to load in images at full size and enhance the page with additional styling. So I built this proof-of-concept to figure out how I might approach it. This is pretty fresh and untested in anything other than Firefox on Windows 10.

  JavaScript, JS, CSS, HTML

• Animating grid column

  August 5, 2020

  I wanted to see if I could animate the position of grid element by creating an animation that used grid-column. It looks like you can't do that, so I'll need to figure out an alternative if I want to try that in the future. I'm not quite sure of a use case for it, but I thought it was worth giving a shot.

  CSS, HTML, animations, grid

• Filter Reference

  August 4, 2020

  I haven't messed with filters in a while, so I thought I'd take the time to put together a quick reference. It's not complete and I should do a version that incorporates images and SVG in the future. That'll be version 2.

  CSS, HTML, filters

• Playing with details and summary elements

  August 3, 2020

  After spending some time improving the display of these code doodles through the use of details and summary elements, I thought I'd spend a few extra minutes trying to see if I can animate them.

  CSS, HTML, details, summary

• Sunday Random Grid Practice

  August 2, 2020

  I could not conjure up the motivation to make anything special or slightly interesting today, but I did practice more with CSS grid.

  CSS, HTML