Hey guys! Just when I thought CSS would be the basic emulation of adding different colours and backgrounds continuously it proved me wrong, it can do a lot more than that!
Today I completed the coloured markers challenge on freecodecamp!. The first part of the challenge was to learn how to make secondary and tertiary colours. In order to make a secondary colour we have to combine two primary colours. For example, to make a magenta colour we mix two primary colours red and blue.
The different types that I learned today of applying colour to an element with CSS were with hexadecimal or hex values.
Hex colour values start with a # character and take six characters from 0-9 and A-F. The first pair of characters represent red, the second pair represents green, and the third pair represents blue. For example, #4B5320.
With hex colours, 00 is 0% of that colour, and FF is 100%. So #00FF00 translates to 0% red, 100% green, and 0% blue, and is the same as rgb(0, 255, 0).
The HSL colour model, or hue, saturation, and lightness, is another way to represent colours.
The CSS hsl function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness.
The interesting twist here is that I learned how to add different colours to turn them into gradients! It actually reminded me of the very early days of Microsoft Word and its colour gradient features. It was cool to see how it was actually made.
The CSS linear-gradient function lets you control the direction of the transition along a line, and which colors are used. E.g linear-gradient(gradientDirection, color1, color2, ...);
After getting to grips with how to add colours and gradients to different parts of the website I jumped to learning how to add shadows. Adding a shadow makes the colours look a little more multidimensional and real.
Lastly, I had an introduction to the offsetX, offsetY and spreadradius properties.
That wraps up my third day of writing code, I am beginning to have a basic understanding of the CSS elements highlighted above and I am so excited to continue on this journey.
Top comments (0)