하이야!

HTML과 CSS만을 사용하여 간단한 커피잔을 만드는 방법을 배워보세요!

저는 현재 Full-Stack 개발자 트랙Bloc.io에 등록된 코딩 뉴비입니다. 저는 CSS 아트를 사랑하게 되었고 CSS 아트에 대한 수많은 블로그 게시물이 있다는 것을 알고 있지만 시작하는 방법에 대한 제 생각을 공유하고 싶었습니다.

1) CSS 이미지를 만들기 위해 CSS 마스터가 될 필요는 없습니다.

나는 진심으로 이것을 믿습니다. 나 자신은 CSS 닌자가 아니지만(아직 ;-)) 지금까지 꽤 멋진 이미지를 만들 수 있었습니다. 선호하는 텍스트 편집기나 codepen 또는 codesandbox 과 같은 웹사이트를 사용하는 것이 좋습니다.

2) 포지셔닝 배우기:

포지셔닝, 특히 상대 및 절대 위치 지정에 대한 일반적인 이해를 갖는 것이 도움이 될 것입니다. 일반적인 이해를 얻으려면 CSS Tricks 및 . 알아야 하고 경험을 통해 배울 수 있는 다른 CSS 속성이 많이 있지만 기본 사항과 포지셔닝을 알고 있다면 모든 준비가 된 것입니다 :-)!

3) HTML을 작성해 봅시다.

여기서 우리는 5개의 매우 간단한 div를 사용하여 이 컵 조를 만들었습니다.
컵과 스팀을 보관할 용기. 컵에 대한 div, 컵 div에는 핸들이라는 하위 div가 있습니다. cup div 뒤에는 steam-container라는 형제 div가 있습니다. 여기에 하위 div steam이 배치되어 컵에서 나오는 증기를 만듭니다.

<div class="container">
   <div class="cup">
     <div class="handle"></div>
   </div>
   <div class="steam-container">
     <div class="steam"></div>
   </div>
</div>

4) 이제 재미있는 것, CSS:

내 코드에 사용된 몇 가지 CSS 속성은 상대적 위치와 절대 위치,::before 및::after(자세한 내용은 여기: ) 및 애니메이션(자세한 내용은 여기: W3Schools )입니다.

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

body{
    background-color:lavender;
}

.container{
    margin: 0 auto;
    position: relative;
    width: 700px;
    height: 700px;
    top: 30px;
}

.cup{
    background-color: white;
    position: relative;
    width: 200px;
    height: 250px;
    border-radius: 10px;
    top: 240px;
    left: 220px;
}

.handle{
    background-color: white;
    position: absolute;
    width: 170px;
    height: 150px;
    right: -100px;
    top: 50px;
    border-radius: 50%;
}

.handle:after{
    content: "";
    position: absolute;
    background-color: lavender;
    width: 60px;
    height: 60px;
    top: 45px;
    right: 40px;
    border-radius: 50%;
}

.steam-container{
    width: 200px;
    height: 100px;
    position: relative;
    bottom: 100px;
    left: 220px;
}

.steam{
    position: absolute;
    background-color:grey;
    opacity: 0;
    filter: blur(5px);
    height: 80px;
    width: 30px;
    left: 30px;
    animation: steam 3s linear infinite;
}

.steam::before{
    content: '';
    position: absolute;
    background-color:grey;
    height: 80px;
    width: 30px;
    left: 50px;
}

.steam::after{
    content: '';
    position: absolute;
    background-color:grey;
    height: 80px;
    width: 30px;
    left: 100px;
}

5) 관심이 있는 경우 애니메이션 코드:

위의 .steam{...} 섹션에 있는 CSS 코드에는 3초 동안 진행되는 "steam"이라는 애니메이션이 있습니다. 애니메이션이 처음부터 끝까지 동일한 속도를 갖도록 선형으로 선언한 다음 애니메이션이 영원히 재생되도록 무한대를 호출합니다. 이를 통해 steam이라는 키 프레임을 만든 다음 애니메이션을 설정합니다.

@keyframes steam{
    0%
    {
        opacity: 0.1;
    }
    75%
    {
        opacity: 0.3;
    }
    100%
    {
        opacity: 0.1;
    }
}

작동 중인 애니메이션을 보려면 내Codepen를 확인하십시오.

제 작은 튜토리얼을 읽고 확인해 주셔서 감사합니다. 당신이 가질 수 있는 피드백을 제공해주세요. :-) 저는 CSS 아트를 좋아하므로 더 많은 블로그 게시물이 올 것입니다.