그리드 자동 흐름의 강력한 기능인 밀도를 탐색해 본 적이 있습니까? 무작위로 생성된 값(설정된 범위 내로 제한됨)과 결합하면 그리드-열 및 그리드-행 속성을 사용하여 멋진 그리드 기반 아트를 만들 수 있습니다. 뛰어들어 보세요!
먼저 기본 그리드 구조를 만들어 보겠습니다.
main {
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill,
minmax(var(--w, 4cqi), 1fr));
}
이때 --w는 정의되지 않았으므로 기본값(4cqi)을 사용합니다. 초기 그리드의 모습은 다음과 같습니다.
다음으로 그리드를 여러 개의 노드로 채울 것입니다. JavaScript로 렌더링할 때 노드당 2개의 변수를 추가합니다.
JavaScript에서 임의의 값을 생성하는 방법은 다음과 같습니다.
const random = (min, max) =>
Math.random() * (max - min) + min
const column = () =>
`--gc:${Math.floor(random(0, 4))};`
const row = () =>
`--gr:${Math.floor(random(0, 3))};`
CSS에서는 다음과 같은 사용자 정의 속성을 적용합니다.
b {
background: oklch(var(--l) var(--c) var(--h) / var(--a));
grid-column: span var(--gc);
grid-row: span var(--gr, 1);
}
작은 도우미 메소드를 사용하여 oklch에 임의의 색상을 추가해 보겠습니다.
const color = () => `--l:${
random(0, 100)}%;--c:${
random(0, 0.5)};--h:${
random(0, 60)};--a:${
random(0.2, 1)};`
이제 다음 내용을 얻을 수 있습니다.
grid-auto-flow: 촘촘합니다!
감사합니다.더 동적으로 만들기 위해 회전 및 크기 조정과 같은 변환을 추가해 보겠습니다.
b {
rotate: var(--r);
scale: var(--s);
}
JavaScript에서는 무작위 변환 값을 생성합니다.
const transform = () =>
`--r:${random(-2, 3)}deg;
--s:${random(0.8, 1.2)};`
확인해 보세요:
멋지네요! 이제 한 단계 더 발전시키기 위해 멋진 SVG 필터를 추가해 보겠습니다.
JavaScript에서는 노드별로 무작위 필터를 선택하는 또 다른 작은 도우미 메서드를 추가합니다.
const filter = () =>
`--url:url(#${
[
"pencilTexture",
"pencilTexture2",
"pencilTexture3",
"pencilTexture4",
][Math.floor(random(0, 4))]
});`
이는 다음을 제공합니다.
이제 --w 속성과 요소 수만 조정하면 매우 다양한 예술 작품을 생성할 수 있습니다.
또는:
색상 방법으로 시작 및 중지 값을 조정할 수도 있습니다.
여기 Codepen 데모가 있습니다. 아트워크 아래에 컨트롤을 추가했으므로 속성을 쉽게 조정할 수 있습니다.
위 내용은 CSS 그리드 및 SVG 필터를 사용한 아트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
