간단한 HTML과 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:messages로 설정했다.
이를 피하기 위해 우리는 카드를 가리킬 때 이미지가 커지기를 원한다고 말할 수 있다. 아래 코드를 확인하십시오.
.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 세계. 재미있게 보내!
'css' 카테고리의 다른 글
| CSS용 Flexbox Froggy(플렉스박스를 배우는 재미있는 방법) (0) | 2022.01.27 |
|---|---|
| HTML, CSS 및 JavaScript로 사용자 지정 파일 업로드 버튼을 만드는 방법 (0) | 2022.01.27 |
| html css 와 typescript 를 사용하여 안드로이드 게임을 만들었다. (0) | 2022.01.27 |
| 가장 작은 스타일시트 (0) | 2022.01.27 |
| 순수 HTML/CSS로 된 애니메이션 측면 탐색 (0) | 2022.01.26 |
댓글