コンテンツにスキップ
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='15' 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 contrast='1.1' sepia='0.4' grayscale='0.4'/>
  <HTML.p pos='abs' b='0' r='0' p='20' lh='1' c='white' fz='xs' o='-10'>Photo by xxxxxx</HTML.p>
</Frame>

メディアレイヤー

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

.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='rel' py='50' px='40'>
  <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='30' c='white'>
    <Dummy length='s' />
    <Dummy length='l' />
  </Stack>
</Box>