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

시작하자

이 프로젝트의 전제 조건은 매우 낮으며 모든 초보자 친구가 할 수 있습니다. HTML과 CSS에 대한 기본 지식만 있으면 됩니다.

요컨대 Claymorphism은 다음과 같습니다.


몇 가지 기본 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;
  }

짜잔 🎉 당신은 카드를 만들었습니다


이제 Claymorphism으로 변환할 시간입니다.

.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;
  }

해냈어 🎉


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

Twitter에서 나를 팔로우하세요 -

YouTube에서 저를 구독하세요 -