Layer
.is--layerをデフォルトで出力するコンポーネント(<Lism isLayer>のエイリアス)です。
| プロパティ | 説明 |
|---|---|
blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepia | これらをまとめて連結し、 style.backdropFilter に受け渡します。 |
Import
Section titled “Import”import { Layer } from 'lism-css/react'; 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>