Lmst

#TextEffects

A #tutorial for creating a glowing text effect in #krita, which is non-destructive and can be used in illustrations as well.
https://www.virtualcuriosities.com/articles/5383/how-to-make-a-glowing-text-effect-in-krita #arttutorial #artresources #texteffects #imageediting #graphicdesign

A new #krita tutorial for simple visual effects.
https://www.virtualcuriosities.com/articles/5369/how-to-create-a-metal-text-effect-using-gradients-in-krita #texteffects #imageediting #graphicdesign #arttutorial

How to create an infinite long shadow in #Krita. Requirements: infinite RAM.
https://www.virtualcuriosities.com/articles/5346/how-to-create-a-diagonal-long-shadow-effect-in-krita #tutorial #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

Screenshot of linked demo. Shows the text "all things open 2025" in all caps with a white extrusion that has the letter face cut out of it.

Timed Text Effects with SuperBASIC on the Foenix F256K2 – EVENT Command Demo
#FoenixF256K2 #SuperBASIC #RetroProgramming #TextAdventure #BASICcoding #8bitComputing #ModernRetro #HomebrewComputing #EventCommand #TextEffects
https://theoasisbbs.com/timed-text-effects-with-superbasic-on-the-foenix-f256k2-event-command-demo/?feed_id=3007&_unique_id=680b8b5d6d57a

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

Transparent text with a double stroke, black outer one and white inner one. Two different fonts are used, a cursive one on the top line and a sans-serif one on the bottom line.

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

Screenshot showing the problem + the fix.

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

Started making something on @codepen on the last day of the year, but didn't really get anywhere I was happy with...

Posting it anyway https://codepen.io/thebabydino/pen/XJreEqR

1 div, no text duplication, just some CSS + SVG filters. Chromium only, Firefox & Safari bugs linked in description.

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

Oh, and look, one of the resources linked for this week's CodePen Challenge (https://codepen.io/challenges/2024/november/4) is one of my faves out of all the #SVG #filter text effects I've made this year: here is real magic 🪄

https://codepen.io/thebabydino/pen/JjqXjyJ

#svgFilter #texture #textEffects #coding #code #frontend #textEffects #web #dev #paperTexture #webDevelopment #paper #webDev

Someone hearted a Pen I made over a year ago, a no library, minimal JS version of another I found on @codepen.

At the time, it didn't work in Firefox as it was transitioning custom properties and support for :has() there was spotty.

Now it's cross-browser codepen.io/thebabydino/pen/gOqYdJd

#CSS #cssTransition #mask #cssMask #revealEffect #textEffects #textEffect #code #coding #frontend #webDevelopment #web #dev #webDev

A fun little demo I made on @codepen.io: https://codepen.io/thebabydino/pen/ZEZXaZZ

No text duplication whatsoever, as it can be seen in the DevTools panel, just #SVG #filter magic. 🪄

Another entry for this week's #CodePenChallenge.

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

Screenshot. Shows the text "we have the cure for hope" in all caps in a fun cursive font. The text appears in a dark grey outline version on top of a filled and offset version. The part of the back offset version that's inside the outline is orange, while the part that's outside is golden.

DevTools panel open on the right to show that there is no JS, no text duplication whatsoever, not in the markup and not in any pseudo-element `content`. All is just one div containing the text only once, SVG filters and a bit of CSS.

Here's a fun #3D layered text effect on @codepen https://codepen.io/thebabydino/pen/vYMdzVy

No text duplication whatsoever, no text-shadow, no JS, no images save for CSS gradients.

All done with #CSS gradients, transforms & #SVG #filter magic! 🪄

Also an entry for this week's
#CodePenChallenge.

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

Here's a cool 3D effect on @codepen: codepen.io/thebabydino/pen/PogJybr

No text duplication whatsoever, no images save for #CSS gradients creating the dot #pattern. The #3D effect and outline are made from #SVG #filter magic.🪄

An entry for this week's #CodePenChallenge.

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

A simple-looking, but tricky text effect on @codepen: https://codepen.io/thebabydino/pen/rNbdJxE

No text duplication whatsoever, no JS. And the offset between the two blended text layers is font-size relative, which #SVG filters can't do. So there's an extra #CSS trick involved.🪄

An entry for this week's #CodePenChallenge.

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