CSS Funstuff: C-c-combo Breaker!!!

17438 단어 codenewbiedesigncsswebdev
안녕하세요 여러분! 저는 여러분에게 몇 가지 CSS 기술을 가르치고 멋진 것을 만드는 방법을 보여줄 또 다른 재미있는 CSS 튜토리얼을 가지고 돌아왔습니다!

시작하기 전에!



이 튜토리얼에서는 아직 익숙하지 않은 경우 CSS Combinator에 익숙해지는 것이 좋습니다. 이를 돕기 위해 내가 모아 놓은 무료 가이드를 다운로드할 수 있습니다from my Gumroad page..

업데이트: 이제 온라인으로 플레이할 수 있습니다!!!



재미있는 내용으로 건너뛰고 싶거나 CSS에 익숙하지 않거나 코딩하고 싶지 않은 경우...

당신은 할 수 있습니다 play the game from my website!

일단 속도가 붙으면...

다이빙하자!



우리는 항상 모든 요소에 대해 상자 크기, 여백 및 패딩 속성을 설정하는 것을 좋아하므로 CSS에 다음 코드를 추가할 수 있습니다.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


또한 이 자습서에서는 단일 사용자 지정 속성(--bg )을 사용할 것입니다. 이 속성은 콤보에서 요소의 배경색을 설정하는 데 사용됩니다.

:root {
   --bg: rgb(35, 135, 235);
}


마지막으로 설정 측면에서 본문에 몇 가지 속성을 설정해 보겠습니다. 이 중 일부는 시리즈의 다른 프로젝트와 공유되지만 나머지는 이번에 사용할 레이아웃에만 적용됩니다.

이를 위해 다음 CSS 코드를 사용하겠습니다.

body {
   align-items: center;
   background-color: rgb(35, 35, 35);
   color: white;
   display: flex;
   flex-flow: column;
   font-family: 'Lato', sans-serif;
   font-size: 1.365em;
   font-weight: 300;
   gap: 15px;
   height: 100vh;
   justify-content: center;
   letter-spacing: .135em;
   width: 100vw;
}


이 모든 장소에는 구축할 빈 캔버스가 있어야 합니다. 아직 연결하지 않은 경우 CSS를 HTML에 연결해야 합니다.

HTML 구축:



여기에는 "움직이는"부분이 많으므로 타이핑을 할 준비를 하거나... 그냥 복사하여 붙여넣기만 하면 됩니다. 예, 이것을 복사하여 붙여넣는 것이 좋습니다.

HTML 코드:

   <body>
      <h1>ComboBreaker</h1>
      <main>
          <input class="combo-0" type="checkbox">
          </input>
          <input class="combo-1" type="checkbox">
          </input>
          <input class="combo-2" type="checkbox">
          </input>
          <input class="combo-1" type="checkbox">
          </input>
          <input class="combo-0" type="checkbox">
          </input>
          <input class="combo-1" type="checkbox">
          </input>
          <input class="combo-2" type="checkbox">
          </input>
       </main>
   </body>


우리는 무엇을 만들고 있습니까?



음... 지금쯤이면 우리가 간단한 게임 같은 것을 만들고 있다는 것을 알 수 있을 것입니다. 예... CSS로!!!

원하는 경우 <main> 요소 아래에 목표를 추가할 수 있습니다.

<p>
   The goal is to try to turn all of the circles
   white. Can you unlock the combo?
</p>


스타일로 작업하기!



"게임"의 논리에 도달하기 전에 <main> , <h1> 및 <p> 요소에 간단한 스타일을 추가해 보겠습니다.

main {
  align-items: center;
  display: flex;
  gap: 15px;
  justify-content: center;
}

h1 {
  margin: 2.35vh;
}

p {
  margin: 7.35vh;
}


입력 및 관련 가상 요소의 스타일을 지정하여 후속 작업을 수행합니다.

[class*='combo']::after {
  aspect-ratio: 1/1;
  background-color: var(--bg);
  border-radius: 50%;
  content: '';
  display: block;
  position: absolute;
  inset: -50% 0 0 0;
  transition: all 1s ease-in-out;
  width: 50px;
}

[class*='combo']::before {
  aspect-ratio: 1/1;
  background-color: #ffffff00;
  border: 5px solid transparent;
  outline: 2px solid white;
  border-radius: 50%;
  content: '';
  display: block;
  position: absolute;
  inset: 435% 0 0 17px;
  transition: all 1s ease-in-out;
  width: 10px;
}

[class*='combo']:checked:before {
  aspect-ratio: 1/1;
  background-color: white;
  border: 2px solid transparent;
  outline: 2px solid white;
  border-radius: 50%;
  content: '';
  display: block;
  position: absolute;
  transition: all 1s ease-in-out;
}

input {
  aspect-ratio: 1/1;
  position: relative;
  width: 50px;
}


이것은 당신에게 다음과 같은 것을 줄 것입니다:



논리 구축



자, 여기 일이 까다로워지는 부분이 있습니다. 인정해야 합니다. 모든 것을 파악하는 데 시간이 좀 걸렸습니다.

그러나 CSS가 단순한 "설명 언어"이상이며 논리와 상호 작용도 있음을 보여주기 때문에 충분히 가치가 있습니다. 단순함을 위해 한 줄과 세 가지 가능한 조합으로만 유지했지만 원하는 만큼 복잡하게 만들 수 있으며 여전히 작동합니다.

CSS 결합자가 어떻게 작동하는지 이해하기만 하면 됩니다.

코드:



각 입력에 대해 처음에 추가한 변수를 수정합니다. 각각의 배경색을 설정합니다.

CSS 조합기의 힘 덕분에 모든 원을 흰색으로 바꾸는 조합은 단 하나뿐입니다(다른 조합을 찾지 않는 한)!

.combo-0:checked,
.combo-0:checked + .combo-1,
.combo-1:checked ~ .combo-0,
.combo-0:checked ~ .combo-2:checked,
.combo-2 + .combo-1:checked,
.combo-0:checked + .combo-1 {
  --bg: white;
}

.combo-0:checked ~ .combo-2 {
  --bg: rgb(35, 135, 35);
}

.combo-1:checked + .combo-2 {
  --bg: blue;
}

.combo-1,
.combo-1:checked + .combo-2:checked,
.combo-2:checked {
  --bg: red;
}


모두 합치면 다음과 같은 결과를 얻을 수 있습니다.



...그리고 그게 다야!



"게임"이 완성되었습니다! 하지만 플레이하지 않으면 재미가 없다! 당신은 콤보를 깨뜨릴 수 있습니까? 시도 해봐! 아래에 제가 가지고 노는 영상이 있습니다. 하지만 참고: 솔루션을 제공하지 않습니다!



내 Gumroad 페이지에서 grab the full project 할 수 있습니다. 조만간 업데이트 버전을 공개할 예정이니 많은 관심 부탁드립니다!
Dart/Flutter에서 이미지를 자르고 압축하는 방법
Unity에서 표준 자산인 Ethan처럼 캐릭터를 움직입니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage