전환이 있는 간단한 CSS 카드 만들기
플렉스와 스케일을 사용하는 인터랙티브 카드를 만드는 방법을 설명하겠습니다.
먼저 HTML을 설정해 보겠습니다.
<body>
<!--The card is a div itself and the div is comprised of subsections-->
<div class="card">
<!--Setting two divs allows us to use flex-->
<div class="img">
</div>
<div class="text">
</div>
</div>
</body>
div에는 2개의 다른 div가 있습니다. 이렇게 하면 플렉스를 더 쉽게 적용할 수 있습니다.
CSS도 비교적 쉽습니다!
.card {
height: 200px;
width: 400px;
}
카드 너비를 400px로 지정하면 카드를 나란히 놓고 플렉스 랩을 사용하여 다른 카드를 쉽게 감쌀 수 있습니다.
더 반응적인 느낌을 위한 카드.
두 번째로 이미지를 추가해 보겠습니다.
<body>
<!--The card is a div itself and the div is comprised of subsections-->
<div class="card">
<!--Setting two divs allows us to use flex-->
<div class="img">
<img src="/Folder/img.png" alt="Vector Image" class="card-pics">
</div>
<div class="text">
</div>
</div>
</body>
크기 문제를 피하기 위해 선호하는 이미지 크기를 설정하고 이 경우 이미지 높이 200px, 너비 175px를 원합니다.
.card-pics {
height: 200px;
width: 175px;
}
*메모
모든 이미지를 200 x 150으로 설정하는 대신 카드에 대한 클래스를 만들었습니다.
웹사이트에 다른 이미지를 추가하고 각 이미지를 재정의하는 것은 지루한 작업이 될 수 있습니다.
세 번째 부분은 카드 클래스 내에 텍스트와 플렉스 기능을 포함하는 것입니다.
<div class="card">
<!--Setting two divs allows us to use flex-->
<div class="img">
<img src="/Folder/img.png" alt="Vector Image" class="card-pics">
</div>
<div class="text">
<h1 class="card-header">Lorem</h1>
<p class="card-para">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima eveniet quisquam reiciendis eum vitae?</p>
</div>
</div>
.card {
height: 200px;
width: 400px;
display: flex;
}
텍스트가 이미지에 너무 가깝습니다.숨을 쉴 수 있는 공간을 제공하겠습니다.
.text {
padding: 20px;
}
네 번째 부분은 경계 반경을 포함합니다. 원하는 모서리를 둥글게 처리하여 작동합니다. 4개의 값을 입력하면 시계 방향으로 설정될 것으로 예상합니다.
.card {
height: 200px;
width: 400px;
display: flex;
align-items: center;
background: #ddd;
border-radius: 30px 0 30px 0;
}
.card-pics {
position: relative;
border-radius: 30px 0 0 0;
height: 200px;
width: 175px;
}
이제 모든 것이 설정되었습니다. 확대 효과는 어떻습니까? 확대 이벤트는 이벤트에 의해 트리거됩니다. 이벤트에는 :focus 및 :hover가 포함됩니다.
배율은 이미지 크기를 늘리는 데 도움이 됩니다.
사람들이 여기에서 접하는 일반적인 문제는 종종 card:hover에서 이미지가 커지도록 트리거하는 방식으로 코드를 설정한다는 것입니다.
img:hover에 설정했습니다.
이를 피하기 위해 카드 위에 마우스를 올려 놓으면 이미지가 커지기를 원한다고 말할 수 있습니다. 아래 코드를 확인하세요.
.card:hover {
.card-pics {
scale: 1.05;
}
}
위의 코드를 따르면 이미지가 한계를 넘어서고 있음을 알 수 있습니다. 해결책은 간단합니다. 이미지가 카드 div 내에 있으므로 다음을 수행할 수 있습니다.
넘침을 숨길 수 있는 방식으로 캔을 쉽게 놓을 수 있습니다.
.card {
height: 200px;
width: 400px;
display: flex;
align-items: center;
background: #ddd;
border-radius: 30px 0 30px 0;
overflow: hidden;
}
이제 처리가 완료되었으므로 조금 더 멋져 봅시다. 일부 전환이 있을 수 있습니다.
호버링할 때 애니메이션이 적용되기를 원합니다.
.card:hover {
.card-pics {
transition: all 300ms ease-out;
scale: 1.05;
}
}
마우스를 가져갈 때 전환이 작동하지만 떠나자 마자 애니메이션이 없습니다. 카드 사진에 또 다른 전환을 남겨두면 이 문제를 해결할 수 있습니다.
그러나 이번에는 용이성 효과가 될 것입니다.
.card-pics {
position: relative;
border-radius: 30px 0 0 0;
height: 200px;
width: 175px;
transition: all 300ms ease-in;
}
이것은 우리가 보기 좋은 카드를 가지고 있다는 것입니다. 우리는 이 개념을 사용하여 우리가 직면하는 다양한 문제에 적용할 수 있습니다.
CSS의 세계. 즐거운 시간 보내세요!
Reference
이 문제에 관하여(전환이 있는 간단한 CSS 카드 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sakaz22/building-simple-css-cards-that-have-transitions-29ed텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
