Christian Lawson-Perfect @christianp

1 post1 participant0 posts today

**Ana Tudor** @anatudor@mastodon.social · 1d *

Maybe don't rely on AI to answer your CSS questions. Actually... without the maybe. Don't rely on AI to answer your CSS questions.

Prompt: gradient triangle CSS

Answer:
Ah, a gradient triangle with CSS! That's a fun little visual trick. There are a few ways to achieve this, playing with borders and linear gradients. Here's a common and effective method using linear-gradient on a pseudo-element:

CSS
```
.gradient-triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /* Adjust size as needed */
border-right: 50px solid transparent; /* Adjust size as needed */
border-bottom: 100px solid red; /* Initial solid color */
position: relative; /* For positioning the pseudo-element */
}

.gradient-triangle::before {
content: "";
position: absolute;
top: 0;
left: -50px; /* Match the left border */
width: 100px; /* Match the combined left and right borders */
height: 100px; /* Match the bottom border */
background: linear-gradient(to bottom, rgba(255, 0, 0, 0), blue); /* Gradient */
-webkit-mask: polygon(0 0, 100% 0, 50% 100%); /* Clip to a triangle */
mask: polygon(0 0, 100% 0, 50% 100%);
}
```

#CSS #AI #aiCode

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 12

Apr 12

Ana Tudor @anatudor@mastodon.social

You can find a very detailed explanation about the how behind in my Taming Blend Modes: `difference` and `exclusion` article on @csstricks https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

Screenshot of an interactive demo, highlighting how the `difference` blend mode works.

#CSS #blending #blendMode

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 12

Apr 12

Ana Tudor @anatudor@mastodon.social

And here are cards with gradual left to right inversion: from no inversion at all on the left, to full inversion on the right. Again, minimal code, single div, no pseudos necessary, 2 #CSS declarations.

Live demos on @codepen

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

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

