#dropshadow

https://codepen.io/thebabydino/pen/OJGQBxo
https://codepen.io/thebabydino/pen/bGJvOmr
https://codepen.io/thebabydino/pen/YzMMNKE
https://codepen.io/thebabydino/pen/bGybXVj

No text duplication single div 3D + stroke effects (double stroke, gradient stroke or stroke with shadow) - it's all in the magic of SVG filters!

Live on @codepen:

Screenshot. Shows the text "now" in all caps, with a light blue to bluish green top to bottom gradient letter face, a double stroke and a 3D extrusion effect. The outer stroke is white, while the inner one is a top to bottom gradient one from a medium blue to the same green as the letter face now, effectively looking as if it's disappearing into the letter fill at the bottom. The extrusion is deeppink at the bottom and a gold to orange top to bottom gradient on the right side.

The page background is an aqua to deep blue dithered gradient.

DevTools open on the right side to highlight the fact that there's no JS, no text duplication whatsoever, not in the markup and not in any pseudo-element content.

Screenshot. Shows the text "meet me halfway" in all caps on top of a blue-tinted image of stairs in the forest. The letter face has a hashed background - dark orange hashes on top of orange. The text also has a thin white outline with sharp corners, as well as an inner shadow and two 3D extrusions/ long shadows towards the bottom right, the first one a solid sea blue and the second a semi-transparent one.

DevTools open on the right side to highlight the fact that there's no JS, no text duplication whatsoever, not in the markup and not in any pseudo-element content.

Screenshot. The text "Beautiful" in a fancy, cursive font. The text face has a lighter to a darker pink gradient and so does the thin text stroke, which also has an inner shadow. There's a darker pink lateral 3D extrusion effect and a dark pink shadow being cast by the entire 3D text.

DevTools open on the right side to highlight the fact that there's no JS, no text duplication whatsoever, not in the markup and not in any pseudo-element content.

Screenshot. Shows the text "chocolate - and - butterflies" in all caps split across 3 lines on top of a bright teal background with subtle semitransparent black hashes. This text is skewed such that its top right corner is pulled up. It has a purplish grey extrusion which has just a white outline at the top (the letter fill is transparent there, allowing us to see through to the base) and a hashed letter fill (white and light violet hashes) at the bottom. This in turn has a smaller purple extrusion, half the size of the first one, as well as a third semitransparent black extrusion, the same size as the first (grey) one.

DevTools open on the right side to highlight the fact that there's no JS, no text duplication whatsoever, not in the markup and not in any pseudo-element content.

**Ana Tudor** @anatudor@mastodon.social · May 17, 2024 *

May 17, 2024 *

#CodePenChallenge #SVG #filter

