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

Layer

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

Props

Section titled “Props”
プロパティ説明
blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepiaこれらをまとめて連結し、 style.backdropFilter に受け渡します。

Import

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

Usage

Section titled “Usage”
↓
使用例

BACKGROUND

Layer Contents…

<Box pos='rel' py='40'>
  <HTML.p fz='2xl' fw='bold' ta='center' lts='l' o='-30'>BACKGROUND</HTML.p>
  <Layer p='20' bd bds='dashed' bgc='purple:10%'>
    <p>Layer Contents...</p>
  </Layer>
</Box>

backdrop-filterの活用

Section titled “backdrop-filterの活用”

<Layer>コンポーネントでは、backdrop-filterで使用できるblurなどの主要成分を個別に指定できるように追加調整されています。

↓
背景にブラーをかける

BACKGROUND 

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

Photo by xxxxxx 

<Frame ar='2/1' pos='rel'>
  <img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
  <Layer brightness={1.2} contrast={0.8} grayscale={1}/>
  <HTML.p pos='abs' b='0' r='0' p='20' lh='1' c='white' fz='xs' o='-20'>Photo by xxxxxx</HTML.p>
</Frame>
<Frame ar='2/1' pos='rel'>
  <img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
  <Layer contrast='1.2' sepia='25%' />
</Frame>
<Frame ar='2/1' pos='rel'>
  <img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
  <Layer mx-s='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='rel' py='50'>
  <Frame isLayer>
    <Media src="https://cdn.lism-css.com/img/a-2.jpg" alt="" width='960' height='640' loading='lazy' decoding='async' />
  </Frame>
  <Layer bgc='black:50%' />
  <Stack pos='rel' 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='rel' py='50'>
  <Media isLayer src="https://cdn.lism-css.com/img/a-2.jpg" alt="" width='960' height='640' loading='lazy' decoding='async' />
  <Layer bgc='rgb(0 0 0 / 50%)' />
  <Stack pos='rel' g='40' c='#fff'>
    <Dummy/>
    <Dummy length='l' />
  </Stack>
</Frame>