.card {
background:
url(image.jpg) 50%/ cover,
linear-gradient(90deg, #000, #fff);
/* or the difference blend mode */
background-blend-mode: exclusion
}

Inverted image using the exclusion blend mode. The butterfly goes from its original blue on the left to red on the right, passing through a 50% grey.

Pseudo-inversion of image using the difference blend mode. The butterfly goes from its original blue on the left to red on the right, this time passing through other hues rather than through a 50% grey.

#blending #blendMode #cssGradient

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 11

Apr 11

Ana Tudor @anatudor@mastodon.social

Here's another set of cards with varying patterns, all created with the exact same 4 blended CSS gradients, it's just the stops list `--c` that changes for each card.

So basically, it's again just one `background` + one `background-blend-mode` property.

Live demo on @codepen
https://codepen.io/thebabydino/pen/vYyNyER

.card {
--s: rgb(0 0 0/ .2) 0, #0000 5px 50px;
background:
/* shadows */
repeating-linear-gradient(45deg, var(--s)),
repeating-linear-gradient(-45deg, var(--s)),
/* main pattern */
repeating-linear-gradient(45deg, var(--c)),
repeating-linear-gradient(-45deg, var(--c));
background-blend-mode:
multiply, multiply, lighten
}

.card:nth-child(1) {
--c: #847971 0 10px, #938981 0 20px,
#9e938a 0 30px, #a89c93 0 40px, #bfb6ab 0 50px
}

.card:nth-child(2) {
--c: #333 0 10px, #555 0 20px,
#c55 0 30px, #ccc 0 40px, #eee 0 50px
}

#CSS #blending #blendMode

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 11

Apr 11

Ana Tudor @anatudor@mastodon.social

And here's a cards demo with a cool, yet very simple trick: these left to right gradients are vibrant at the top, but then progressively get more and more desaturated going down, until fully grey.

Live on @codepen https://codepen.io/thebabydino/pen/xxzjJXL - only 2 CSS declarations necessary!

Screenshot of demo with gradient cards, all showing left to right gradients, vibrant at the top of the card, but getting progressively more and more desaturated as we go towards the bottom.

.card {
/* relevant code for the effect */
background:
linear-gradient(90deg,
var(--stop-list)),
linear-gradient(#0000, grey);
background-blend-mode: luminosity;

/* other styles */
aspect-ratio: 3/ 2;
border-radius: .5em;
box-shadow: 2px 2px 5px 1px #040404
}

#CSS #tinyCSStip #blending

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 11 *

Apr 11 *

Ana Tudor @anatudor@mastodon.social

A much newer @codepen demo: smoothly connected cards https://codepen.io/thebabydino/pen/azbLBJy - continuous backgrounds across all, concave roundings + drop shadows, responsivity.

#CSS #SVG #filter

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 9

Apr 9

Ana Tudor @anatudor@mastodon.social

Here's also a stepped `conic-gradient()` effect, with a grain effect applied https://cdpn.io/pvoBeZP

For more on the grain effect, check out this older post https://mastodon.social/@anatudor/110394395163731287

#CSS #SVG #filter

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 9

Apr 9

Ana Tudor @anatudor@mastodon.social

Same visual result in both cases, it's just that the #CSS version specifies the entire RGBA value + (equidistant) stop positions for each stop, while the #SVG #filter one only specifies the alpha values for each stop. Given those are equidistant too, a `steps()` way of setting them would make sense.

More stepped gradient examples on @codepen
https://codepen.io/thebabydino/pen/jOoLmBv

These all use the same SVG filter.

#svgFilter #cssGradient #coding

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 9

Apr 9

Ana Tudor @anatudor@mastodon.social

If what you want isn't beveled, but scooped corners, then you can do it with a `radial-gradient()` mask. You can even add borders too!

Here's a @codepen demo illustrating this https://codepen.io/thebabydino/pen/VYwObZN

Pure #CSS, no SVG.

Screenshot of a linked demo. Shows an image with scooped corners and a teal border following the scooped corners shape.

#cssGradient #cssMask #coding

**Ana Tudor** @anatudor@mastodon.social · Apr 9 *

Apr 9 *

Ana Tudor @anatudor@mastodon.social

I haven't had the time to do anything for this week's #CodePenChallenge yet, but here are some older card demos:

From 5+ years ago: pure #CSS 1 element bevel cards! No SVG or images save for the cat, real (semi)transparency inside borders and all.

See it on @codepen https://codepen.io/thebabydino/pen/ZEGNNQz

Screenshot of linked demo. Shows 7 beveled cards, some with borders (solid, gradient or patterned ones), some with (semi)transparent backgrounds, some with gradient backgrounds, one with an image background. They are all on top of an image backdrop.

#clipPath #cssClipPath #code

**Ana Tudor** @anatudor@mastodon.social · Apr 7

Apr 7

Ana Tudor @anatudor@mastodon.social

Saw a @codepen demo using... a lot! of elements (screen 1) and quite a bit of #CSS to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): https://codepen.io/thebabydino/pen/PwoLJLR

Screenshot with DevTools open, showing each loader being created with a div with 4 other nested div elements, 2 span elements, 2 i elements and 2 pseudos inside.

Screenshot with DevTools open, showing each loader being created with only 1 div and its 2 pseudos.

#cssMask #cssGradient #conicGradient

**Ana Tudor** @anatudor@mastodon.social · Apr 1

Apr 1

Ana Tudor @anatudor@mastodon.social

A little spinner I made years ago on @codepen but never shared publicly https://codepen.io/thebabydino/pen/OJQKbKW

GIF

#CSS #loader #spinner

**Ana Tudor** @anatudor@mastodon.social · Mar 19

Mar 19

Ana Tudor @anatudor@mastodon.social

Minimal pure #CSS textile patterns on @codepen https://codepen.io/thebabydino/full/OJmpzya

Absolutely no images other than CSS gradients and they are all tiny! All of them are under 500 bytes minified, some of them well under!

Some more of the patterns in the gallery.

#pattern #cssPattern #frontend

**Ana Tudor** @anatudor@mastodon.social · Mar 19

Mar 19

Ana Tudor @anatudor@mastodon.social

Some single `button` sets I made on @codepen a while back:

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

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

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

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

A set of 8 soft plastic-looking buttons.

#CSS #button #buttons

**Ana Tudor** @anatudor@mastodon.social · Mar 11

Mar 11

Ana Tudor @anatudor@mastodon.social

Because someone just hearted a 5 year old @codepen demo https://codepen.io/thebabydino/pen/GRooBJm?editors=0100 I made using a #Sass function + looping to generate a #CSS : we don't need *any* Sass for this anymore!

We can now do it with

background:
linear-gradient(in hsl longer hue 90deg,
hsl(0, 95%, 65%) 0 0)

Comparative look at the old Sass code vs. the new and much simpler plain CSS code, both producing the same result (a nice-looking rainbow) shown before both of them.

Old SCSS solution:

```
@function get-rainbow($n: 12, $sat: 90%, $lum: 65%) {
$unit: 360/$n;
$s-list: ();

@for $i from 0 through $n { $s-list: $s-list, hsl($i*$unit, $sat, $lum) }

@return $s-list
}

html { background: linear-gradient(90deg, get-rainbow()) }
```

New plan CSS solution:

```
html {
background:
linear-gradient(in hsl longer hue 90deg, hsl(0, 95%, 65%) 0 0)
}
```

#SCSS #loop #looping

**Ana Tudor** @anatudor@mastodon.social · Mar 4

Mar 4

Ana Tudor @anatudor@mastodon.social

No JS #fluid animation. The animation is created in #CSS, where I'm animating the values of two custom properties back and forth. `feTurbulence` creates the background, `feDisplacement` map uses the CSS-animated input to make it move.

My take on this question https://www.reddit.com/r/webdev/comments/1izlhkw/comment/mfedw8s/

GIF

#SVG #svgFilter #filter

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Feb 28 *

Feb 28 *

Ana Tudor @anatudor@mastodon.social

Made a gallery of such #SVG gradient + #filter effects blobs on @codepen
https://codepen.io/thebabydino/full/YPzNWoR

Also includes an explanation of the how behind and interaction: the focal point of the `radialGradient` the blobs start from follows the cursor on hover.

Different blobs for light/ dark mode.

Comparative screenshot of a few of the blobs in both light and dark mode.

$Demo screen with the info section. Each distorted blob starts out as a circle, tightly fit inside its parent svg element (which has its viewBox set so its 0,0 point is dead in the middle). This circle then gets a radialGradient fill. Choosing the SVG radial gradient over the CSS one as it also allows setting focal point coordinates (fx,fy) distinct from cx,cy - hover a blob to see how its focal point follows the cursor. <radialGradient id='g' gradientUnits='objectBoundingBox' fx='.35' fy='.65'> <stop stop-color='var(--c0)'/> <stop stop-color='var(--c1)' offset='.5'/> <stop stop-color='rgba(from var(--c1) r g b/ 0)' offset='1'/> </radialGradient> The circle with the gradient is then blurred, distorted & given a grainy/ dithered look. The last two actions make use of the same concept of altering the input using noise generated by feTurbulence as a displacement map. The displacement used for distortion is relative to input size. The noise used for dithering is finer (larger baseFrequency). <filter id='distort' primitiveUnits='objectBoundingBox' x='-50%' y='-50%' width='200%' height='200%'> <feTurbulence type='fractalNoise' baseFrequency='.00713'/> <feDisplacementMap in='SourceGraphic' scale='.3' yChannelSelector='R'/> </radialGradient> <filter id='grain' x='-50%' y='-50%' width='200%' height='200%'> <feTurbulence type='fractalNoise' baseFrequency='7.13'/> <feDisplacementMap in='SourceGraphic' scale='32' yChannelSelector='R'/> </radialGradient>$

#svgGradient #cssGradient #blob

**Ana Tudor** @anatudor@mastodon.social · Feb 28

Feb 28

Ana Tudor @anatudor@mastodon.social

Grainy distorted gradient blob: 1 #SVG `radialGradient` (setting a focal point `fx,fy`) vs. multiple #CSS `radial-gradient()` layers (no option to control focal point).

Using filters for distortion & grain effect.

A bit more detail on this https://www.reddit.com/r/css/comments/1j03iyv/comment/mf89ri9/

Comparative result of the SVG radialGradient vs. the CSS radial-gradient() blob.

#svgGradient #cssGradient #blob

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Feb 24

Feb 24

Ana Tudor @anatudor@mastodon.social

My most popular demo of 2024. By far. My second most hearted @codepen demo ever.

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

Pure #CSS, single div, very little code overall; and that's even including layout, prettifying & animation styles. Oh, heavily commented too.

Screenshot of the details page on CodePen, showing it hearted 999 times and viewed 19824 times.

#code #coding #frontend

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Jan 21

Jan 21

Ana Tudor @anatudor@mastodon.social

Also on the topic of cards with gradient border & glow, I just came across such a demo on @codepen and forked it to reduce the number of #CSS declarations to about half and get rid of all nested elements and a pseudo.

My fork: https://codepen.io/thebabydino/pen/jENvVvg?editors=1100

Original: https://codepen.io/vedzzb/pen/KwPvNQj?editors=1100