No text duplication double neon with some SVG filter magic (if you look closely, it's not just a white outline with a glow)

@codepen demo: https://codepen.io/thebabydino/full/OJqMqJe

GIF

**Ana Tudor** @anatudor@mastodon.social · May 17, 2024

May 17, 2024

https://codepen.io/thebabydino/pen/LYvQzve
https://codepen.io/thebabydino/pen/vYMdzVy

No text duplication layered 3D effect with SVG filter magic

Live on @codepen :

#CodePenChallenge

In Bucharest, there used to be a cake shop called Candy Cat (logo below). More recently, there's a candy store (last image).

GIF

#CodePen #SVG #filter

**Ana Tudor** @anatudor@mastodon.social · May 17, 2024 *

May 17, 2024 *

https://codepen.io/thebabydino/pen/abMvzoo
https://codepen.io/thebabydino/pen/PoLGEPM
https://codepen.io/thebabydino/pen/LYvzmLW
https://codepen.io/thebabydino/pen/PogJybr

3D + multilayer + other effects (halftone, inner shadow) with no text duplication, just some SVG filter magic

Live on @codepen:

GIF

**Ana Tudor** @anatudor@mastodon.social · May 16, 2024

https://codepen.io/thebabydino/pen/PoVMoby
https://codepen.io/thebabydino/pen/XWOvWqM
https://codepen.io/thebabydino/pen/WNmQpQJ
https://codepen.io/thebabydino/pen/rNbKOpL

Multi layers with no text duplication. Just the magic of SVG filters. Live on @codepen:

GIF

**Ana Tudor** @anatudor@mastodon.social · May 16, 2024

You might think all it takes here is `background-clip: text`, `text-stroke` and `text-shadow`.

Except it doesn't work! `text-shadow` gets drawn on top of the polka dots/ hash lines background in this case!

SVG filter magic to the rescue!

Here's the solution on @codepen https://codepen.io/thebabydino/pen/QWPqQpN

The text "polka dots" on the first line and "hash lines" on the second. Both are in all caps, both have a black stroke and a polka dots/ hash lines pattern respectively. Underneath all of this, there's a greenish shadow to the bottom right.

DevTools panel open to the right to highlight the fact that there is no text duplication, no JS, no hidden elements. Just this text and an SVG filter, the same filter for both, as the patterns themselves get created in the CSS.

**Ana Tudor** @anatudor@mastodon.social · May 16, 2024

https://codepen.io/thebabydino/pen/vYbwvyY
https://codepen.io/thebabydino/pen/YzMpjZR
https://codepen.io/thebabydino/pen/ZEZXaZZ
https://codepen.io/thebabydino/pen/NWmbyZQ

A few more *no text duplication* slice/ offset demos on @codepen with SVG filter magic for this week's #CodePenChallenge

GIF

Screenshot. Shows the word "awesome" in all caps repeated 5 times vertically, with little space in between. Across the area of a triangle connecting the left edge of the rectangle containing these 5 repetitions to the middle of the right edge of the same rectangle, the text is hollow inside a gradient outline, with the gradient going from reddish at the top of the rectangle to gold at the bottom. Outside this triangle area, the text is solid white.

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 once, SVG filters and a bit of CSS.

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 once, SVG filters and a bit of CSS.

The text "born to be awesome" in all caps, split on 4 different lines. The first one ("born") has a slightly bigger font size and just a blue stroke. The others have a top half fill in an autumn colour and a spaced out stroke in the same colour as the fill.

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 once, SVG filters and a bit of CSS.

#CodePen #SVG #filter

**Ana Tudor** @anatudor@mastodon.social · May 16, 2024

#CodePen #CodePenChallenge #SVG

Same text effect:

pure CSS https://codepen.io/thebabydino/pen/abMYoWX
with an SVG filter https://codepen.io/thebabydino/pen/poYvgzX

Pure CSS version obviously requires a wrapper and if you're thinking why is the SVG version so overly complicated, well... browser bugs. Ironically, not even SVG, but CSS bugs...

On a black to purple top to bottom grainy gradient, the text "stay alive" in all caps, split across two lines, one word on each. Each line has an aqua to deeppink gradient with small horizontal gaps. The gradient stripes cast a shadow to the bottom right.

**Ana Tudor** @anatudor@mastodon.social · Mar 28, 2024

Mar 28, 2024

https://codepen.io/thebabydino/pen/BRROzw
https://dbaron.org/log/20110225-blur-radius
https://codepen.io/thebabydino/pen/WNPwzGg

#tinyCSStip

`filter: drop-shadow()` is great for non-rectangular shapes.

But there are a couple of frustrating issues:

`filter` is applied before `clip-path`
set `filter` on parent

blur inconsistent with that of box/ text shadow
set it to half the value

Resources:

Diagram. A box representing an element (left) has a CSS filter applied to become a box with a box-shadow (center) then has a clip-path applied to become a star with no shadow (right).

Screenshot of a demo illustrating two cases.

One, a drop-shadow filter is applied on parent of clipped element, but this parent has either some text content, a border, a box-shadow or a background. This results in the drop-shadow also being applied to the parent's text, border, etc., not just to the clipped pseudo.

Two, a drop-shadow filter is applied on parent of clipped element and this parent has no other visible parts. This results in the clipped pseudo getting a nice drop-shadow that follows its shape.

Screenshot with the following text:

Comparing text/ box shadows with drop shadows
(blur needs to be half for drop shadows)
.text-css { text-shadow: 0 0 8px hsl(335, 100%, 50%) }
.text-svg { filter: drop-shadow(0 0 4px hsl(335, 100%, 50%)) }
.rect-css { box-shadow: 0 0 8px hsl(335, 100%, 50%) }
.rect-svg { filter: drop-shadow(0 0 4px hsl(335, 100%, 50%)) }

So, getting back to CSS and HTML: what does this blur radius mean? A Gaussian distribution is described by two parameters: the mean (μ) and the standard deviation (σ). We obviously want the mean (the center) of the kernel function applied to the source image to be the same as the pixel in the result image that we're computing. The blur effect is now defined by css3-background and by HTML to be a Gaussian blur with the standard deviation (σ) equal to half the given blur radius, with allowance for reasonable approximation error.

This means that a blur with a 10px radius has an effect that extends a little past 10 pixels, but the bulk of the visible effect is within the 10px blur radius.

I mentioned SVG at the beginning, and I'll mention it again here. The SVG feGaussianBlur filter primitive has a stdDeviation attribute, which takes the standard deviation (σ) of the Gaussian blur. So in SVG, the number given is half the number that you would give to get the same blur with CSS or canvas.

#CSS #SVG #filter

**Ana Tudor** @anatudor@mastodon.social · Jan 31, 2024 *

Jan 31, 2024 *