분류 css

css-doodle : CSS로 패턴을 그리기 위한 웹 컴포넌트

컨텐츠 정보

  • 조회 547 (작성일 )

본문

CSS로 패턴을 그리기 위한 웹 컴포넌트.


doodle.png 


https://github.com/css-doodle/css-doodle 


https://css-doodle.com 


https://codepen.io/collection/XyVkpQ/


소개 


<css-doodle />은 Shadow DOM v1 및 Custom Elements v1을 기반으로 합니다. 현재 폴리필없이 최신 Chrome, Safari 및 Firefox에서 사용할 수 있습니다.


컴포넌트는 규칙(일반 CSS)에 따라 div 그리드를 생성합니다. CSS를 사용하여 해당 셀을 쉽게 조작하여 그래픽 패턴이나 애니메이션 그래프를 만들 수 있습니다. 제한은 CSS 자체의 제한입니다.


시작하기 


cdnjs에서 직접 스크립트를 포함 시키면 모든 준비가 완료됩니다.


<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.7.2/css-doodle.min.js"></script>


<css-doodle>

  /* put your code here */

</css-doodle>


cdnjs가 준비되지 않은 경우 다음을 사용하십시오.


<script src="https://unpkg.com/css-doodle@0.7.2/css-doodle.min.js"></script>


npm에서 설치하고 JavaScript로 모듈을 가져올 수도 있습니다.


npm install css-doodle


/* import it */

import 'css-doodle';


용법 


<css-doodle />의 구문은 CSS를 기반으로 하며 몇 가지 추가 유틸리티 함수와 속기 속성을 제공합니다.


Grid 


모눈의 행과 열 수는 요소의 모눈 속성에 의해 1 ~ 32 범위로 정의됩니다. 값이 없거나 0이 지정되면 기본 값은 1x1입니다.

<css-doodle grid="5">

  :doodle {

    grid-gap: 1px;

    width: 8em; height: 8em;

  }

  background: #60569e;

</css-doodle>


그리드가 1 차원 인 경우에만 행 또는 열이 최대 1024로 제한됩니다.


<css-doodle grid="35x1">

  :doodle {

    grid-row-gap: 1px;

    @size: 8em; /* width: 8em; height: 8em; */

  }

  background: #60569e;

  width: @rand(5%, 100%); /* from 5% to 100% by random */

</css-doodle>


다음과 같은 그리드 값 형식을 인식 할 수 있습니다.


  • grid = "0"
  • grid = "5"
  • grid = "20"
  • grid = "5x7"
  • grid = "5 x 7"
  • grid = "5,7"


@grid 속성을 사용하여 그리드를 설정하는 다른 방법이 있습니다.


<css-doodle>

  :doodle {

    @grid: 5 / 8em;

  }

  background: #60569e;

  transform: scale(@rand(.2, .9));

</css-doodle>


Selectors 


:doodle 


: doodle은 구성 요소 자체를 나타내는 특수 선택기입니다. 외부의 일반 CSS 파일은 스타일을 덮어 씁니다. (doodle 위에 마우스를 올려보세요)


:doodle { --s: 0 }

:doodle(:hover) { --s: 1 }


transition: .5s cubic-bezier(.175, .885, .32, 1.275);

transition-delay: @rand(500ms);

transform: translateY(calc(var(--s) * 100%));




css-doodle