CSS 전투: #5 - 산성비

이 기사에서는 Acid Rain에 대한 CSS Battle CSS 과제를 해결합니다. 먼저 problem을 살펴보겠습니다.

문제

CSS 속성만 사용하여 다음 컨테이너를 만들어야 합니다.

해결책

이제 솔루션과 이를 달성하는 방법을 살펴보십시오.

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

세 개의 div가 있으며 각각 하나의 빗방울을 나타냅니다.

CSS

이제 먼저 Body 스타일을 지정해 보겠습니다.

body {
  margin: 0;
  background: #0b2429;
}

그런 다음 빗방울의 스타일을 지정할 수 있습니다.

.one, .two, .three {
  position: absolute;
  width: 120;
  height: 120;
  background: #998235;
  border-radius: 50% 0 50% 50%;  
}
.one, .three {
  background: #f3ac3c; 
}

위의 코드에서는 빗방울의 높이와 너비를 120px로 초기화하고 border-radius 속성을 적용하여 완벽한 빗방울 모양을 만듭니다.

이제 z-index 를 사용하여 모든 빗방울의 위치를 ​​개별적으로 정의하겠습니다.

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

.one {
  left: 20%;
  top: 50%;
  z-index: 11;
}
.two {
  z-index: 10;
  left: 35%;
  top: 30%;
}
.three {
  transform: rotate(180deg);
  left: 50%;
  top: 10%;
  z-index: 9;
}

이것이 이 CSS 문제를 해결하는 데 필요한 전부입니다.

In CSS Battle you can use 100 instead of 100px. You don't need to define px in CSS. However, if you are using rem or % then you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info visit here

코데펜

대체 솔루션

문자 수가 적고 단순하기 때문에 이 솔루션을 사용한 대안 솔루션이 많을 수 있습니다.

HTML

<p t></p>
<p m></p>
<p b></p>

여기서는 <p> 태그를 사용하고 있으며 그 안에 있는 t는 상단, m는 중간, b는 하단 빗방울을 나타냅니다.

CSS

* {
  margin: 0;
}
body {
  background: #0b2429;
}
p[t],
p[m],
p[b] {
  position: absolute;
  width: 120px;
  height: 120px;
  background: #998235;
  border-radius: 50% 0 50% 50%;
}
p[t],
p[b] {
  background: #f3ac3c;
}
p[t] {
  transform: rotate(180deg);
  left: 50%;
  top: 10%;
  z-index: 9;
}
p[b] {
  left: 20%;
  top: 50%;
  z-index: 11;
}
p[m] {
  z-index: 10;
  left: 35%;
  top: 30%;
}

Minify the code or CSS by using any CSS Minifier. It helps you to reduce the characters in the code which will increase the score.

마무리

당신이 이것을 좋아한다면 그것을 ❤️하는 것을 잊지 마십시오. 그리고 다음 글에서 뵙겠습니다. 곧 봐요.