Layer

A component that outputs .is--layer by default (an alias for <Lism isLayer>).

Props

Property	Description
`blur`,`contrast`,`brightness`,`grayscale`,`hueRotate`,`invert`,`saturate`,`sepia`	These values are combined and passed to `style.backdropFilter`.

Import

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

Usage

↓

Example

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>

<div class='l--box -pos:rel -py:40'>
  <p class='-fz:2xl -fw:bold -ta:center -lts:l -o:-30'>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>

Using backdrop-filter

The <Layer> component includes additional support for specifying individual backdrop-filter properties — such as blur — separately.

↓

Applying a blur to the background

BACKGROUND

<Box pos='rel' p='40'>
  <HTML.p fz='2xl' fw='bold' ta='center'>BACKGROUND</HTML.p>
  <Layer blur='3px' />
</Box>

↓

Adjusting the background color tone

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>

Media Layer

Here is a layout example using .is--layer to place an image as a background behind content.

↓

Example

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>

<div class='l--box -pos:rel -py:50 -px:40'>
  <div class='l--frame is--layer'>
    <img class='a--media' src='https://cdn.lism-css.com/img/a-2.jpg' 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:rel -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>