コンテンツにスキップ
Lism CSS

Layer

.is--layerをデフォルトで出力するコンポーネント(<Lism isLayer>のエイリアス）です。

Props

Section titled “Props”
プロパティ説明
layout展開したい Lismコンポーネント を指定できます。
blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepiaこれらをまとめて css.backdropFilter に受け渡します。

Import

Section titled “Import”
import { Layer } from 'lism-css';

Usage

Section titled “Usage”
↓
使用例

BACKGROUND

Layer Contents…

<Box pos='r' py='40'>
  <Text fz='2xl' fw='bold' ta='c' lts='l' op='low'>BACKGROUND</Text>
  <Layer p='20' bd bds='dashed' bgc='purple:10%'>
    <p>Layer Contents...</p>
  </Layer>
</Box>

backdropFilterの活用

Section titled “backdropFilterの活用”

Lismコンポーネントでは、css.backdropFilter に指定した値をbackdrop-filterとしてインラインスタイルを出力できるようになっていますが、<Layer>コンポーネントでは、この機能をより活用しやすいようになっています。

↓
背景にブラーをかける

BACKGROUND 

<Box pos='r' p='40'>
  <Text fz='2xl' fw='bold' ta='c'>BACKGROUND</Text>
  <Layer blur='3px' />
</Box>
↓
背景の色味を変える

Photo by xxxxxx 

<Frame ar='2/1' pos='r'>
  <img src='/img.jpg' alt='' width='960' height='640' />
  <Layer brightness={1.2} contrast={0.8} grayscale={1}/>
  <Text pos='a' b='0' r='0' p='20' lh='1' c='white' fz='xs' op='mid'>Photo by xxxxxx</Text>
</Frame>
<Frame ar='2/1' pos='r'>
  <img src='/img.jpg' alt='' width='960' height='640' />
  <Layer contrast='1.2' sepia='25%' />
</Frame>
<Frame ar='2/1' pos='r'>
  <img src='/img.jpg' alt='' width='960' height='640' />
  <Layer mis='auto' invert='1' grayscale='20%' w='50%' />
</Frame>

メディアレイヤー

Section titled “メディアレイヤー”

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

↓
例

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

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. 

<Box hasGutter pos='r' py='50'>
  <Frame isLayer>
    <Media src="/img/img-3.jpg" alt="" width='960' height='640' loading='lazy' decoding='async' />
  </Frame>
  <Layer bgc='black:50%' />
  <Stack pos='r'g='40' c='white'>
    <Dummy/>
    <Dummy length='l' />
  </Stack>
</Box>

↓これでも同じことができます。

↓
例

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

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. 

<Frame hasGutter pos='r' py='50'>
  <Media isLayer src="/img/img-3.jpg" alt="" width='960' height='640' loading='lazy' decoding='async' />
  <Layer bgc='rgb(0 0 0 / 50%)' />
  <Stack pos='r' g='40' c='#fff'>
    <Dummy/>
    <Dummy length='l' />
  </Stack>
</Frame>