Archive of: 2020
-
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. -
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. -
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. -
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. -
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. -
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. -
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. -
First attempt at CSS 3D Jewel Case
June 16 2020
I'd like to figure out how to create a pseudo-3D jewel case that I can manipulate with CSS animation. This is my first attempt at it, and it's not too good. Going to have to learn more and expand on it in the future. -
Multi-column Practice
June 15 2020
I'm feeling a tad burned out on doing these everyday, but I'm going to keep on practicing. Today's is just some random practice with multi-column layout. -
CSS Grid Sprite Practice
June 14 2020
When I did my Everyday Dev coding challenge I built a Mario sprite using CSS grid. I thought I'd give it another shot with Mega Man. I don't think I can finish the whole sprite, so I've just done part of his helmet. I'll call it good since I've had a bit of CSS Grid, variable and Emmett practice today. I need to figure out a much more effecient method for any future CSS-only sprites.