#text-effect — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #text-effect, aggregated by home.social.
-
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
-
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
-
This Water Droplets Text Effect Mockup for Photoshop Delivers Photorealistic Liquid Typography in Seconds https://weandthecolor.com/this-water-droplets-text-effect-mockup-for-photoshop-delivers-photorealistic-liquid-typography-in-seconds/208571
The water droplets text effect mockup by Grkic Creative stands out because it creates highly realistic typography that looks almost like a photograph while remaining extremely quick to customize in Photoshop.
#photoshop #photoshopmockup #texteffect #design #graphicdesign #typography
-
XOR nav blob with no content duplication.
Check out the live demo on @codepen https://codepen.io/thebabydino/pen/RwzoqWj
No covers, allows for an image background behind.
PS - uses JS because it should work on click, not hover.
#CSS #SVG #filter #svgFilter #textEffect #code #coding #xor #frontend #web #dev #webDev #webDevelopment
-
XOR nav blob with no content duplication.
Check out the live demo on @codepen https://codepen.io/thebabydino/pen/RwzoqWj
No covers, allows for an image background behind.
PS - uses JS because it should work on click, not hover.
#CSS #SVG #filter #svgFilter #textEffect #code #coding #xor #frontend #web #dev #webDev #webDevelopment
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
Here's a really cool text effect I made on @codepen: individual letter rotation + extrusion https://codepen.io/thebabydino/pen/WNqvdmN
No text duplication, no splitting the text into individual letters, no funky fonts.
#svgFilter #textEffect #coding #frontend #web #dev #webDev #webDevelopment #code #3D #extrude #extrusion #longShadow
-
Here's a really cool text effect I made on @codepen: individual letter rotation + extrusion https://codepen.io/thebabydino/pen/WNqvdmN
No text duplication, no splitting the text into individual letters, no funky fonts.
#svgFilter #textEffect #coding #frontend #web #dev #webDev #webDevelopment #code #3D #extrude #extrusion #longShadow
-
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
-
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
-
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
-
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
-
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
-
Split text with blended half shadow on @codepen https://codepen.io/thebabydino/pen/LYvdBQm?editors=1100
No text duplication whatsoever, no images other than #CSS gradients, no funky fonts* - all done with #SVG #filter magic! 🪄✨
*font used here is https://fonts.google.com/specimen/Rubik+Mono+One - you can see the effect isn't baked into it
#svgFilter #cssGradient #code #coding #web #dev #webDev #webDevelopment #textEffect #textEffects #frontend
-
Split text with blended half shadow on @codepen https://codepen.io/thebabydino/pen/LYvdBQm?editors=1100
No text duplication whatsoever, no images other than #CSS gradients, no funky fonts* - all done with #SVG #filter magic! 🪄✨
*font used here is https://fonts.google.com/specimen/Rubik+Mono+One - you can see the effect isn't baked into it
#svgFilter #cssGradient #code #coding #web #dev #webDev #webDevelopment #textEffect #textEffects #frontend
-
Retro dotted shadow text on @codepen https://codepen.io/thebabydino/pen/rNbKOpL
Contenteditable, no JS, no text duplication whatsoever, no images save for code-generated ones. More #SVG #filter magic! 🪄✨
#svgFilter #CSS #radialGradient #retro #cssGradient #textEffects #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment
-
Retro dotted shadow text on @codepen https://codepen.io/thebabydino/pen/rNbKOpL
Contenteditable, no JS, no text duplication whatsoever, no images save for code-generated ones. More #SVG #filter magic! 🪄✨
#svgFilter #CSS #radialGradient #retro #cssGradient #textEffects #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment
-
Retro 3D 🍫🦋 effect on @codepen: https://codepen.io/thebabydino/pen/bGybXVj
No text duplication whatsoever, no long shadow list, no funky fonts, no JS, no images other than CSS gradients. Extrusion is all #SVG #filter magic 🪄✨ - as illustrated by the recording below including the DevTools panel.
#svgFilter #textEffects #textEffect #extrude #extrusion #code #coding #frontend #CSS #web #dev #webDev #webDevelopment #cssGradient
-
Retro 3D 🍫🦋 effect on @codepen: https://codepen.io/thebabydino/pen/bGybXVj
No text duplication whatsoever, no long shadow list, no funky fonts, no JS, no images other than CSS gradients. Extrusion is all #SVG #filter magic 🪄✨ - as illustrated by the recording below including the DevTools panel.
#svgFilter #textEffects #textEffect #extrude #extrusion #code #coding #frontend #CSS #web #dev #webDev #webDevelopment #cssGradient
-
#3D text with double outlines & inner shadows. Absolutely no text duplication whatsoever needed, not in the markup, not in pseudo content. No funky fonts. Contenteditable with no JS needed.
Can you figure out how before checking my code?
Live on @codepen https://codepen.io/thebabydino/pen/LYvzmLW
#SVG #filter #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend #textEffects #textEffect #extrusion
-
#3D text with double outlines & inner shadows. Absolutely no text duplication whatsoever needed, not in the markup, not in pseudo content. No funky fonts. Contenteditable with no JS needed.
Can you figure out how before checking my code?
Live on @codepen https://codepen.io/thebabydino/pen/LYvzmLW
#SVG #filter #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend #textEffects #textEffect #extrusion
-
Slice & offset text without any duplication whatsoever, not in the markup and not in pseudo content (which you can see in the DevTools panel on the right).
Done with #SVG #filter magic! 🪄✨
Can you figure out how before checking the code?
Live on @codepen https://codepen.io/thebabydino/pen/yLWNppR
#svgFilter, #textEffects, #textEffect, #coding, #typography, #poster, #code, #frontend, #web, #dev, #webDev, #webDevelopment
-
Slice & offset text without any duplication whatsoever, not in the markup and not in pseudo content (which you can see in the DevTools panel on the right).
Done with #SVG #filter magic! 🪄✨
Can you figure out how before checking the code?
Live on @codepen https://codepen.io/thebabydino/pen/yLWNppR
#svgFilter, #textEffects, #textEffect, #coding, #typography, #poster, #code, #frontend, #web, #dev, #webDev, #webDevelopment
-
No text duplication. A single image used. All with clever #CSS and #SVG #filter magic! 🪄✨
Uses `text-orientation: upright` for vertical text. Matrix filter extracts just the red areas of the image. These get intersected/ subtracted from the text.
Live on @codepen.io: https://codepen.io/thebabydino/pen/dyEeVrg
One of my favourite SVG filter demos I've made.
#svgFilter #textEffects #textEffect #coding #typography #poster #code #frontend #web #dev #webDev #webDevelopment
-
No text duplication. A single image used. All with clever #CSS and #SVG #filter magic! 🪄✨
Uses `text-orientation: upright` for vertical text. Matrix filter extracts just the red areas of the image. These get intersected/ subtracted from the text.
Live on @codepen.io: https://codepen.io/thebabydino/pen/dyEeVrg
One of my favourite SVG filter demos I've made.
#svgFilter #textEffects #textEffect #coding #typography #poster #code #frontend #web #dev #webDev #webDevelopment
-
Here's another 2 techniques in 1 demo on @codepen: double stroke, transparent text, two approaches https://codepen.io/thebabydino/pen/GgRrmzO
Can you figure out any of them before checking the code? Neither uses any duplication whatsoever (no duplicating the text and no duplicating the image as tex fill).
#CSS #SVG #textStroke #textEffects #code #textEffect #coding #frontend #filter #svgFilter #web #dev #webDev #webDevelopment
-
Here's another 2 techniques in 1 demo on @codepen: double stroke, transparent text, two approaches https://codepen.io/thebabydino/pen/GgRrmzO
Can you figure out any of them before checking the code? Neither uses any duplication whatsoever (no duplicating the text and no duplicating the image as tex fill).
#CSS #SVG #textStroke #textEffects #code #textEffect #coding #frontend #filter #svgFilter #web #dev #webDev #webDevelopment
-
Elongated grainy gradient text shadows. No text duplication whatsoever, just #SVG #filter magic! 🪄✨
Live demo on @codepen: https://codepen.io/thebabydino/pen/NWZeQOg
#textEffects #code #coding #frontend #web #dev #webDev #webDevelopment #svgFilter #textEffect #CSS
-
Elongated grainy gradient text shadows. No text duplication whatsoever, just #SVG #filter magic! 🪄✨
Live demo on @codepen: https://codepen.io/thebabydino/pen/NWZeQOg
#textEffects #code #coding #frontend #web #dev #webDev #webDevelopment #svgFilter #textEffect #CSS
-
Adobe Illustrator Text Effect by Gstudio Templates: Mastering the “Noise” Typography Trend https://weandthecolor.com/adobe-illustrator-text-effect-mastering-the-noise-typography-trend/205732
#texteffect #adobe #adobeillustrator #mockup #typography #design #graphicdesign
-
A cool single div poster on @codepen https://codepen.io/thebabydino/pen/dyEeVrg
Real text, no duplication at all, not in the markup, not in pseudo content. A single image used for the backdrop, the magic 🪄 is in a `feColorMatrix` extracting the contrasting red areas to use them for the text split.
#SVG #filter #svgFilter #code #coding #textEffect #textEffects #frontend #CSS #web #dev #webDev #webDevelopment
-
A cool single div poster on @codepen https://codepen.io/thebabydino/pen/dyEeVrg
Real text, no duplication at all, not in the markup, not in pseudo content. A single image used for the backdrop, the magic 🪄 is in a `feColorMatrix` extracting the contrasting red areas to use them for the text split.
#SVG #filter #svgFilter #code #coding #textEffect #textEffects #frontend #CSS #web #dev #webDev #webDevelopment
-
Pixelbuddha Studio’s Stylish Retro Chrome Text Effect Adds a Modern Nod to an Iconic Aesthetic. https://weandthecolor.com/authentic-retro-chrome-text-effect-photoshop-mockup/205532
-
Comic 3D on @codepen https://codepen.io/thebabydino/pen/abMvzoo
A little text effect demo with outline, inner shadow, #halftone pattern and extrusion effect.
No images other than #CSS gradients, no text duplication whatsoever, contenteditable.
An #SVG #filter does the magic! ✨🪄🎩🐇
#svgFilter #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect #textEffects
-
Comic 3D on @codepen https://codepen.io/thebabydino/pen/abMvzoo
A little text effect demo with outline, inner shadow, #halftone pattern and extrusion effect.
No images other than #CSS gradients, no text duplication whatsoever, contenteditable.
An #SVG #filter does the magic! ✨🪄🎩🐇
#svgFilter #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect #textEffects
-
This Halftone Vintage Text Effect is a Bold Fusion of Psychedelic Color and Retro Texture https://weandthecolor.com/this-halftone-vintage-text-effect-is-a-bold-fusion-of-psychedelic-color-and-retro-texture/204872
#AdobePhotoshop #TextEffect #Retro #Vintage #GraphicDesign #Typography
-
Saw https://mastodon.social/@codepo8@toot.cafe/114705664551095252
Since that logo is a 12KB complicated .svg, I recreated something of the kind on @codepen with #HTML + #CSS + an extrusion #SVG #filter https://codepen.io/thebabydino/pen/zxGJJzX
... with under 10% the total amount of code! 🥳
#code #coding #frontend #svgFilter #web #webDev #webDevelopment #dev #textEffect #textEffects
-
Saw https://mastodon.social/@codepo8@toot.cafe/114705664551095252
Since that logo is a 12KB complicated .svg, I recreated something of the kind on @codepen with #HTML + #CSS + an extrusion #SVG #filter https://codepen.io/thebabydino/pen/zxGJJzX
... with under 10% the total amount of code! 🥳
#code #coding #frontend #svgFilter #web #webDev #webDevelopment #dev #textEffect #textEffects
-
1️⃣1️⃣ 501 ❤️ Slice! https://codepen.io/thebabydino/pen/GRaKbZo
Definitely one of my faves I've made on @codepen in 2024.
No JS, no text duplication whatsoever, no images save for #CSS gradients. #SVG filters take care of both the texture and the slice + offset effect.🪄
Also contenteditable. 😼
Oh, and the code is heavily commented.
#cssGradient #svgFilter #filter #code #web #dev #webDev #webDevelopment #frontend #coding #textEffect #noise #grainy
-
1️⃣1️⃣ 501 ❤️ Slice! https://codepen.io/thebabydino/pen/GRaKbZo
Definitely one of my faves I've made on @codepen in 2024.
No JS, no text duplication whatsoever, no images save for #CSS gradients. #SVG filters take care of both the texture and the slice + offset effect.🪄
Also contenteditable. 😼
Oh, and the code is heavily commented.
#cssGradient #svgFilter #filter #code #web #dev #webDev #webDevelopment #frontend #coding #textEffect #noise #grainy
-
Updated to add another possible solution not limited by font (not ugly for cursive fonts) - see
https://mastodon.social/@anatudor/112410224855133935However, this solution needs text duplication + has both inner & outer stroke outside unstroked text shape.
Both on @codepen 👉 https://codepen.io/thebabydino/pen/GgRrmzO?editors=1100
#SVG #filter #textEffect #svgFilter #coding #code #frontend #typography #textEffects #web #dev #webDev #webDevelopment #textStroke
-
Updated to add another possible solution not limited by font (not ugly for cursive fonts) - see
https://mastodon.social/@anatudor/112410224855133935However, this solution needs text duplication + has both inner & outer stroke outside unstroked text shape.
Both on @codepen 👉 https://codepen.io/thebabydino/pen/GgRrmzO?editors=1100
#SVG #filter #textEffect #svgFilter #coding #code #frontend #typography #textEffects #web #dev #webDev #webDevelopment #textStroke
-
Someone asked how to get a double stroke text. Here's my take on it, requiring no text duplication: https://www.reddit.com/r/css/comments/1j04b4e/comment/mfbaq7y/
@codepen demo with minimal code 😸 https://codepen.io/thebabydino/pen/GgRrmzO?editors=1100
#SVG #filter #textEffect #CSS #code #dev #coding #webDev #webDevelpment #web #frontend
-
Someone asked how to get a double stroke text. Here's my take on it, requiring no text duplication: https://www.reddit.com/r/css/comments/1j04b4e/comment/mfbaq7y/
@codepen demo with minimal code 😸 https://codepen.io/thebabydino/pen/GgRrmzO?editors=1100
#SVG #filter #textEffect #CSS #code #dev #coding #webDev #webDevelpment #web #frontend
-
1⃣ using a channel as an alpha mask - the bottom row lets us choose which input channel is used for the output alpha; if we set one of the RGB channels (first 3 values) to 1 and zero all else on the last row, that channel is used as the alpha mask.
Here is the interactive demo illustrating this on @codepen
https://codepen.io/thebabydino/full/OJqZvQO#CSS #SVG #filter #svgFilter #textEffects #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment
-
Want inline semitransparent text background with no overlap?
Here's how on @codepen
https://codepen.io/thebabydino/pen/gbOwxGL?editors=1100
(you can see the overlap problem and the desired result below)The `filter` combines 2 `feColorMatrix` techniques:
1️⃣ using a channel as an alpha mask
2️⃣ solid fill
#CSS #SVG #filter #svgFilter #textEffects #textEffect #code #coding #frontend #web #dev #webDev #webDevelopment
-
Made a version of https://mastodon.social/@codepen@fosstodon.org/113765084437649599 that doesn't duplicate the text and doesn't split it into individual letters - it's all done with a heading, a little bit of #CSS and a simple #SVG #filter. No JS either.
Check it out!
https://codepen.io/thebabydino/pen/RNbMbYN?editors=1100#textEffect #code #coding #frontend #web #dev #webDev #webDevelopment #text #svgFilter #textEffects
-
Somebody asked how to fix a text fill effect and got an answer, but I thought I could improve on that, so here's me writing in detail about what I'd do instead https://www.reddit.com/r/css/comments/1hwhxyn/comment/m6d9wxv/
And my solution on @codepen
https://codepen.io/thebabydino/pen/RNbQXNx?editors=1100
#CSS #textEffect #text #textEffects #code #web #dev #webDev #webDevelopment #coding #frontend #cssGradient #CodePen