Layer (is--layer)

is--layer は、absoluteで親要素の上に被せて配置するオーバーレイ用のクラスです。

CSS

.is--layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

Lismコンポーネントでの使い方

isLayer プロパティでどのコンポーネントからでも呼び出せるようになっています。

プロパティ	出力
`isLayer`	`is--layer`

さらに、<Lism isLayer> のエイリアスとして、<Layer> も用意しています。

Import

import { Layer } from 'lism-css/react';

import { Layer } from 'lism-css/astro';

Usage

使用例

↓

使用例

BACKGROUND

Layer Contents…

<Box pos="relative" py="40">
  <Text fz="2xl" fw="bold" ta="center" lts="l" o="ppp">
    BACKGROUND
  </Text>
  <Layer p="15" bgc="purple:10%">
    <p>Layer Contents...</p>
  </Layer>
</Box>

<div class="l--box -pos:relative -py:40">
  <p class="-fz:2xl -fw:bold -ta:center -lts:l -o:ppp">BACKGROUND</p>
  <div class="is--layer -p:15 -bgc" style="--bgc: color-mix(in srgb, var(--purple) 10%, transparent)">
    <p>Layer Contents…</p>
  </div>
</div>

backdrop-filterの活用

style プロパティで backdropFilter を直接指定できます。

↓

背景にブラーをかける

BACKGROUND

<Box pos="relative" p="40">
  <Text fz="2xl" fw="bold" ta="center">
    BACKGROUND
  </Text>
  <Layer style={{ backdropFilter: 'blur(3px)' }} />
</Box>

<div class="l--box -pos:relative -p:40">
  <p class="-fz:2xl -fw:bold -ta:center">BACKGROUND</p>
  <div class="is--layer" style="backdrop-filter: blur(3px)"></div>
</div>

↓

背景の色味を変える

Photo by xxxxxx

<Frame ar="2/1" pos="relative">
  <img src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" alt="" width="960" height="640" />
  <Layer style={{ backdropFilter: 'contrast(1.1) sepia(0.4) grayscale(0.4)' }} />
  <Text pos="absolute" b="0" r="0" p="20" hl="0" c="white" fz="xs" o="p">
    Photo by xxxxxx
  </Text>
</Frame>

メディアレイヤー

is--layerを使ってコンテンツの背景に画像を配置するレイアウトを組んでみます。

↓

例

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

<Box pos="relative" py="50" px="40">
  <Frame isLayer>
    <Media src="https://cdn.lism-css.com/img/2SvHdIk1KOOR.webp" alt="" width="960" height="640" loading="lazy" decoding="async" />
  </Frame>
  <Layer bgc="black:50%" />
  <Stack pos="relative" g="30" c="white">
    <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.
    </p>
  </Stack>
</Box>

<div class="l--box -pos:relative -py:50 -px:40">
  <div class="l--frame is--layer">
    <img src="https://cdn.lism-css.com/img/2SvHdIk1KOOR.webp" alt="" width="960" height="640" loading="lazy" decoding="async" />
  </div>
  <div class="is--layer -bgc" style="--bgc: color-mix(in srgb, var(--black) 50%, transparent)"></div>
  <div class="l--stack -pos:relative -g:30 -c" style="--c: var(--white)">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi
      provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
    </p>
  </div>
</div>