Archive of: code

• Shape Outside Practice

  June 27, 2020

  I was about to do some more random practice, but I realized I haven't played with shape-outside in a while. I first learned about it from a talk or video by Jen Simmons. I wish I had something I could put it to use on right now. Maybe I should make something.

  CSS, HTML, code

• Random Animation and Grid Practice

  June 26, 2020

  Getting my practice in on a Friday night can be a bit tough, but I have to keep the streak going. Today's is a bit random.

  CSS, HTML, code

• CSS grid area practice

  June 24, 2020

  I never use grid-areas within my grids in CSS. Time to change that and learn how to take advantage of them.

  CSS, HTML, code

• Sakura petals falling with CSS and JS

  June 23, 2020

  I worked with my sakura petals again today. I wanted to see if I could animate the petals falling and randomize their positions to some extent. Luckily with the help of Chris Ferdinandi's concise and insightful posts on his website, I was able to add some vanilla JavaScript to help me do just that.

  CSS, SVG, HTML, JavaScript, code

• SVG and CSS Sakura

  June 22, 2020

  Today I wanted to play with using a flower petal made in SVG and see if I could reuse the original SVG multiple times throught my HTML and manipulate it with CSS. I'm glad I was able to sort out the rotation point with transform-origin. Firefox's inspector really came in handy when sorting where to place it.

  CSS, HTML, code, SVG

• Animating background-image

  June 21, 2020

  I just realized that I've never tried to animate the position of an element's background before. I've used it within media queries before, but never animated it. This could be interesting, but needs to be used subtlely.

  CSS, HTML, code

• More text on a path practice

  June 20, 2020

  For today's practice I wanted to see how much trouble it would be to make an SVG in Illustrator, export the SVG, and then add text on a path within the SVG. It was rather easy, but this was a very simple example.

  CSS, HTML, code, SVG

• Text on an SVG path

  June 19, 2020

  More SVG practice today. I've never handwritten text on a path before, so I thought I'd give it a quick try.

  CSS, HTML, SVG, code

• Handwritten SVG Practice

  June 18, 2020

  A few months back I found a copy of SVG Essentials at a used bookstore in Yokosuka. It came out in 2002, but I think I'll learn quite a bit by working my way through it.

  CSS, HTML, SVG, code

• Flexbox Practice

  June 17, 2020

  I'm doing another one of these on my phone, so this one may be more for quick reference than real practice. They can't all be perfect, but every little bit helps.

  CSS, HTML, code