50일 CSS 예술의 5가지 교훈

50일 전에 저는 프로젝트100 Days Project Scotland를 시작했습니다. 매일 한 폭의 CSS 예술 작품을 창작했고 100일 동안 지속되었습니다.나는 여기에 나의 동기를 썼다.

Join Me for 100 Days of Pure CSS

Suzanne Aitchison ・ May 16 '20 ・ 2 min read

#css #html #webdev #codepen

이 프로젝트에 앞서 나는 어떤 CSS 예술도 진정으로 처리한 적이 없다. 지금까지 이것은 재미있는 여정이다!오늘은 중간에 제가 지금까지 배운 최신 지식을 공유하고 싶습니다.

지금까지 5대 공부를 했습니다.

1. 간단함이 가장 효과적이다
지난 50일 동안 저는 모든 작품에 서로 다른 시간과 정력을 들였습니다. 어떤 날은 복잡한 형상, 애니메이션 등에 끌렸습니다.
하지만 지금까지 내가 가장 인기 있는 작품들은 가장 간단했다.이 양처럼, 그것은 거의 두 가지 색깔과 많은 동그라미로 이루어져 있다.
따라서, 나는 CSS 예술을 사용하기 시작한 다른 모든 사람들이 기본적인 형태로 만들 수 있는 그림에 주의를 기울이고, 그림이 더욱 사람들의 주목을 끌 수 있도록 도와줄 수 있기 때문에, 팔레트를 최대한 줄이는 것을 권장한다.

2. 편집 경로가 매우 유용하다
프로젝트를 시작하기 전에 CSS 속성clip-path을 사용할 필요가 없습니다.나는 심지어 내가 들은 적이 있는지도 확실하지 않다.
Clip path에서는 HTML 요소의 어떤 부분이 표시되는지 결정하는 모양을 정의할 수 있습니다.너는 그것으로 여러 가지 다른 모양을 만들 수 있다.보기MDN web docs for clip-path.
더 좋은 것은 편리한 UI Clippy 에서 이런 모양을 만들 수 있는 아주 좋은 도구가 있다는 것이다.지난 50일 동안 나는 이 공구를 자주 사용했다😄
예를 들어 나는 그것으로 무작위 잎 모양을 만들어서 개미가 휴대할 수 있도록 했다.

3. 그래디언트는 시간을 절약할 수 있다(과div)
나는 줄무늬나 서로 인접한 몇 개의 다른 색깔의 네모가 필요하다는 것을 자주 발견한다.내가 이 프로젝트를 시작하기 전에, 나는 CSS의 점차적인 변화가 이 방면에서 너에게 얼마나 큰 도움을 줄 수 있는지 완전히 이해하지 못했다. 특히 점차적인 변화에 고정된 블록을 추가해서 단단한 줄무늬를 만드는 것이지, 색깔이 점차적인 것에서 다른 점차적인 것으로 변하는 것이 아니다.
예를 들어 나는 linear-gradient와 아주 온화한 등급을 사용하여 이 앵무새의 꼬리와 날개 줄무늬를 만들었다.
arepeating-linear-gradient 이 아이스크림 통에 반대 방향으로 일련의 줄무늬를 반복한다.

4. CSS 변수는 범위가 가능하며 유용함
나는 이전에 CSS variables를 사용했고 이 프로젝트에서 바로 그것을 사용했다. 왜냐하면 그것은 생활을 더욱 쉽게 하기 때문이다. 예를 들어 한 곳에서 모든 색을 편집하고 정의/사용은 다음과 같다.

:root {
  --ice-cream-color: #FCB8C3;
  --ripple-color: #FC889B;
  --cone-color: #F7C077;
  --waffle-color: #F3A63A;
}

.scoop {
  background: var(--ice-cream-color);
}

나는 보통 그림 속의 몇 곳에서 같은 색을 사용하는데, 한 곳에서 색을 바꾸는 것이 큰 장점이다🙏
그러나 나는 이전에 진정으로 CSS 변수를 사용하지 않고 범위를 한정하는 방식으로 그것들을 사용했다.위에서 설명한 것처럼 변수 값을 :root에 선언할 필요는 없습니다. 이 범위에서 적용될 CSS 특정 선택기에서 선언할 수 있습니다.
예를 들어 이 톱니바퀴 애니메이션에서 세 개의 톱니바퀴는 하나의 종류를 공유하는데 이 종류는 그들의 대부분 외관과 행위를 정의한다.크기와 색상을 약간 다르게 만들기 위해 범위가 한정된 CSS 변수를 사용했습니다. 예를 들면.

.cog-one {
  --cog-color: #898888;
  --cog-outer-size: 50px;
}

.cog-two {
  --cog-color: #A16036;
  --cog-outer-size: 40px;
}

.cog {
  border: var(--cog-outer-size) solid var(--cog-color);
}

5. 영감은 평범함에서 온다
도전의 상당 부분, 특히 최초의 도전은 도대체 무엇을 해야 할지 생각하려는 것이다.그것은 반드시 충분히 간단해야 한다. 나는 합리적인 시간 범위 내에서 완성할 수 있지만, 또한 충분히 재미있고 유쾌해야 하며, 좀 사람들의 주목을 끌기를 바란다.
사실은 가장 지루한 일들이 가장 재미있는 인코딩과 공유라는 것을 증명한다😄 지금까지 나의 창작에는 나의 세탁기, 차 한 잔, 커피 한 잔과 토스트기 등 매우 평범한 것들이 포함되어 있다.

가입하고 싶으세요?
저는 프로젝트의 하반부를 기대하고 있습니다. 만약에 영감이 있으면 CSS 예술을 시도해 보겠습니다. 저도 기꺼이 당신을 따라가겠습니다!
너는 my CodePen profile 또는 나에게 연락해서 나의 창작에 관심을 가질 수 있다.
나는 코드펜이 DEV와 같이 나를 매우 지지하는 지역사회라는 것을 알게 되었다. 나는 그곳에서 많은 격려와 동력을 얻었다.만약 네가 한번 시도하기로 결정한다면 너도 같은 결과를 발견할 수 있기를 바란다.
그곳에서 당신을 만날 수 있기를 바랍니다. 지금 나는 당신에게 나의 50일째 창작인 축하 풍선을 남겨 줄 것입니다.👋🎉🎈