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.

  CSS, HTML, code

• 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, HTML, code

• 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, HTML, code, 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, HTML, code

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

  CSS, HTML, code

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

  CSS, HTML, code

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

  CSS, HTML, code

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

  CSS, HTML, code

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

  CSS, HTML, code

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

  CSS, HTML, code