Archive of: code

• 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.

• CSS Writing Mode Practice

  June 13, 2020

  I've worked a bit with writing modes in the past, but I have trouble recalling all the various modes. I learned a little bit more today within the small amount of time I've spent on today's practice. Gotta keep at it.

• CSS Calc Function Practice

  June 12, 2020

  Practiced using the calc() function in CSS. I don't have a strong understanding of the best ways to use it at the moment, but I know a lot of the developers and designers I follow put it to good use. There's always more to do and more things to improve.

• Positioning and Video Practice

  June 11, 2020

  Today's practice was interesting. I got my first arcade cabinet in Animal Crossing New Horizons today and I thought to myself, how difficult would it be to place a video on the screen of the arcade cabinet? Turns out it was a little tricky and I'm not sure if I can distort it with just CSS to simulate the type of screen that you might see on a real arcade cabinet. It served as a good refresher on the video element and will probably only work properly if your browser supports autoplay on videos. It doesn't work on iOS Safari.

• More 3D transforms practice

  June 10, 2020

  After having some fun with the 3d transforms I did yesterday, I thought I'd try animating a button in 3d. It took a bit of time to get a decent result that I am okay with, but I want to figure out how to get the crispest image. I have much to learn and I look forward to it.

• Backface-visibility and 3D transforms practice

  June 9, 2020

  I've never used the backface-visibility property before and I've rarely done any 3d transformations as well. Today's a good day to give them a try.

• Aspect-ratio Practice

  June 8, 2020

  After listening to Jen Simmons talk to Chris Coyier and Dave Rupert about aspect-ration on ShopTalk Show episode 415, I really wanted to give it a try. It sounds great, but I sadly discovered it's mainly supported in Chrome Canary at the moment. Firefox, Chrome, and Edge currently have internal mapping of width and height.

• Pseudo-element Practice

  June 7, 2020

  Today I practiced working with the ::after, ::before, and ::first-line pseudo-elements. Gotta tackle something different everyday to help keep things fresh in my gradually degrading memory.