Day 9: CSS Colors

Photo by davisuko on Unsplash

Day 9: CSS Colors

Hi people. Day 9. Yesterday we started a section on complimenting CSS colors. So we continue our 10 lessons for the day.

  1. With hex colours, 00 is 0% of that colour, and FF is 100%.
  2. 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.
  3. Colour transition, or gradient, on an element. The CSS linear-gradient function lets you control the direction of the transition along a line, and which colours are used.
  4. Gradient Direction is the direction of the line used for the transition. color1 and color2 are colour arguments, which are the colours that will be used in the transition itself. These can be any type of colour, including color keywords, hex, rgb, or hsl.
  5. Color stops: Colour-stops allow you to fine-tune where colours are placed along the gradient line. They are a length unit like px or percentages that follow a colour in the linear-gradient function.
  6. Applying different shades of a color to each color argument in the linear-gradient function.
  7. Opacity: Opacity describes how opaque, or non-transparent, something is.
  8. Using the alpha channel to set the opacity of an element. To add an alpha channel to an rgb color, use the rgba function instead.
  9. To position two div elements on the same line, set their display properties to inline-block.
  10. Border shorthand property: For example, the border-left shorthand property lets you to set the left border's width, style, and color at the same time. That’s all for today. Thank you for reading. The picture for the work is below:

Day 9 pic 1.PNG

Day 9 pic 2.PNG

Day 9 pic 3.PNG