#csstrick — Public Fediverse posts

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

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

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

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

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

#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

RT Konstantin Denerz
Create a CSS-based holographic card ✨ using this simple trick from my @CodePen.
✅ Mask-Image 🎭
✅ Linear-Gradient 🌈
🔗 https://codepen.io/konstantindenerz/pen/XWPpvpg
Inspiration: https://twitter.com/drawsgood/status/1630570176037961733
#css #animation #csstrick #holocard https://t.co/PY95qOibLJ
<div class="rsshub-quote">
Drawsgood: Throwback Tuesday to this holographic card made in @rive_app
Check it out in the community here: https://rive.app/community/3515-7963-holo-card/ https://t.co/TbYlSjouVs
</div>
:sys_twitter: https://twitter.com/kdenerz/status/1641179695298523136