abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-03 07:08:01 +00:00
Code Issues Projects Releases Wiki Activity

Add Define HSL Colors With Alpha Values as a CSS til

Browse Source
This commit is contained in:
jbranchaud
2021-03-20 18:03:53 -05:00
parent 0c41e46b58
commit 56b713ce02
2 changed files with 45 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
_1091 TILs and counting..._ _1092 TILs and counting..._
--- ---
@@ -125,6 +125,7 @@ _1091 TILs and counting..._
- [Conditional Styling For Unsupported CSS Features](css/conditional-styling-for-unsupported-css-features.md) - [Conditional Styling For Unsupported CSS Features](css/conditional-styling-for-unsupported-css-features.md)
- [Create A Pulsing Background With CSS Animation](css/create-a-pulsing-background-with-css-animation.md) - [Create A Pulsing Background With CSS Animation](css/create-a-pulsing-background-with-css-animation.md)
- [Define CSS Custom Properties With CSS Variables](css/define-css-custom-properties-with-scss-variables.md) - [Define CSS Custom Properties With CSS Variables](css/define-css-custom-properties-with-scss-variables.md)
- [Define HSL Colors With Alpha Values](css/define-hsl-colors-with-alpha-values.md)
- [Display Responsive iframe Maintaining Aspect Ratio](css/display-responsive-iframe-maintaining-aspect-ratio.md) - [Display Responsive iframe Maintaining Aspect Ratio](css/display-responsive-iframe-maintaining-aspect-ratio.md)
- [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md) - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
- [Give Elements The Same Width With Flexbox](css/give-elements-the-same-width-with-flexbox.md) - [Give Elements The Same Width With Flexbox](css/give-elements-the-same-width-with-flexbox.md)

43
css/define-hsl-colors-with-alpha-values.md Normal file
View File

@@ -0,0 +1,43 @@
# Define HSL Colors With Alpha Values
HSL is a more intuitive option for defining colors in CSS.
It is an acronym which stands for Hue, Saturation, and Lightness which are the
three components of an HSL value. It is also possible to include a fourth
value: Alpha for the amount of transparency of the color.
The modern syntax allows you to use `hsl` with or without an alpha value, and
no need to use comma separators. If the alpha value is included, it must be
separated from the other three values with a forward slash.
```css
.modern-hsl {
background-color: hsl(340deg 100% 50%);
}
.modern-hsla {
background-color: hsl(340deg 100% 50% / 0.75);
}
```
If you need IE-support, then you'll have to use the older syntax. This version
of `hsl` requires comma separators, and to apply an alpha value you have to
switch to `hsla`.
```css
.old-hsl {
background-color: hsl(340deg, 100%, 50%);
}
.old-hsla {
background-color: hsla(340deg, 100%, 50%, 0.75);
}
```
You can see it in action and play around with the value in this [live
example](https://codepen.io/jbranchaud/pen/gOLVzjx?editors=1100).
See [Can I Use? on HSL](https://caniuse.com/?search=hsl) for more details on
browser support.
h/t to [Josh Comeau](https://twitter.com/JoshWComeau) and his excellent [CSS
for JS Developers course](https://css-for-js.dev/)