FilterLayer

背景にエフェクト効果を加えるための、<Layer>の拡張モジュール。

backdrop-filterの主要なプロパティをオブジェクトで指定できるようになっています。

対応するHTML構造

<div class="l--layer l--layer--filter">...</div>

Props

backdropFilterの個別指定
- blur,
- contrast,
- brightness,
- grayscale,
- hue-rotate,
- invert,
- saturate,
- sepia,
backdropFilter : css.backdropFilterに直接値を渡します。filterトークンを指定する時にはこちらを使います。
texture?

backdropFilterの指定がある時、blur, brightnessなどの個別指定は無視されます。

Import

import { FilterLayer } from '@loos/lism-core';

DEMO

背景にブラーをかける

BACKGROUND

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能エリアです ↑

<Stack pos="relative" p={20} gap={20}>
	<Text fz="4xl" fw="bold" ta="center">BACKGROUND</Text>
	<DammyText />
	<FilterLayer blur="3px" brightness="1.1" />
</Stack>

画像の色味を変える

Photo by xxxxxx.

Photo by xxxxxx.

Photo by xxxxxx.

リサイズ可能エリアです ↑

<Frame aspect="16/9">
	<Media src="/img/demo-img.jpeg" alt="" width='960' height='640' />
	<FilterLayer brightness={1.2} contrast={0.8} grayscale={1}/>
	<Layer position="bottom right" p='box:s' c="white" fz="xs" opacity="0.8">Photo by xxxxxx.</Layer>
</Frame>
<Frame aspect="16/9">
	<Media src="/img/demo-img.jpeg" alt="" width="960" height="640" />
	<FilterLayer contrast="1.2" sepia="25%" />
	<Layer position="bottom right" p='box:s' c="white" fz="xs" opacity="0.8">Photo by xxxxxx.</Layer>
</Frame>
<Frame aspect="16/9">
	<Media src="/img/demo-img.jpeg" alt="" width="960" height="640" />
	<FilterLayer ml="auto" invert="1" grayscale="20%" w="50%" />
	<Layer position="bottom center" p='box:s' c="white" fz="xs" opacity="0.8">Photo by xxxxxx.</Layer>
</Frame>

filterトークン

リサイズ可能エリアです ↑

<Frame aspect="cinema">
	<Media src="/img/demo-img.jpeg" alt="" width="960" height="640" />
	<FilterLayer backdropFilter='blur' />
</Frame>
<Frame aspect="cinema">
	<Media src="/img/demo-img.jpeg" alt="" width="960" height="640" />
	<FilterLayer backdropFilter='lighten' />
</Frame>

Layer Medialayer