A #tutorial for the knockout text effect in #krita. Probably one of the easiest effects you can make.
https://www.youtube.com/watch?v=SuD0Ui27GZw #graphicdesign #texteffects
A #tutorial for the knockout text effect in #krita. Probably one of the easiest effects you can make.
https://www.youtube.com/watch?v=SuD0Ui27GZw #graphicdesign #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
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
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
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
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
After a retro text effect, here's a modern 3D one with an outline and an inner shadow on @codepen: https://codepen.io/thebabydino/pen/LYvzmLW
No text duplication whatsoever, no text shadow, no JS, no funky fonts, no images. Just some #SVG #filter magic.🪄
An entry for this week's #CodePenChallenge.
#svgFilter #textEffects #code #textEffect #web #dev #webDev #webDevelopment #coding #frontend
Retro: a "damaged paint" text with a rotated dot grid shadow on @codepen: https://codepen.io/thebabydino/pen/rNbKOpL
No text duplication whatsoever, not in the markup and not in any pseudo-element content. Just a little bit of #CSS and #SVG #filter magic. 🪄✨
An entry for this week's #CodePenChallenge.
#svgFilter #textEffects #code #textEffect #web #dev #webDev #webDevelopment #coding #frontend