순수 CSS를 활용하여 채플린을 기념하는 카드를 구현하는 방법 (소스코드 첨부)

이 글의 내용은 채플린을 기념하는 카드를 구현하기 위한 순수 CSS입니다. (소스 코드 첨부) 도움이 필요한 친구들에게 도움이 되길 바랍니다. .

효과 미리보기

소스코드 다운로드

https://github.com/comehope/front-end-daily-challenges

코드 해석

dom 정의, 컨테이너에 포함된 3가지 요소 표현 모자, 수염, 지팡이 각각:

<figure>
    <span></span>
    <span></span>
    <span></span>
</figure>

중앙 디스플레이:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

컨테이너 크기를 정의하고 하위 요소가 수평 중앙에 오도록 설정:

.chaplin {
    width: 40em;
    height: 30em;
    font-size: 10px;
    background-color: #eee;
    box-shadow: 0 0 3em rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

기본 색상을 정의하고 나중에 currentColor를 사용하여 이 색상 참조: currentColor 引用此颜色：

.chaplin {
    color: #555;
}

画出帽子的轮廓：

.chaplin {
    position: relative;
}
.hat {
    position: absolute;
    width: 6.4em;
    height: 4.6em;
    background-color: currentColor;
    border-radius: 2.3em 2.3em 0 0;
    top: 1.4em;
}

用伪元素画出帽沿：

.hat::before {
    content: '';
    position: absolute;
    width: 10em;
    height: 0.8em;
    background-color: currentColor;
    border-radius: 0.4em;
    top: calc(100% + 0.4em);
    left: calc((100% - 10em) / 2);
}

画出胡子：

.beard {
    position: absolute;
    width: 1.5em;
    height: 0;
    top: 11.6em;
    border: solid transparent;
    border-width: 0 0.4em 1em 0.4em;
    border-bottom-color: currentColor;
}

画出手杖的杖杆：

.stick {
    position: absolute;
    width: 0.8em;
    height: 10.5em;
    background-color: currentColor;
    bottom: 0;
}

用 ::before 伪元素画出手杖的握柄：

.stick::before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 5.6em;
    height: 3em;
    border: 0.8em solid;
    border-radius: 5.6em 5.6em 0 0;
    border-bottom: none;
    top: -3em;
}

用 ::after 伪元素修饰握柄的端点，使其圆润自然：

.stick::after {
    content: '';
    position: absolute;
    width: 0.8em;
    height: 0.8em;
    background-color: currentColor;
    border-radius: 50%;
    left: calc(5.6em - 0.8em);
    top: -0.4em;
}

使手杖水平居中：

.stick {
    left: calc((100% - (5.6em - 0.8em)) / 2);
}

至此，抽象的卓别林形象完成，接下来排版一句他的名言。
在 dom 中增加一个 .quote

<figure>
    <span></span>
    <span></span>
    <span></span>
    <p>
        <span>a day without</span>
        <span>laughter</span>
        <span>is a day wasted</span>
    </p>
</figure>

모자의 윤곽선 그리기:

.quote {
    position: absolute;
    left: 50%;
    bottom: 2.5em;
    font-family: sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    flex-direction: column;
}

가짜 요소를 사용하여 챙 그리기:

.quote span:nth-child(1) {
    letter-spacing: 0.05em;
}

.quote span:nth-child(2) {
    font-size: 1.6em;
}

수염 그리기:

rrreee

지팡이 줄기 그리기: 🎜rrreee🎜 사용::before 의사 요소는 지팡이의 손잡이를 그립니다. 🎜rrreee🎜 ::after 의사 요소를 사용하여 손잡이의 끝점을 둥글고 자연스럽게 만들기 위해 수정합니다. 🎜rrreee🎜 지팡이를 수평으로 중앙에 놓습니다. : 🎜rrreee🎜 이쯤 되면 추상적인 채플린의 이미지가 완성되고, 이어서 그의 유명한 명언 중 하나가 조판된다. 🎜돔에 .quote 요소를 추가하고 문장을 3개의 문단으로 나눕니다: 🎜rrreee🎜 텍스트 위치를 지정하고 3개의 문단을 세로로 정렬합니다: 🎜rrreee🎜 글꼴 크기와 간격을 조정하여 3개의 문단을 만듭니다. 텍스트 정렬: 🎜rrreee🎜끝났습니다! 🎜

위 내용은 순수 CSS를 활용하여 채플린을 기념하는 카드를 구현하는 방법 (소스코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!