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

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

JenlaGemy - 23/07/2021

по чести говоря игровые автоматы от 1 копейки [url=https://studentskorner.com/archive/index.php?thread-146.html]автоматы клубничка[/url]

NeilaEa - 15/07/2021

[url=https://hqd.wiki/]разрядился hqd что делать[/url] электронные сигареты за и против

DenlaStoor - 28/06/2021

go wry harvest http://quiksilver.co.za/news/africa_bet_on_football_or_other_sports.html best online football betting apps 89aNXEu2

MothKix - 24/06/2021

[url=https://hqd.wiki/]где можно заказать hqd несовершеннолетним[/url] электронная сигарета в севске

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?

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