반응형
시작합시다.
이 프로젝트의 전제조건은 매우 낮고 우리의 모든 초보 친구들이 할 수 있다; 우리가 필요한 것은 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>
'css' 카테고리의 다른 글
깃허브에서 어떻게 조종했지? 팝업 (0) | 2022.01.13 |
---|---|
CSS 방법론 (0) | 2022.01.13 |
JavaScript 페이지 스크롤 진행률 표시줄 (0) | 2022.01.13 |
Josh Comau의 사용자 지정 CSS 재설정에 대한 참고 사항 (0) | 2022.01.10 |
새 컨테이너 쿼리 폴리필(Polyfill)만 작동합니다. (0) | 2022.01.10 |
댓글