순수 CSS 호박을 만든 방법.

즐거운 할로윈 보내세요. 저는 최근에 으스스한 계절 분위기에 빠져들기 위해 100% CSS 호박을 만들었습니다. 일부 사람들은 그것이 어떻게 만들어졌는지 알고 싶어합니다.

펜 보기
micfun123(@micfun123)의 100% CSS 호박
CodePen에서

그럼 어떻게 작동하는지 설명하겠습니다. 코드만 보고 과정은 보고 싶지 않은 분들을 위해 CodePen을 소개합니다.

이런 걸 해본 적이 없어서 첫 번째 목표는 주황색 타원 3개였습니다.

그래서 HTML부터 시작했습니다.

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pumpkin</title>
    <link rel="stylesheet" href="pumpkin.css">


    <div>



<p>The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.<br>
</p>

<pre class="brush:php;toolbar:false">body {
display: flex;
justify-content: center; 
align-items: center;
height: 100vh;
}
.pumpkin {
position: relative;
display: flex;
align-items: center;
}  
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}  
.center{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}

이렇게 하면 3개의 완벽한 주황색 타원이 나란히 출력됩니다. 여기서 무슨 일이 일어나고 있는 걸까요? 먼저 body 태그를 사용하여 호박 div를 페이지 중앙에 배치합니다. 처음 3줄로 이 작업을 수행합니다. 다음으로 height: 100vh;를 사용합니다. body 태그가 화면의 100%를 차지하고 있음을 코드에 알려줍니다. 이것이 없으면 body 태그는 내용만큼만 커질 것입니다. 즉, 타원이 페이지 상단 중앙에 위치하게 됩니다. 그래서 그 모습은 이렇습니다.

다음으로 원이 겹치기를 원합니다. 왼쪽 및 오른쪽 타원에 음수 여백을 지정하면 쉽게 이 작업을 수행할 수 있습니다.

.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-right: -45px;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-left: -45px;
}

여기서는 오른쪽 Ovel을 왼쪽으로 45픽셀, 왼쪽 Ovel을 오른쪽으로 45픽셀 이동합니다. (아직 사진 저장 방법이 없어서 이 무대 사진은 추가하지 않겠습니다.)

이제 더 어려운 부분을 살펴보겠습니다. (일부 Google이 많이 사용되었습니다.)

.stem {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
width: 30px;
height: 60px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}
.curve{
position: absolute;
top: -47px;
left: 43%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
transform: rotate(-15deg);
width: 30px;
height: 30px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}

그래서 width , height , border-radius 및 background-color 는 설명이 필요 없습니다. 그래서 건너뛰겠습니다. 위치로 시작: 절대; 이것이 하는 일은 웹사이트의 흐름에서 div를 제거하는 것입니다. 대신 가장 가까운 앵커 포인트를 기반으로 합니다. 위치: 절대; 모든 요소 위에 배치할 수 있습니다. 다음으로 Stem을 수평으로 중앙에 배치하기 위해 left: 50% 및 변환:translateX(-50%);를 사용합니다. 생각해 보면 이해가 되지만 왼쪽으로 시작하려면 생각해야 합니다. 50% 호박 div 내에서 줄기의 왼쪽 가장자리를 중앙에 놓습니다. 줄기의 중심이 호박의 중심에 오도록 하고 싶습니다. 변환: 번역X(-50%); 줄기를 줄기 크기의 절반만큼 왼쪽으로 다시 이동합니다. 상단: -47px; 당신이 기대하는 것과 거의 일치합니다. 위쪽 가장자리를 47px 위로 이동합니다. z-index는 제가 최근에 발견한 것으로, 기본적으로 요소의 높이입니다. z-index가 호박 뒤에 있기를 원하므로 호박의 기본 인덱스는 0인 반면 z-index는 -1로 지정합니다. 이것이 다음과 같습니다.

마지막으로 눈, 입, 배경입니다. 눈부터 시작해볼까요

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pumpkin</title>
    <link rel="stylesheet" href="pumpkin.css">


    <div>



<p>The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.<br>
</p>

<pre class="brush:php;toolbar:false">body {
display: flex;
justify-content: center; 
align-items: center;
height: 100vh;
}
.pumpkin {
position: relative;
display: flex;
align-items: center;
}  
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}  
.center{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}

그래서 이것이 border-width: 0 50px 41px 30px보다 더 무섭게 보입니다. 여기서는 정사각형의 각 변의 길이를 설정합니다. 위에서부터 시작하여 시계방향으로 진행됩니다. 따라서 정사각형의 꼭대기 길이는 0입니다. 이는 삼각형이 3개의 변을 갖고 있기 때문입니다. 이 트릭을 사용하면 삼각형을 만드는 변 중 하나를 제거할 수 있습니다. 그런 다음 오른쪽 길이는 50px, 아래쪽 길이는 50px, 왼쪽 길이는 30px입니다. 오른쪽 눈의 경우 왼쪽 및 오른쪽 값을 뒤집어 다른 방향을 가리키도록 합니다. 테두리 색상: 투명 투명 #000000 투명; 그렇다면 왜 투명체가 그렇게 많은지 궁금할 것입니다. 여기에는 실제로 3개의 삼각형이 있습니다(그 중 하나는 너비가 0이기 때문에 존재하지 않습니다). 아래쪽 삼각형만 색칠하고 싶기 때문에 나머지 3개는 투명하게 설정했습니다. 테두리 스타일: 단색; 우리는 삼각형이 단색으로 채워지기를 원하므로 스타일을 Solid로 설정해야 합니다. 우리는 실제로 삼각형을 채우지 않았지만 테두리가 너무 커서 실제로 있는 것처럼 보입니다. 이 모든 과정을 거쳐 이제 우리는 눈을 갖게 되었습니다.

마지막 단계는 미소입니다.

.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-right: -45px;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-left: -45px;
}

테두리-왼쪽 상단-반경: 110px; 테두리 오른쪽 상단 반경: 110px; 상단 모서리가 얼마나 둥글게 될지 정의합니다. 이것은 반원을 만드는 비트이지만 곡선이 맨 위에 놓이게 됩니다. 이 문제를 해결하기 위해 변환을 추가했습니다. 회전(190deg) 스마일로 회전하려면 left: 25%; 중심에서 약간 벗어나도록 합니다. 그럼 최종 결과는 이렇습니다.

펜 보기
micfun123(@micfun123)의 100% CSS 호박
CodePen에서

가장 아름다운 솔루션도 아니고 가장 효율적인 솔루션도 아니라는 점은 인정합니다. 하지만 CSS로 무언가를 그리는 것은 처음이었는데 오히려 만족스럽습니다. 언제나처럼 Discord나 Reddit에 피드백을 남겨주세요.