Archive of: css

• 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

• Transition Practice

  June 6, 2020

  Today I'm doing some practice with transitions and link styles. Making these posts on my phone is a little tricky, but I'm glad I get the opportunity to make use of more apps.

  CSS, HTML, code

• Checked Pseudo-Class Practice

  June 5, 2020

  I don't quite think this is the best solution to hide and display things, but it's good practice for me at the moment. I need to try using this within a form too.

  CSS, HTML, code

• Attribute Value Selector Practice

  June 4, 2020

  It's been quite some time since I've used an exact attribute value selector or simple attribute selector in my CSS. I first ran across one when reviewing one of Eric Meyer's CSS resets. If I remember correctly, he made use of them to bring attention to imgs with empty alt properties.

  CSS, HTML, code

• Target Pseudo-Class Practice

  June 3, 2020

  I wanted to work some more with the :target pseudo class. I also wanted to create something with a positive message. I'm not sure how to word this well, but the situation in the US makes me really sad and upset. I want to find some ways to help. So I made this, and I'm going to do more.

  CSS, HTML, help, code