Skip to content

Commit eb7a5e5

Browse files
ajay-dhangarajay-dhangar
committed
css content on working
1 parent 0d1ed3c commit eb7a5e5

File tree

3 files changed

+289
-0
lines changed

3 files changed

+289
-0
lines changed

‎docs/css/colors/css/style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.color-box {
2+
width: 100px;
3+
height: 100px;
4+
display: inline-block;
5+
}

‎docs/css/colors/hsl.md

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
id: hsl
3+
title: HSL Color Values
4+
sidebar_label: HSL Color Values
5+
tags: [color, hsl, css color, hsl color]
6+
description: HSL color values are used to specify colors in CSS using the hue, saturation, and lightness color channels.
7+
keywords:
8+
[
9+
hsl color values,
10+
css hsl color values,
11+
css color values,
12+
hsl color,
13+
]
14+
sidebar_position: 5
15+
---
16+
17+
import './css/style.css';
18+
19+
In CSS, HSL color values are used to specify colors using the hue, saturation, and lightness color channels. HSL color values are represented by the `hsl()` function, which takes three arguments: the hue, saturation, and lightness color channels. The hue channel is represented by an angle value between 0 and 360 degrees, where 0 represents red, 120 represents green, and 240 represents blue. The saturation and lightness channels are represented by percentage values between 0% and 100%, where 0% represents no color saturation or lightness and 100% represents full color saturation or lightness.
20+
21+
<AdsComponent />
22+
23+
## Syntax
24+
25+
The syntax for HSL color values is as follows:
26+
27+
```css title="index.css"
28+
selector {
29+
color: hsl(hue, saturation, lightness);
30+
}
31+
```
32+
33+
- `selector`: The element to which the HSL color value is applied.
34+
- `color`: The CSS property used to specify the color of an element.
35+
- `hsl()`: The function used to specify HSL color values.
36+
- `hue`: The color hue (0 to 360 degrees).
37+
- `saturation`: The color saturation (0% to 100%).
38+
- `lightness`: The color lightness (0% to 100%).
39+
40+
## Example
41+
42+
In the following example, the `hsl()` function is used to specify the color of a `<div>` element using HSL color values:
43+
44+
```css title="index.css"
45+
div {
46+
color: hsl(120, 100%, 50%); /* Green color with 50% lightness */
47+
}
48+
```
49+
50+
In the HTML code below, the CSS rule will apply the green color with 50% lightness to the `<div>` element:
51+
52+
```html title="index.html"
53+
<div>This is a green div.</div>
54+
```
55+
56+
<AdsComponent />
57+
58+
:::info Additional Information
59+
60+
- HSL color values are represented by the `hsl()` function in CSS.
61+
- HSL color values are specified using the hue, saturation, and lightness color channels.
62+
- The hue channel is represented by an angle value between 0 and 360 degrees.
63+
- The saturation and lightness channels are represented by percentage values between 0% and 100%.
64+
- HSL color values provide a more intuitive way to specify colors based on their hue, saturation, and lightness.
65+
- HSL color values are often used in web design for their ease of use and readability.
66+
- HSL color values can be used in combination with other color functions and formats in CSS.
67+
- HSL color values can be used to create a wide range of colors by adjusting the hue, saturation, and lightness values.
68+
69+
:::
70+
71+
## Example with HSL Color
72+
73+
In the following example, we will create a color palette using HSL color values to generate a range of colors with varying hues, saturations, and lightness levels:
74+
75+
<Tabs>
76+
<TabItem value="HTML" label="index.html">
77+
78+
```html title="index.html"
79+
<!DOCTYPE html>
80+
<html lang="en">
81+
<head>
82+
<meta charset="UTF-8">
83+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
84+
<title>HSL Color Palette</title>
85+
<link rel="stylesheet" href="styles.css">
86+
</head>
87+
<body>
88+
<div class="color-box" style="background-color: hsl(0, 100%, 50%)"></div>
89+
<div class="color-box" style="background-color: hsl(30, 100%, 50%)"></div>
90+
<div class="color-box" style="background-color: hsl(60, 100%, 50%)"></div>
91+
<div class="color-box" style="background-color: hsl(90, 100%, 50%)"></div>
92+
<div class="color-box" style="background-color: hsl(120, 100%, 50%)"></div>
93+
<div class="color-box" style="background-color: hsl(150, 100%, 50%)"></div>
94+
<div class="color-box" style="background-color: hsl(180, 100%, 50%)"></div>
95+
<div class="color-box" style="background-color: hsl(210, 100%, 50%)"></div>
96+
<div class="color-box" style="background-color: hsl(240, 100%, 50%)"></div>
97+
<div class="color-box" style="background-color: hsl(270, 100%, 50%)"></div>
98+
<div class="color-box" style="background-color: hsl(300, 100%, 50%)"></div>
99+
<div class="color-box" style="background-color: hsl(330, 100%, 50%)"></div>
100+
</body>
101+
</html>
102+
```
103+
104+
</TabItem>
105+
<TabItem value="CSS" label="styles.css">
106+
107+
```css title="styles.css"
108+
.color-box {
109+
width: 100px;
110+
height: 100px;
111+
display: inline-block;
112+
}
113+
```
114+
115+
</TabItem>
116+
</Tabs>
117+
118+
Now, you can see the output of the above code in the Browser Window like this:
119+
120+
<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#f9f9f9", color: "#000" }}>
121+
<div>
122+
<div className="color-box" style={{backgroundColor: "hsl(0, 100%, 50%)"}}></div>
123+
<div className="color-box" style={{backgroundColor: "hsl(30, 100%, 50%)"}}></div>
124+
<div className="color-box" style={{backgroundColor: "hsl(60, 100%, 50%)"}}></div>
125+
<div className="color-box" style={{backgroundColor: "hsl(90, 100%, 50%)"}}></div>
126+
<div className="color-box" style={{backgroundColor: "hsl(120, 100%, 50%)"}}></div>
127+
<div className="color-box" style={{backgroundColor: "hsl(150, 100%, 50%)"}}></div>
128+
<div className="color-box" style={{backgroundColor: "hsl(180, 100%, 50%)"}}></div>
129+
<div className="color-box" style={{backgroundColor: "hsl(210, 100%, 50%)"}}></div>
130+
<div className="color-box" style={{backgroundColor: "hsl(240, 100%, 50%)"}}></div>
131+
<div className="color-box" style={{backgroundColor: "hsl(270, 100%, 50%)"}}></div>
132+
<div className="color-box" style={{backgroundColor: "hsl(300, 100%, 50%)"}}></div>
133+
<div className="color-box" style={{backgroundColor: "hsl(330, 100%, 50%)"}}></div>
134+
</div>
135+
</BrowserWindow>
136+
137+
In the HTML code above, we have created a color palette using HSL color values to generate a range of colors with varying hues. Each `<div>` element represents a color box with a different hue value ranging from 0 to 330 degrees. The saturation and lightness values are set to 100% and 50%, respectively, to maintain consistent saturation and lightness levels across the color palette.
138+
139+
140+
## Conclusion
141+
142+
HSL color values provide a flexible and intuitive way to specify colors in CSS based on their hue, saturation, and lightness. By using HSL color values, you can create visually appealing designs with a wide range of colors and easily adjust the hue, saturation, and lightness levels to achieve the desired color effects. HSL color values are widely supported by all modern web browsers and are commonly used in web design for their ease of use and readability. By mastering HSL color values, you can enhance your web design skills and create stunning color palettes for your web projects.

