Lmst

#textEffects

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

The text "neon light" in a neon style. The word "neon" is in all caps in a medium geometric font, with a royalblue glow. The word "light" in in title case in a pretty, thin handwritten font, with a hotpink glow.

The text "neon light" in a neon style. The word "neon" is in all caps in a thick geometric font, with a royalblue glow around the outline - in this case, it's not filled, just outlined and it's thicker. The word "light" in in title case in a pretty, thin handwritten font, with a hotpink glow.

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

Demo screenshot.

Shows the text "dreams" in all caps, split on two lines equally. The text has a torn split such that the middle secondary diagonal strip has a newspaper-like image fill, while the top left and bottom right corners have a wooden-like fill, with an inner neon blue outline inside. These parts (diagonal and corner ones) have torn edges where they meet.

On the right, the DevTools panel is open to show there is no text duplication whatsoever involved here.

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

The text Berlin with an orange face and a black extrusion (long shadow).

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

The text "bamboozled" in small caps. There are two horizontally offset copies of it. The one to the left is orangey, the one to the right bluish, while their intersection is a dark sea green.

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

Demo screenshot. The text "success" in all caps with a diagonal half split across its face, the bottom right part having an aqua background in addition to being hashed like the top left part. The bottom right part also has a fuchsia drop shadow that is blended with it.

The fine print at the bottom says, in a much smaller cursive font with less contrast: "wake up early, work hard and never give up, your dreams can come true... if you're born rich!"

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

The text "retro" in all caps, with a torn white face and a slightly rotated dot grid shadow.

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

Screenshot. Shows the visual result on the left and the DevTools panel open on the right.

The visual result is the text "disruption" in all caps, split on three lines as "dis-rup-tion". The text is sliced diagonally. The top left corner part above the diagonal is painted a sea blue and offset up. The bottom right part below the diagonal is painted orange and offset down.

The DevTools panel on the right highlights the fact that the text isn't duplicated and that the split line angle is given by a custom property.

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

The word "fashion" in all caps over the photo of a woman in a bright red dress. The text has a transparent fill and a white stroke where it intersects the red dress and a black fill with no stroke elsewhere.

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

Screenshot of the linked demo. Shows the words "Vintage Experience" with a double stroke (white inner one, black outer one). The text fill is transparent and lets us see through to the image behind.

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

"Text Behind Everything 0.5 (beta)" ra mắt! Công cụ mới giúp nhà thiết kế dễ dàng đặt chữ sau hình ảnh (sắp tới là video). Với các tính năng nổi bật như định vị chính xác, preset văn bản và hiệu ứng blend độc đáo. Miễn phí cho 5 hình ảnh đầu tiên. Hãy trải nghiệm bản beta và chia sẻ phản hồi nhé!
#CôngCụThiếtKế #TextBehindEverything #ThiếtKếĐồHọa #Beta #MiễnPhí #DesignTool #GraphicDesign #TextEffects #BetaRelease #FreeTool

https://v.redd.it/tw741yqmf9tf1

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