Do you want to add alpha transparency to an opaque hex colour with pure CSS? You can do something like:

.red-60 {
color: rgb(from #ff0000 r g b / .6);
}

This uses the rgb() function to set 60% opacity to the hex value of red.

The letters r g b (note the spaces between) are a representation of the red green and blue values of the hex colour. You can think of them as some sort of variable.

#CSS #RelativeColour #CSSTrick

Offset & blended layers effect on @codepen https://codepen.io/thebabydino/pen/rNbdJxE?editors=1100

No text duplication, no images, no effects baked into the font and no JS whatsoever.

All done with some clever #CSS and #SVG #filter magic! 🪄✨

#svgFilter #textEffect #textEffects #code #semitransparent #coding #frontend #web #dev #webDev #webDevelopment #cssTrick

Wie man eine Restaurant Karte einfach programmieren kann - Webdesign Idee

https://video.maechler.cloud/w/4wqJyZr96RgycMBJjCtkV8

Wie man eine Restaurant Karte einfach programmieren kann - Webdesign Idee

https://video.maechler.cloud/videos/watch/4ad3fcb1-1717-43a3-a5c8-6b6a6e965ea3

#tinyCSStip As I just saw this in a '24 tutorial to make an absolutely positioned pseudo extend `8px` outside its parent in all directions.

❌ DON'T 🙀
width: 100%; height: 100%;
left: 50%; top: 50%;
translate: -50% -50%;
padding: 8px

✅ DO 😼 (1 declaration, not 6)
inset: -8px

Notes:
✨ yes, there are still valid use cases for `position: absolute` pseudos instead of `grid`
✨ no, that `padding` wasn't relevant later

#css #cssTrick #cssTip #code #coding #frontend #web #webDev #dev #webDevelopment

Adapter la font-size (et plein d'autres choses) avec `clamp` en CSS, tu connaissais ?

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

#csstrick

#csstrick
color: transparent
text-shadow: 0px 0px 1px black;

To blur text. And it also selectable by drag.