Mastodawn

Simplest sliced text with absolutely no duplication - not in the markup, not in any pseudos. This means it's contenteditable without requiring JS!

Live demo on @codepen: https://codepen.io/thebabydino/pen/VYKgVyK

#CSS #SVG #filter #svgFilter #code #web #dev #webDev #webDevelopment #coding #frontend #textEffect #textEffects

Show thread

Ana Tudor 🐯Feb 13

The item page has ~20 screenshots of how it works with different fonts, as well as screenshots of what it looks like when using the DevTools vision deficiency emulator. This was actually what prompted me to try to max out the selection highlight contrast by choosing the complementary.

#CSS #SVG #filter #svgFilter #frontend #textEffect #textEffects #coding #code #web #dev #webDev #webDevelopment

Ana Tudor 🐯Feb 13

I have now added another item to the shop!

Mono textured embossed + engraved text

https://ko-fi.com/s/875f207bd5

#CSS #SVG #filter #svgFilter #coding #textEffect #textEffects #text #code #frontend #heading #webDev #web

Ana Tudor 🐯Jan 27

Which do you prefer? First or second?

(it's the exact same demo, text and font, only different filters, btw)

Boosts appreciated.

#SVG #filter #svgFilter #CSS #cssFilter #textEffects #textEffect #code #coding #web #webDev #webDevelopment #dev #strokedText #frontend #neon #neonText #neonGlow

Ana Tudor 🐯Jan 23

Torn on @codepen: https://codepen.io/thebabydino/pen/XWQQKJd

Absolutely no text duplication whatsoever, not in the markup, not in the `content` of any pseudo. No images save for the "newspaper" background (which doesn't include the torn edges, screen #2) and for #CSS gradients.

Just some #SVG #filter magic! 🪄✨

#svgFilter #cssGradient #textEffects #code #textEffect #coding #frontend #web #dev #webDevelopment #webDev

Ana Tudor 🐯Jan 22

Multilayer candy effect with no text duplication. In fact, this is contenteditable, no JS required 🐱

Check out the live demo on @codepen https://codepen.io/thebabydino/pen/XWOvWqM

Just a bit of #SVG #filter magic! 🪄✨

#svgFilter #cssGradient #code #coding #web #dev #webDev #webDevelopment #CSS #frontend #textEffect #textEffects

Ana Tudor 🐯Jan 22

Extrusion (long shadow) with no long list of shadows, no text duplication, just a super simple #SVG #filter - check it out on @codepen https://codepen.io/thebabydino/pen/mdoJPJa

#svgFilter #code #textEffect #textEffects #web #webDev #dev #webDevelopment #coding #frontend #3D

Ana Tudor 🐯Dec 26

Another text effect on @codepen: https://codepen.io/thebabydino/pen/ZEZXaZZ

No text duplication whatsoever, no part of the effect baked into the font, no images save for the CSS gradient backdrop, no JS.

All done with #SVG #filter magic 🪄✨ - can you figure out how before checking the code?

#svgFilter #css #code #coding #frontend #textEffect #textEffects #cssGradient #web #dev #webDev #webDevelopment

Ana Tudor 🐯Dec 24

A #contenteditable #3D text effect on @codepen https://codepen.io/thebabydino/pen/PogJybr

No text duplication, no images save for CSS gradients, no part of the effect baked into the font, no JS. It's all clever #CSS and #SVG #filter magic! 🪄✨

PS re: "trashed panda" 🦝🍾🥂🤪
https://www.bbc.com/news/articles/c5y2271q20lo

#svgFilter #cssGradient #code #coding #cssPattern #extrude #extrusion #frontend #web #dev #webDev #webDevelopment #textEffect #textEffects