backdrop-filter property added

[harshdoesdev]

backdrop-filter property allows us to apply various filters as the backdrop of a container (like blur, brightness, sepia, etc). It is a very cool property that fastn should support. It can be used for implementing Glassmorphism design principles. Many fastn folks were requesting this property and there is also a discussion advocating for this feature.

Example:

-- ftd.backdrop-filter bdf:
blur.px: 10
;; brightness.percent: 50
;; contrast.percent: 40
;; grayscale.percent: 40
;; invert.percent: 70
;; opacity.percent: 20
;; sepia.percent: 90
;; saturate.percent: 80


;; All of the above properties (which have been commented) are supported



-- boolean $blur-image: true



-- ftd.image: https://picsum.photos/200
id: test
width.fixed.px: 300
height.fixed.px: 300



-- ftd.row:
anchor.id: test
width.fixed.px: 300
height.fixed.px: 300
backdrop-filter if { blur-image }: $bdf


-- ftd.text: >> Blur/Unblur Image <<
$on-click$: $ftd.toggle($a = $blur-image)

Output:

When blur filter is applied

When blur filter is not applied

[amitu]

-- ftd.backdrop-filter bdf:
blur.px: 10
brightness.percent: 50

Is this supported? More than one properties can be applied?

Also

-- ftd.row:
backdrop-filter.blur.px if { blur-image }: 10

Is easier to write. This makes it easy if you want to apply only one filter. If we want to add multiple filters we should have:

-- ftd.row:
backdrop-filter.multi if { blur-image }: $bdf

This way simple case (one filter) is simple, no need to create a variable, and complex case (multiple filters) is possible.

[harshdoesdev]

-- ftd.backdrop-filter bdf:
blur.px: 10
brightness.percent: 50

Is this supported? More than one properties can be applied?

Also

-- ftd.row:
backdrop-filter.blur.px if { blur-image }: 10

Is easier to write. This makes it easy if you want to apply only one filter. If we want to add multiple filters we should have:

-- ftd.row:
backdrop-filter.multi if { blur-image }: $bdf

This way simple case (one filter) is simple, no need to create a variable, and complex case (multiple filters) is possible.

Yes, more than one properties can be applied. and the one liner syntax looks really cool, will definitely implement it once I reach home.

[Heulitig]

-- ftd.backdrop-filter bdf:
blur.px: 10
brightness.percent: 50

Is this supported? More than one properties can be applied?

Also

-- ftd.row:
backdrop-filter.blur.px if { blur-image }: 10

Is easier to write. This makes it easy if you want to apply only one filter. If we want to add multiple filters we should have:

-- ftd.row:
backdrop-filter.multi if { blur-image }: $bdf

This way simple case (one filter) is simple, no need to create a variable, and complex case (multiple filters) is possible.

I have adjusted the type of backdrop-filter to or-type to accept both single filter values as well as multi values through records

[apneduniya]

Finally 🔥