#text-effect — Public Fediverse posts

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

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

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

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

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.

Just #SVG #filter magic! 🪄

#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

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

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 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

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

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

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

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

#retro #vintage #texteffect #retrotext #photoshop

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

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/112410224855133935

However, 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

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