Skip to content

Latest commit

 

History

History
136 lines (106 loc) · 3.76 KB

color-and-background.md

File metadata and controls

136 lines (106 loc) · 3.76 KB

⚑ Color and Background

These properties can apply the colors to the elements.

There are 3 popular color models used in CSS. That are RGB, HSL, HEX.

☴ Overview:

  1. Color models
  2. Color Opacity
  3. Background color
  4. Background images
  5. Background positioning
  6. Background repetition
  7. Background attachment
  8. Gradient Text

✦ Color models:

  • RGB (Red Green Blue) Color Model:

    • It represents colors by combining varying intensities of red, green, and blue colors.
    • Syntax: rgb(red, green, blue)
    color: rgb(255, 0, 0); // Red

  • HSL (Hue Saturation Lightness) Color Model:

    • It represents colors using hue (color), saturation (intensity), and lightness (brightness).
    • Syntax: hsl(hue, saturation%, lightness%)
    color: hsl(0, 100%, 50%); // Red

  • Hexadecimal (HEX) Color Model:

    • It represents colors using a six-character hexadecimal code (e.g., #RRGGBB) or in the 3 character short-code.
    • Syntax: #RRGGBB or #RGB
    color: #ff0000; // Red

✦ Color Opacity:

  • RGBA (Red Green Blue Alpha) Color Model:

    • It represents colors by combining varying intensities of red, green, and blue colors with alpha transparency for opacity of the color value.
    • Alpha value ranges from 0 - no opacity to 1 - full opacity.
    • Syntax: rgb(red, green, blue, alpha)
    color: rgba(255, 0, 0, 1); // Red

  • HSLA (Hue Saturation Lightness Alpha) Color Model:

    • It represents colors using hue (color), saturation (intensity), and lightness (brightness) with alpha transparency for opacity of the color value.
    • Alpha value ranges from 0 - no opacity to 1 - full opacity..
    • Syntax: hsla(hue, saturation%, lightness%, alpha)
    color: hsla(0, 100%, 50%, 1); // Red

  • Hexadecimal (HEX) Color Model:

    • It represents colors using a six-character hexadecimal code (e.g., #RRGGBB) or in the 3 character short-code with alpha transparency for opacity of the color value.
    • Alpha value ranges from 0 - no opacity to f - full opacity for short-code or 00 to ff for six-character hexadecimal code.
    • Syntax: #RRGGBBAA or #RGBA
    color: #ff0000ff; // Red

✦ Background color:

It sets the background color of an element.

Syntax: background-color: value;

div {
  background-color: #f0f0f0;
}

✦ Background images:

It adds an image to the background of an element.

Syntax: background-image: url(url);

body {
  background-image: url("image.jpg");
}

✦ Background positioning:

It specifies the position of a background image within an element

Syntax: background-position: value; or background-position: x-position y-position;

div {
  background-position: center;
}

✦ Background repetition:

It controls how a background image is repeated

Syntax: background-repeat: value;

div {
  background-repeat: no-repeat;
}

✦ Background attachment:

It determines whether a background image scrolls with the content or remains fixed.

Syntax: background-attachment: value;

body {
  background-attachment: fixed;
}

✦ Gradient Text:

The linear gradient property does not work with text. But it can be done with background-clipproperty.

h1 {
  background: linear-gradient(to right, red, blue);
  background-clip: text;
  color: transparent;
}

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page