CSS 3D Weather Card Widget Design - CSS User Interface Design Tutorial

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 3D Weather Card, đơn giản bằng CSS3 và HTML ai cũng có thể thực hiện được.

New Delhi

8o
Today

<div id="card-container">
    <div class="card-front active">
        <div class="card-header">
            <h2>New Delhi</h2>
            <i class="fas fa-info-circle more js-btnmore"></i>
        </div>
        <div class="card-body">
            <i class="fas fa-cloud"></i>
            <h3>8<sup>o</sup><br><span>Today</span></h3>
        </div>
        <ul class="card-footer">
            <li>
                <div class="day">Sunday</div>
                <div class="temprature"><i class="fas fa-cloud-sun"></i> 30<sup>o</div>
            </li>
            <li>
                <div class="day">Monday</div>
                <div class="temprature"><i class="fas fa-cloud-showers-heavy"></i> 25<sup>o</div>
            </li>
            <li>
                <div class="day">Tuesday</div>
                <div class="temprature"><i class="fas fa-cloud-rain"></i> 20<sup>o</div>
            </li>
        </ul>
    </div>
    <div class="card-back">
        <div class="card-header">
            <i class="fas fa-arrow-circle-left js-btnmore1"></i>
        </div>
        <ul class="card-footer">
            <li>
                <div class="day">Yesterday</div>
                <div class="temprature"><i class="fas fa-cloud-sun"></i> 30<sup>o</div>
            </li>
            <li>
                <div class="day">Today</div>
                <div class="temprature"><i class="fas fa-cloud-showers-heavy"></i> 25<sup>o</div>
            </li>
            <li>
                <div class="day">Tomorrow</div>
                <div class="temprature"><i class="fas fa-cloud-rain"></i> 20<sup>o</div>
            </li>
            <li>
                <div class="day">Monday</div>
                <div class="temprature"><i class="fas fa-cloud-sun"></i> 40<sup>o</div>
            </li>
            <li>
                <div class="day">Tuesday</div>
                <div class="temprature"><i class="fas fa-cloud-showers-heavy"></i> 19<sup>o</div>
            </li>
            <li>
                <div class="day">Wednesday</div>
                <div class="temprature"><i class="fas fa-cloud-rain"></i> 23<sup>o</div>
            </li>
            <li>
                <div class="day">thursday</div>
                <div class="temprature"><i class="fas fa-cloud-rain"></i> 25<sup>o</div>
            </li>
        </ul>
    </div>
</div>

#card-container {
    width: 300px;
    min-height: 400px;
    position: relative;
    .card-header {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        font-weight: bold;
        color: #fff;
        h2 {
            font-size: 20px;
        }
        i {
            cursor: pointer;
            font-size: 25px;
        }
    }
    .card-body {
        text-align: center;
        padding: 40px 0 20px;
        color: #fff;
        i {
            font-size: 80px;
        }
        h3 {
            margin-top: 15px;
            font-size: 50px;
            line-height: 25px;
            font-weight: bold;
            sup {
                vertical-align: super;
                font-size: 50%;
            }
            span {
                font-size: 20px;
                font-weight: normal;
            }
        }
    }
    .card-footer {
        padding: 0;
        margin:0;
        li {
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            list-style: none;
            padding: 10px 0;
            border-bottom: 2px solid #fff;
            cursor: pointer;
            color: #fff;
            font-weight: bold;
            &:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }
        }
    }
    .card-front,.card-back {
        width: 100%;
        height: 100%;
        min-height: 400px;
        padding: 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
    }
    .card-front {
        background-color: #2196f3;
        -webkit-transform-origin: right;
        -ms-transform-origin: right;
                transform-origin: right;
        transform: translateX(-100%) rotateY(90deg);
        &.active {
            transform: translateX(0%) rotateY(0deg);
        }
    }
    .card-back {
        background-color: #ff2877;
        position: absolute;
        top:0;
        left: 0%;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transform: translateX(100%) rotateY(90deg);
                transform: translateX(100%) rotateY(90deg);
        .card-header {
            -webkit-box-pack: end;-webkit-justify-content: flex-end;-ms-flex-pack: end;justify-content: flex-end;
        }
        &.active {
            -webkit-transform: translateX(0%) rotateY(0deg);transform: translateX(0%) rotateY(0deg);
        }

    }
}

$(document).ready(function() {
    $(".js-btnmore").click(function() {
        $(this).parent().parent().parent().find('.card-back').toggleClass('active');
        $(this).parent().parent().toggleClass('active');
    });
    $(".js-btnmore1").click(function() {
        $(this).parent().parent().parent().find('.card-front').toggleClass('active');
        $(this).parent().parent().toggleClass('active');
    });
});

69 thảo luận về CSS 3D Weather Card Widget Design - CSS User Interface Design Tutorial

FrigoVed - 13/06/2021

generic cialis express delivery [url=https://krocialis.com/ ]what to do when viagra and cialis dont work[/url] is there a generic cialis available?

weanoHtf - 13/06/2021

buy cialis in toronto [url=https://cialishav.com/ ]cialis funciona[/url] 100mg cialis

weanoAni - 13/06/2021

rx express compounding pharmacy [url=https://pharmacyken.com/ ]central rx pharmacy[/url] pill pharmacy

weanoDev - 13/06/2021

xalatan canadian pharmacy [url=https://cjepharmacy.com/ ]national pharmacies online[/url] mexican pharmacy online oxycodone

weanoGtv - 12/06/2021

publix pharmacy store locator [url=https://pharmacyhrn.com/ ]mailing prescription drugs internationally[/url] online pharmacies canada

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