Decorations

装飾ボックスの作成例を紹介します。

このページは準備中です…

Usage

Call

mr:auto は rtl言語でも同じ方向になるように、left,rightの方向指定を使ってます。

↓

Call

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能

<Grid ta='l'>
  <Decorator
    size='1.25em'
    bd='left'
    rotate='45deg'
    transformOrigin='left bottom'
    mr='auto'
  />
  <Box p='30' mr='auto'>
    <Dummy length='s'/>
  </Box>
  <Decorator
    size='1.25em'
    bd='left'
    rotate='-45deg'
    transformOrigin='left top'
    mr='auto'
  />
</Grid>
<Grid as={Grid}>
  <Decorator
    size='1.25em'
    bd='right'
    rotate='-45deg'
    transformOrigin='right bottom'
    ml='auto'
  />
  <Box p='30' ml='auto'>
    <Dummy length='xs' />
  </Box>
  <Decorator
    size='1.25em'
    bd='right'
    rotate='45deg'
    transformOrigin='right top'
    ml='auto'
  />
</Grid>
<Spacer h='10' />
<Flex variant='ltr' jc='center' ta='c'>
  <Decorator
    fxsh='0'
    size='1.25em'
    bd='top'
    rotate='-45deg'
    transformOrigin='right top'
  />
  <Box px='20' py='5'>
    <Dummy length='xs' />
  </Box>
  <Decorator
    fxsh='0'
    size='1.25em'
    bd='top'
    rotate='45deg'
    transformOrigin='left top'
  />
</Flex>
<Spacer h='10' />
<Flex
  variant='ltr'
  jc='center'
  ai='fe'
  ta='c'
>
  <Decorator
    fxsh='0'
    size='1.25em'
    bd='bottom'
    rotate='45deg'
    transformOrigin='right bottom'
  />
  <Box px='20' py='5' fxg=''>
    <Dummy length='s' />
  </Box>
  <Decorator
    fxsh='0'
    size='1.25em'
    bd='bottom'
    rotate='-45deg'
    transformOrigin='left bottom'
  />
</Flex>

Kakko

↓

Kakko

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

リサイズ可能

<Box p='40' pos='r'>
  <Dummy />
  <Decorator size='1.25em' pos='a' t='0' l='0' bd='l,t' />
  <Decorator size='1.25em' pos='a' r='0' b='0' bd='r,b' />
</Box>
<Box p='40' pos='r'>
  <Dummy />
  <Decorator pos='a' t='0' l='0' w='1em' h='100%' bd='l,y' />
  <Decorator pos='a' t='0' r='0' w='1em' h='100%' bd='r,y' />
</Box>

Sticky

↓

Sticky

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

リサイズ可能

<Grid gd='"content ." / auto 1fr'>
  <GridItem
    ga='content'
    minW='8em'
    maxW='30em'
    bgc='base-2'
    p='30'
    w='fit-content'
    bd='r'
    bdw='.5em'
  >
    <Dummy />
  </GridItem>
  <GridItem
    as={Decorator}
    ga='content'
    w='50%'
    maxW='12em'
    h='1rem'
    ml='auto'
    mt='auto'
    z='-1'
    bgc='hsl(var(--sh-hsl) / 0.25)'
    css={{ filter:'blur(4px)',rotate:'4deg', transformOrigin: 'left bottom', translate: '-4px -4px' }}
  />
</Grid>