카드 효과를 얻기 위한 CSS3

Guanhui앞으로: 2020-05-01 11:13:114658검색

1단계: HTML 코드 구조 결정

HTML 코드를 만들기 전에 먼저 해당 구조를 상상해야 합니다. 좋은 모델이 있으면 즉시 상상한 페이지 구조나 CSS 모듈을 적시에 종이에 나열해야 합니다. 잘 디자인되고 구조화된 HTML 페이지는 후속 작업을 매우 쉽게 만들어줍니다.

<a id="case-title" href=" http://www.loveo.cc/using-css-to-make-cards-ui.html">
    利用css制作卡片UI -- 墨丶水瓶
</a>
<div class="card">
    <a href="#.">
        <div class="card-image">
            <img src="http://www.loveo.cc/wp-content/uploads/2017/02/card-image.jpg"
            alt="Orange" />
        </div>
        <div class="card-body">
            <div class="card-date">
                <time>
                    20 Novembre 1992
                </time>
            </div>
            <div class="card-title">
                <h3>
                    Lorem Ipsum
                </h3>
            </div>
            <div class="card-exceprt">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam voluptatibus
                    autem consectetur voluptate facere at, omnis ab optio placeat officiis!
                    Animi modi harum enim quia veniam consectetur unde autem inventore.
                </p>
            </div>
        </div>
    </a>
</div>

2단계: CSS 규칙 정의

Html 구조가 설정되면 이에 대한 CSS 스타일 작성을 시작합니다. 아래에 각 부분에 대한 CSS 코드를 별도로 게시하겠습니다.

.card

.card {
    width:400px;
    margin:0px auto;
    background-color:white;
    box-shadow:0px 5px 20px #999;
}
.card a {
    color:#333;
    text-decoration:none;
}
.card:hover .card-image img {
    width:160%;
    filter:grayscale(0);
}

.card를 고정된 크기로 설정합니다.

센터링 방법은 margin:0px auto;입니다.

약간 어두운 배경에서 쉽게 구분할 수 있도록 블록 요소를 흰색으로 설정하세요.

오버레이 효과를 만들기 위해 작은 그림자를 추가했습니다.

태그 요소의 색상과 밑줄 수정을 정의합니다.

마우스를 위로 이동할 때 확대되는 요소를 정의하고 필터 회색조를 "0"으로 설정하세요.

.card-image

.card-image {
    height:250px;
    position:relative;
    overflow:hidden;
}
.card-image img {
    width:150%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    filter:grayscale(1);
    transition-property:filter width;
    transition-duration:.3s;
    transition-timing-function:ease;
}

이미지가 포함된 블록 요소의 크기를 수정하여 크기 요구 사항을 충족하는 한 어떤 이미지든 카드로 만들 수 있도록 할 수 있습니다.

절대 위치 지정 요소가 포함되어 있으므로 상대 위치 지정 방법을 설정하세요.

콘텐츠가 요소 상자를 넘을 때 자르기 및 숨기기를 정의합니다.

필요한 경우 고정 크기의 100%를 기준으로 이미지의 기본 크기를 늘릴 수 있지만 400px보다 작은 이미지를 추가하지 말고 공백을 피하기 위해 너비/높이 비율을 존중하는 것을 잊지 마세요.

상위 요소의 이미지를 완전히 표시하고 .card-image의 중심을 시작점으로 사용하려면 동시에 위치 지정 방법을 절대값으로 설정해야 합니다. 위쪽과 왼쪽은 50%이고, .card-image

의 중심점이 시작점으로 사용되도록 변환:번역(-50%, -50%)을 통해 변위를 설정할 수 있습니다.

요소를 100% 회색조로 정의하세요.

요소가 300밀리초 이내에 천천히 시작했다가 점점 빨라졌다가 마우스를 위로 이동할 때 천천히 끝나는 전환을 확대하세요.

.card-body

.card-body {
    text-align:center;
    padding: 15px 20px;
    box-sizing: border-box;
}

는 .card-bady 요소의 텍스트 정렬을 가운데 정렬로 정의합니다.

요소의 패딩을 설정합니다.

요소의 box-sizing 속성 값은 border-box입니다.

글꼴 및 기타

.card-date {
    font-family: &#39;Source Sans Pro&#39;, sans-serif;
}
.card-title, .card-excerpt {
    font-family: &#39;Playfair Display&#39;, serif;
}
.card-date, .card-title {
    text-align:center;
    text-transform:uppercase;
    font-weight: bold;
}
.card-date, .card-excerpt {
    color: #777;
}

카드 효과를 얻기 위한 CSS3

관련 기사