Hero

↓

例 1

DEMO 01

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。

リサイズ可能

<Stack isContainer max-sz='full' min-h='50vh' bgc='base-2'>
  <Flow isWrapper hasGutter my='auto'>
    <HTML.p fw='bold' fz='xl'>DEMO 01</HTML.p>
    <Dummy length='l' lang='ja'/>
  </Flow>
</Stack>

↓

例2: ヘッダー・フッター・レイヤー要素を追加

Header

XXX

DEMO 02

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.

Footer

リサイズ可能

<Stack isContainer max-sz='full' min-h='68vh' g='20' c='white' pos='rel'>
  <Frame isLayer>
    <Media isLayer src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640'/>
    <Layer blur='4px' bgc='black:50%' />
  </Frame>
  <Flex jc='between' p='20' z='0' g='20'>
    <Box>Header</Box>
    <Flex g='20'>
      <div>XXX</div>
      <div>XXX</div>
    </Flex>
  </Flex>
  <Flow isWrapper hasGutter my='auto' z='0'>
    <HTML.p fw='bold' fz='xl'>DEMO 02</HTML.p>
    <Dummy length='l' />
  </Flow>
  <Center p='15' z='0'>Footer</Center>
</Stack>

↓

With ShapDivide & Layers

ShapDivider & Layers

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.

リサイズ可能

<Stack isContainer max-sz='full' hasGutter pos='rel' min-h='50vh' c='white' g='15'>
  <ShapeDivider viewBox='0 0 10 10' c='base' level='6' flip='Y' z='1'>
    <path d="M10,10V0L0,9.5V10L10,10z"/>
  </ShapeDivider>
  <Frame isLayer>
    <Media isLayer src='https://cdn.lism-css.com/img/a-2.jpg' alt='' width='960' height='640'/>
    <Layer blur='4px' bgc='black:50%' />
  </Frame>
  <Flow isWrapper py='30' my='auto' z='0'>
    <HTML.h lv='2' fw='bold' fz='xl'>ShapDivider & Layers</HTML.h>
    <Dummy length='l' />
  </Flow>
  <ShapeDivider viewBox='0 0 10 10' c='base' level='6' z='1'>
    <path d="M10,10V0L0,9.5V10L10,10z"/>
  </ShapeDivider>
</Stack>

↓

clipPathと組み合わせ、背景に画像があるコンテンツの境界を斜めにつなぐ

ShapDivider & Layers

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.

ShapDivider & Layers

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 max-sz='full' style={{ '--slopeH': 'clamp(2.5rem, 1.25rem + 5cqw, 5rem)' }}>
  <Stack isContainer max-sz='full' hasGutter pos='rel' min-h='50vh' c='white' g='15'>
    <ShapeDivider viewBox='0 0 10 10' h='var(--slopeH)' c='base' flip='Y' z='1'>
      <path d='M10,10V0L0,9.5V10L10,10z'></path>
    </ShapeDivider>
    <Frame isLayer>
      <Media isLayer src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
      <Layer bgc='black:50%' />
    </Frame>
    <Flow isWrapper py='30' pr={['0', '25%', '33%']} my='auto' z='0'>
      <HTML.h lv='2' fw='bold' fz='xl'>ShapDivider & Layers</HTML.h>
      <Dummy length='l' />
    </Flow>
    <Spacer h='var(--slopeH)' />
  </Stack>
  <Stack isContainer max-sz='full' hasGutter pos='rel' min-h='50vh' c='white' my-s='calc(0px - var(--slopeH))'>
    <Frame
      isLayer
      style={{
        clipPath: 'polygon(0 var(--slopeH), 0 100%, 100% 100%, 100% 0)',
      }}
    >
      <Media isLayer src='https://cdn.lism-css.com/img/a-3.jpg' alt='' width='960' height='640' />
      <Layer bgc='black:50%' />
    </Frame>
    <Spacer h='var(--slopeH)' />
    <Flow isWrapper py='30' pl={['0', '25%', '33%']} my='auto' z='0' ta='right'>
      <HTML.h lv='2' fw='bold' fz='xl'>ShapDivider & Layers</HTML.h>
      <Dummy length='l' />
    </Flow>
    <ShapeDivider viewBox='0 0 10 10' h='var(--slopeH)' c='base' flip='X' z='1'>
      <path d='M10,10V0L0,9.5V10L10,10z'></path>
    </ShapeDivider>
  </Stack>
</Box>

Examples

ヘッダー・フッター・レイヤー要素を追加

`is--layer`, `ShapeDivider` との組み合わせ

ShapDivider & Layers

ShapDivider & Layers

ShapDivider & Layers

別ページで確認する

Hero

Examples

ヘッダー・フッター・レイヤー要素 を追加

is--layer, ShapeDivider との組み合わせ

ShapDivider & Layers

ShapDivider & Layers

ShapDivider & Layers

別ページで確認する

ヘッダー・フッター・レイヤー要素を追加

`is--layer`, `ShapeDivider` との組み合わせ