Gradient Backgrounds and Scaling in CSS

Gradient Backgrounds and Scaling in CSS

Subscribe to my newsletter and never miss my upcoming articles

This week, I started tackling color using HSL. These challenges weren't so bad as I went to art school for a while, so I understood the color theory aspect of these challenges already. I do feel like I will never remember all of the different ways to add color and the color codes off of the top of my head. I'm assuming that there must be a tool that developers use when choosing colors? Also, I haven't quite figured out why you would want to use one type of color selector over the other. I mean you have color names, RGB, RGB, and now HSL. Does anyone know? Am I missing something here?

The next challenge was creating a color gradient using CSS. This is a type of background that I like because I feel like it gives a webpage some depth while also being subtle (depending on the colors you choose of course). This one took a minute because it's a little different than the other selectors because there is a certain order that the information has to be into work properly (like margins). I was really excited when I passed this challenge because I finally feel like I might be able to build something pretty.


After this challenge, I learned how to make a striped background, and add a photo as a background. These were both pretty simple as they built on things I have learned before.

Then there was all about scale. I learned how to scale different elements on a page, how to scale elements when a user hovers over them, and many more items.

Learning Summary:

hsl color selector - choosing the color based on the saturation, hue, and shadow. linear-gradient -Creating a linear gradient background in any degree that I like repeating linear-gradient- creating a repeating linear background in any degree that I like along with being able to adjust the width and colors of the stripes. background: url()-I can add the photo of my choice to the background of a webpage Transform: scale()- This allows you to scale any element on a page. hover pseudo class- this allows you to change elements when a user hovers over them. Transform: skewX ()- This allows you to skew any element along the x-axis (horizontally) Transform: skewY()-This allows you to skew any element along the y-axis(vertically)

Overall, this week, I learned a lot about design and I absolutely loved it! I'll always be a designer at heart and I'm really excited about being able to make things pretty now. I'm almost done with Applied Visual Design and next, I'll be tackling Applied Accessibility.

What did you learn this week? Do you enjoy design? Let me know in the comments!

Share this