CSS3 to achieve card effect

Step One: Determine the HTML Code Structure

Before creating the HTML code, you should first imagine its structure. When you have a good model, you should immediately list the page structure you imagined or your CSS module on paper in time. A well-designed and well-structured HTML page will make your subsequent work extremely easy.

<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>

Step 2: Define Css rules

Once the Html structure is established, we will start writing Css styles for it. I will post the CSS code for each part separately below.

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

Set .card to a fixed size.

The centering method is margin:0px auto;

In order to facilitate distinction in a slightly darker background, set the block element to white.

Added a small shadow to create an overlay effect.

Define the color and underline modification of the element a tag.

Define the element to be enlarged when the mouse moves up and the filter grayscale is set to "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;
}

Fixed the size of the block element that contains our image, this allows us to make any image available for use in a card as long as it meets the size requirements.

Set the relative positioning method, because it contains absolutely positioned elements.

Define the content to be cropped and hidden when it overflows the element box.

We can increase the default size of images based on 100% of the fixed size if needed, but do not add images smaller than 400px and do not forget to respect their width/height ratio to avoid whitespace.

In order to fully display the image in the parent element and use the center of .card-image as the starting point, we need to set the positioning method to absolute at the same time. top and left are 50%, and then you can set the displacement through transform:translate(-50%, -50%) so that the center point of .card-image

is used as the starting point.

Define the element to be 100% grayscale.

Make the element start slowly within 300 milliseconds, then become faster, and then end slowly when the mouse is moved over.

.card-body

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

Define the text alignment of the .card-bady element to center alignment.

Set the padding of the element.

The element box-sizing attribute value is border-box.

Fonts and others

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

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of CSS3 to achieve card effect. For more information, please follow other related articles on the PHP Chinese website!