‎docs/css/colors/hsla.md

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
id: hsla
3+
title: HSLA Color Values
4+
sidebar_label: HSLA Color Values
5+
tags: [color, hsla, css color, hsla color]
6+
description: HSLA color values are used to specify colors in CSS using the hue, saturation, lightness, and alpha color channels.
7+
keywords:
8+
[
9+
hsla color values,
10+
css hsla color values,
11+
css color values,
12+
hsla color,
13+
]
14+
sidebar_position: 6
15+
---
16+
17+
In CSS, HSLA color values are used to specify colors using the hue, saturation, lightness, and alpha color channels. HSLA color values are represented by the `hsla()` function, which takes four arguments: the hue, saturation, lightness, and alpha color channels. The hue channel is represented by an angle value between 0 and 360 degrees, where 0 represents red, 120 represents green, and 240 represents blue. The saturation and lightness channels are represented by percentage values between 0% and 100%, where 0% represents no color saturation or lightness and 100% represents full color saturation or lightness. The alpha channel is represented by a decimal value between 0 and 1, where 0 represents full transparency and 1 represents full opacity.
18+
19+
<AdsComponent />
20+
21+
## Syntax
22+
23+
The syntax for HSLA color values is as follows:
24+
25+
```css title="index.css"
26+
selector {
27+
color: hsla(hue, saturation, lightness, alpha);
28+
}
29+
```
30+
31+
- `selector`: The element to which the HSLA color value is applied.
32+
- `color`: The CSS property used to specify the color of an element.
33+
- `hsla()`: The function used to specify HSLA color values.
34+
- `hue`: The color hue (0 to 360 degrees).
35+
- `saturation`: The color saturation (0% to 100%).
36+
- `lightness`: The color lightness (0% to 100%).
37+
- `alpha`: The transparency of the color (0 to 1).
38+
39+
## Example
40+
41+
In the following example, the `hsla()` function is used to specify the color of a `<div>` element using HSLA color values with partial transparency:
42+
43+
```css title="index.css"
44+
div {
45+
color: hsla(240, 100%, 50%, 0.5); /* Blue color with 50% transparency */
46+
}
47+
```
48+
49+
In the HTML code below, the CSS rule will apply the blue color with 50% transparency to the `<div>` element:
50+
51+
```html title="index.html"
52+
<div>This is a partially transparent blue div.</div>
53+
```
54+
55+
By using HSLA color values, you can create visually appealing color schemes with varying levels of transparency in your web designs.
56+
57+
<AdsComponent />
58+
59+
:::info Additional Information
60+
61+
**HSLA Color Values:**
62+
63+
- HSLA color values are represented by the `hsla()` function in CSS.
64+
- HSLA color values are specified using the hue, saturation, lightness, and alpha color channels.
65+
- The hue channel is represented by an angle value between 0 and 360 degrees.
66+
- The saturation and lightness channels are represented by percentage values between 0% and 100%.
67+
- The alpha channel is represented by a decimal value between 0 and 1.
68+
69+
**Benefits of HSLA Color Values:**
70+
71+
- HSLA color values allow you to create colors with varying levels of transparency.
72+
- HSLA color values provide a flexible way to specify colors based on hue, saturation, lightness, and alpha values.
73+
- HSLA color values are useful for creating visually appealing designs with semi-transparent elements.
74+
- HSLA color values can be combined with other CSS properties to create unique color effects.
75+
- HSLA color values are well-supported in modern web browsers.
76+
77+
By using HSLA color values, you can enhance the visual appearance of your web pages and create engaging user experiences.
78+
:::
79+
80+
## Example: Using HSLA Color Values
81+
82+
In the following example, HSLA color values are used to specify the colors of different elements in a web page:
83+
84+
<Tabs>
85+
<TabItem value="HTML" label="index.html">
86+
87+
```html title="index.html"
88+
<!DOCTYPE html>
89+
<html lang="en">
90+
<head>
91+
<meta charset="UTF-8">
92+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
93+
<title>HSLA Color Values Example</title>
94+
<link rel="stylesheet" href="styles.css">
95+
</head>
96+
<body>
97+
<h1>This is a semi-transparent blue heading.</h1>
98+
<p>This is a semi-transparent green paragraph.</p>
99+
<div>This is a semi-transparent red div.</div>
100+
</body>
101+
</html>
102+
```
103+
104+
</TabItem>
105+
<TabItem value="CSS" label="styles.css">
106+
107+
```css title="styles.css"
108+
h1 {
109+
color: hsla(240, 100%, 50%, 0.5); /* Blue color with 50% transparency */
110+
}
111+
112+
p {
113+
color: hsla(120, 100%, 50%, 0.5); /* Green color with 50% transparency */
114+
}
115+
116+
div {
117+
color: hsla(0, 100%, 50%, 0.5); /* Red color with 50% transparency */
118+
}
119+
```
120+
121+
</TabItem>
122+
</Tabs>
123+
124+
Now, you can see the output of the above code in the Browser Window like this:
125+
126+
<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000" }}>
127+
<>
128+
<h1 style={{color: "hsla(240, 100%, 50%, 0.5)"}}>This is a semi-transparent blue heading.</h1>
129+
<p style={{color: "hsla(120, 100%, 50%, 0.5)"}}>This is a semi-transparent green paragraph.</p>
130+
<div style={{color: "hsla(0, 100%, 50%, 0.5)"}}>This is a semi-transparent red div.</div>
131+
</>
132+
</BrowserWindow>
133+
134+
In the example above, HSLA color values are used to specify the colors of the `<h1>`, `<p>`, and `<div>` elements with varying hues and partial transparency. By adjusting the hue, saturation, lightness, and alpha values, you can create visually appealing color combinations for different elements on your web page.
135+
136+
By using HSLA color values, you can enhance the visual appearance of your web designs and create engaging color schemes with varying levels of transparency. HSLA color values provide a flexible way to specify colors based on hue, saturation, lightness, and alpha values, allowing you to create unique color effects and visually appealing designs in your web projects.
137+
138+
If you want to learn more about CSS colors, you can check out our [CSS Colors](/docs/category/colors) guide for additional information on color models, color functions, and color formats in CSS.
139+
140+
## Conclusion
141+
142+
HSLA color values are a powerful tool in CSS that allow you to create visually appealing designs with elements that have varying levels of transparency. By using the hue, saturation, lightness, and alpha color channels, you can create colors with precise levels of transparency to achieve the desired visual effect. HSLA color values are widely supported by all modern web browsers and are commonly used in web design to create gradient backgrounds, text shadows, and other visual effects. By mastering HSLA color values, you can enhance the visual appearance of your web pages and create engaging user experiences with unique color schemes and effects.

0 commit comments

Comments
 (0)