Pure CSS Sleek User Card UI Design - How To Create a Card with HTML and CSS

Bài viết này mình sẽ giới thiệu tới các bạn một hiệu ứng liên quan tới Sleek User Card, đơn giản bằng CSS3 và HTML ai cũng có thể thực hiện được.

John Doe

Senior UX/UI Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate libero veniam cumque facilis eos non assumenda, inventore ducimus officiis in.

<div id="item-card">
    <div class="img-container">
        <img src="https://boldman.vn/wwwroot/templates/website/global/img/slide-image-on-hover.jpg" alt="">
    </div>
    <div class="text-container">
        <h3>John Doe</h3>
        <h4>Senior UX/UI Designer</h4>
        <div class="des">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate libero veniam cumque facilis eos non assumenda, inventore ducimus officiis in.</p>
        </div>
        <div class="social-container">
            <a href=""><i class="demo-icon ecs-facebook"></i></a>
            <a href=""><i class="demo-icon ecs-gplus"></i></a>
            <a href=""><i class="demo-icon ecs-twitter"></i></a>
            <a href=""><i class="demo-icon ecs-youtube-play"></i></a>
            <a href=""><i class="demo-icon ecs-instagram"></i></a>
        </div>
    </div>
</div>

#item-card {
    position: relative;
    width: 300px;
    height: 400px;
    -webkit-box-shadow: 0 20px 50px rgba(0,0,0,0.1);
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border-radius: 10px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    text-align: center;
    padding: 40px 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    .img-container {
        width: 120px;
        border-radius: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
    .text-container {
        h4 {
            margin: 5px 0 10px 0;
            font-size: 13px;
            background: #e91e63;
            color: #fff;
            display: inline-block;
            padding: 4px 10px;
            border-radius: 15px;
        }
        .social-container {
            margin-top: 10px;
            a {
                display: inline-block;
                color: #aaa;
                margin: 0 10px;
                font-size: 20px;
                -webkit-transition: .5s;
                -o-transition: .5s;
                transition: .5s;
                &:hover {
                    color: #e91e63;
                    -webkit-transform: rotateY(360deg);
                            transform: rotateY(360deg);
                }
            }
        }
    }
    &:hover {
        -webkit-box-shadow: 0 30px 70px rgba(0,0,0,0.2);
                box-shadow: 0 30px 70px rgba(0,0,0,0.2);
    }
}

0 thảo luận về Pure CSS Sleek User Card UI Design - How To Create a Card with HTML and CSS

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục