CSS를 사용하여 클레이모피즘 만들기

반응형

시작합시다.

이 프로젝트의 전제조건은 매우 낮고 우리의 모든 초보 친구들이 할 수 있다; 우리가 필요한 것은 HTML과 CSS에 대한 기본적인 지식이다.

클레이모피즘은 다음과 같다.

 

기본적인 CSS를 추가하고 내용을 중앙에 배치해 보겠습니다.

* {
      box-sizing: border-box;
}

  body {
          margin: 0;
          background: #a2e5ff;
          color: #2D3557;
          font-family: 'Poppins', sans-serif;
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
  }

참고: 프로젝트에 Poppins 글꼴 가져오기

이제 HTML 파일로 우리의 카드를 만들 차례입니다.

<div class="card">
       <h2 class="card-title">Have you tried Calymorphism</h2>
     <p class="card-text">Calymorphism is awesome!</p>
     <div class="card-button">Yes!</div>
</div>

 

아름다운 모습을 보여줄 때야

.card {
      width: 400px;
      padding: 50px;
      border-radius: 30px;
      background: #ffffff;
      text-align: center;
      box-shadow: 0 35px 68px 0 rgba(0, 94, 182, 0.42) 
}
  .card-title {
        font-size: 32px;
        margin: 0  0 8px 0;
        line-height: 1.3;
        font-weight: 600;
  }
  .card-text {
        font-size: 20px;
        margin: 0;
        line-height: 1.3;
  }
.card-button{
      font-size: 20px;
      font-weight: 900;
      margin-top: 10px;
      background: #2D3557;
      color: #ffffff;
      padding: 5px;
      border-radius: 30px;
      border: none;
      box-shadow: 0 17px 34px 0 rgba(0, 94, 182, 0.42);
      text-transform: uppercase;
      cursor: pointer;
}

Tada 카드를 만들었습니다.

자, 이제 클레이모피즘으로 바꿀 차례야

 

.card{
      ...
          box-shadow: 0 35px 68px 0 rgba(0, 94, 182, 0.42), inset 0 -8px 16px 0 #4688ec;
      ...
}
      .card-button{
             ...
                  box-shadow: 0 17px 34px 0 rgba(0, 94, 182, 0.42), inset 0 10px 26px 0 #24477c;
             ...
      }
             .card-button:hover{
                   background: #2D3557;
                   color: #ffffff;
                   box-shadow: 0 17px 34px 0 rgba(0, 94, 182, 0.42), inset 0 20px 26px 0 #24477c;
             }
        ```

        네가 해냈어 

        ![output](https://res.cloudinary.com/practicaldev/image/fetch/s--zDIyMaqx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1642001457524/Xd7a8EUlT.png)

        읽어주셔서 감사합니다, 좋은 하루 보내세요!

        - Twitter 팔로우 - @code withsnowbit
        - YouTube 구독 - SnowBit을 사용한 코드

        <div class="content-ad"></div>