#webdevelopment

#CSS #tinyCSStip #blending

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
}

Suite du fil

**Ana Tudor** @anatudor@mastodon.social · 2 h *

2 h *

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

**Plone** @plone@plone.social · 14 h

14 h

Plone @plone@plone.social

Live Now: Plone Distributions, the Right Way!
Join @ericof as he walks you through how to create and manage Plone Distributions the right way — and how Products.CMFPlone is powering the next generation of custom Plone sites.

Watch it live: https://www.youtube.com/watch?v=W0gDKhuIXPk

#WPD2025 #Plone #Python

**Ana Tudor** @anatudor@mastodon.social · 16 h

16 h

#CSS #borderRadius #coding

Ever want a box where the padding or content box (inner) rounding is bigger than the border-radius?

You can do it with a single element, no pseudos! Here's my take on it, including the particular case where you don't want any outer rounding, but sharp corners https://www.reddit.com/r/css/comments/1jvs81s/comment/mmeibts/

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

div {
--r-inner: 4em; /* inner box corner rounding radius */
--bw-fake: 1em; /* fake (visible) border width along the edges */
/* real border width value that we set */
--bw-real: calc((var(--bw-fake) + var(--r-inner))*sqrt(2));
/* difference betwen real set border width and visible one */
--d: calc(var(--bw-real) - var(--bw-fake));
margin: calc(-1*var(--d));
border: solid var(--bw-real) brown;
padding: 0;
border-radius: calc(var(--bw-real)*sqrt(2));
background: beige;
clip-path: inset(var(--d) /* use round if you want an outer radius too */)
}

Example screenshot. Outer box rounding is smaller than that of inner one.

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

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

#tinyCSStip `clip-path` or `mask` are applied after `filter`.

This means we cannot clip/ mask, then add a `drop-shadow()` on the same element for the clipped/ masked shape.

We need to apply the `filter` on a parent of the clipped/ masked (pseudo-)element.

Diagram of how browsers apply filter and clip-path when they’re set on the same element. First the drop-shadow() filter is applied on the initial rectangular box, then the element with drop-shadow() is clipped, cutting out the drop-shadow() too.

Screenshot of the linked demo showing how applying the filter on the parent of the clipped (pseudo-)element can solve the problem if this parent has no other visible parts (borders, backgrounds, shadows).

#CSS #filter #cssFilter

**Kote Isaev** @koteisaev@mastodon.online · 1 j

Kote Isaev @koteisaev@mastodon.online

Many people across the globe speak about the ways to #unplugUSservices #UnplugUSA and alike.

Because of React being product of Facebook, this question came to mind: what kind of alternatives to React-based development flows are exist? With rich ecosystems of components?
With some syntax that at least resemble the JSX, for an easier learning curve? (tagged templates of html counts too).

#programming #webDevelopment

**NobleMajo** @NobleMajo@mastodon.social · 1 j

NobleMajo @NobleMajo@mastodon.social

For REST API's written in Go , you should take a quick look at github.com/go-fuego/fuego. Getting an OpenAPI-Spec & a SwaggerUI without any extra effort, is a huge win!

#REST #API #GoLang

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

#CSS #clipPath #cssClipPath

Here's a quick breathing box demo with `clip-path: shape()` on @codepen.io: https://codepen.io/thebabydino/pen/ZYENVOQ

Working in Chrome 135 and Safari 18.4!

GIF

Suite du fil

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

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

Suite du fil

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

By the way, the code is heavily commented https://codepen.io/thebabydino/pen/MYWxeew

So you can see how it works without JS, without wrapping individual elements into spans, just letting it wrap naturally. And without covers that wouldn't allow for an image backdrop behind the text.

GIF

#CSS #SVG #filter

Suite du fil

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

#svgFilter #cssGradient #coding

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.

**Green Webpage** @greenwebpage@mastodon.social · 2 j

Green Webpage @greenwebpage@mastodon.social

This guide will help explain how to check and update the Python version on Ubuntu 24.04 by employing any of the available methods.

Read more:
https://greenwebpage.com/community/how-to-check-and-update-the-python-version-on-ubuntu-24-04/

Greenwebpage Community · 6 jHow to Check and Update the Python Version on Ubuntu 24.04This guide will help explain how to check and update the Python version on Ubuntu 24.04 LTS also known as Noble Numbat.

#python #webdevelopment #ubuntu

Suite du fil

**Ana Tudor** @anatudor@mastodon.social · 2 j

#cssGradient #cssMask #coding

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.

**Ana Tudor** @anatudor@mastodon.social · 2 j *

2 j *

#clipPath #cssClipPath #code

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.

**Nube Colectiva** @nubecolectiva@mastodon.social · 2 j

Nube Colectiva @nubecolectiva@mastodon.social

6 Useful Commands in Ubuntu !
Zoom: https://nubecolectiva.com/comunidad/flyers/6-useful-commands-in-ubuntu/

6 Comandos Útiles en Ubuntu !
Zoom: https://nubecolectiva.com/comunidad/flyers/comandos-utiles-ubuntu/

#programming #coding #webdevelopment

**Fossery Tech** @fosserytech@social.linux.pizza · 2 j

Fossery Tech @fosserytech@social.linux.pizza

FosseryWeb going fully JavaScript-free! (Post 1/4)

**Ana Tudor** @anatudor@mastodon.social · 2 j

Here's a quick responsive clover layout on @codepen https://codepen.io/thebabydino/pen/RNwmjEQ?editors=0100

4 leaf clover layout in the wide screen case. The four leaf items are arranged on a 2⨯2 grid, with a smaller border-radius in the middle of the grid, items on the secondary diagonal smaller and the content aligned depending on row and column.

The narrow screen case layout. All four leaf items are one underneath the other, all using the same border-radius for all corners and the same alignment.

#CSS #layout #cssLayout

**Vivaldi** @Vivaldi@vivaldi.net · 2 j