Khung thông báo với chỉ báo thời gian bằng CSS3

CSS3 Timed Notifications

Với CSS3 này bạn có thể tạo ra các khung thông báo rất gọn nhẹ và đẹp mắt cho website của bạn. Sẽ có 3 loại thông báo tương ứng với các thời gian tự động tắt khác nhau cho bạn lựa chọn.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS vào trước thẻ ]]></b:skin>

.support-note span{color:#ac375d;font-size:16px;display:none;font-weight:bold;text-align:center;padding:5px 0}
.no-cssanimations .support-note span.no-cssanimations,.no-csstransforms .support-note span.no-csstransforms,.no-csstransforms3d .support-note span.no-csstransforms3d,.no-csstransitions .support-note span.no-csstransitions{display:block}
button.fire{color:#fff;display:inline-block;margin:5px auto 30px auto;border-radius:4px;padding:0 15px;height:30px;line-height:30px;width:160px;font-family:Cambria,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;;font-weight:bold;font-size:13px;text-shadow:0 1px 1px rgba(0,0,0,0.3);border:1px solid #377a90;background:#6fafc4;/* Old browsers */
    background:-moz-linear-gradient(top,#6fafc4 0%,#498ea5 100%);/* FF3.6+ */
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#6fafc4),color-stop(100%,#498ea5));/* Chrome,Safari4+ */
    background:-webkit-linear-gradient(top,#6fafc4 0%,#498ea5 100%);/* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top,#6fafc4 0%,#498ea5 100%);/* Opera 11.10+ */
    background:-ms-linear-gradient(top,#6fafc4 0%,#498ea5 100%);/* IE10+ */
    background:linear-gradient(top,#6fafc4 0%,#498ea5 100%);/* W3C */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6fafc4',endColorstr='#498ea5',GradientType=0 );/* IE6-9 */
    box-shadow:0 1px 1px rgba(0,0,0,0.1);z-index:10}
input.fire-check:hover + button.fire{box-shadow:0 1px 3px rgba(0,0,0,0.4)}
input.fire-check:checked + button.fire{color:#377a90;border-color:#4991a9;text-shadow:0 1px 1px rgba(255,255,255,0.6);background:#94cde0;text-shadow:0 1px 1px rgba(255,255,255,0.4);box-shadow:0 1px 1px rgba(255,255,255,0.5)}
input.fire-check{width:160px;position:absolute;left:50%;margin-left:-80px;height:35px;cursor:pointer;opacity:0;z-index:100}
.no-cssanimations button.fire,.no-cssanimations input.fire-check{display:none}
.tn-box{width:360px;position:relative;margin:0 auto 20px auto;padding:25px 15px;text-align:left;border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.6);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);cursor:default;display:none}
.tn-box p{font-weight:bold;font-size:16px;margin:0;padding:0 10px 0 60px;text-shadow:0 1px 1px rgba(255,255,255,0.6)}
.tn-box p:before{text-align:center;border:3px solid rgba(255,255,255,1);margin-top:-17px;top:50%;left:20px;width:30px;content:'i';font-size:30px;color:rgba(255,255,255,1);position:absolute;height:30px;line-height:30px;border-radius:50%;text-shadow:1px 1px 1px rgba(0,0,0,0.1);box-shadow:1px 1px 1px rgba(0,0,0,0.1)}
.tn-progress{width:0;height:4px;background:rgba(255,255,255,0.3);position:absolute;bottom:5px;left:2%;border-radius:3px;box-shadow:inset 0 1px 1px rgba(0,0,0,0.05),0 -1px 0 rgba(255,255,255,0.6)}
/* Colors */
.tn-box-color-1{background:#ffe691;border:1px solid #f6db7b}
.tn-box-color-1 p{color:#7d5912}
.tn-box-color-2{background:#99ffb1;border:1px solid #7ce294}
.tn-box-color-2 p{color:#2d8241}
.tn-box-color-3{background:#dd9aff;border:1px solid #b367db}
.tn-box-color-3 p{color:#69288b}
/* Fire the animations */
input.fire-check:checked ~ section .tn-box{display:block;-webkit-animation:fadeOut 5s linear forwards;-moz-animation:fadeOut 5s linear forwards;-o-animation:fadeOut 5s linear forwards;-ms-animation:fadeOut 5s linear forwards;animation:fadeOut 5s linear forwards}
input.fire-check:checked ~ section .tn-box .tn-progress{-webkit-animation:runProgress 4s linear forwards 0.5s;-moz-animation:runProgress 4s linear forwards 0.5s;-o-animation:runProgress 4s linear forwards 0.5s;-ms-animation:runProgress 4s linear forwards 0.5s;animation:runProgress 4s linear forwards 0.5s}
/* If you use JavaScript you could add a class instead:*/
.tn-box.tn-box-active{display:block;-webkit-animation:fadeOut 5s linear forwards;-moz-animation:fadeOut 5s linear forwards;-o-animation:fadeOut 5s linear forwards;-ms-animation:fadeOut 5s linear forwards;animation:fadeOut 5s linear forwards}
.tn-box.tn-box-active .tn-progress{-webkit-animation:runProgress 4s linear forwards 0.5s;-moz-animation:runProgress 4s linear forwards 0.5s;-o-animation:runProgress 4s linear forwards 0.5s;-ms-animation:runProgress 4s linear forwards 0.5s;animation:runProgress 4s linear forwards 0.5s}
@-webkit-keyframes fadeOut{0%{opacity:0}10%{opacity:1}90%{opacity:1;-webkit-transform:translateY(0px)}99%{opacity:0;-webkit-transform:translateY(-30px)}100%{opacity:0}}
@-moz-keyframes fadeOut{0%{opacity:0}10%{opacity:1}90%{opacity:1;-moz-transform:translateY(0px)}99%{opacity:0;-moz-transform:translateY(-30px)}100%{opacity:0}}
@-o-keyframes fadeOut{0%{opacity:0}10%{opacity:1}90%{opacity:1;-o-transform:translateY(0px)}99%{opacity:0;-o-transform:translateY(-30px)}100%{opacity:0}}
@-ms-keyframes fadeOut{0%{opacity:0}10%{opacity:1}90%{opacity:1;-ms-transform:translateY(0px)}99%{opacity:0;-ms-transform:translateY(-30px)}100%{opacity:0}}
@keyframes fadeOut{0%{opacity:0}10%{opacity:1}90%{opacity:1;transform:translateY(0px)}99%{opacity:0;transform:translateY(-30px)}100%{opacity:0}}
@-webkit-keyframes runProgress{0%{width:0%;background:rgba(255,255,255,0.3)}100%{width:96%;background:rgba(255,255,255,1)}}
@-moz-keyframes runProgress{0%{width:0%;background:rgba(255,255,255,0.3)}100%{width:96%;background:rgba(255,255,255,1)}}
@-o-keyframes runProgress{0%{width:0%;background:rgba(255,255,255,0.3)}100%{width:96%;background:rgba(255,255,255,1)}}
@-ms-keyframes runProgress{0%{width:0%;background:rgba(255,255,255,0.3)}100%{width:96%;background:rgba(255,255,255,1)}}
@keyframes runProgress{0%{width:0%;background:rgba(255,255,255,0.3)}100%{width:96%;background:rgba(255,255,255,1)}}
/* Let's add some different durations for the demo */
input.fire-check:checked ~ section .tn-box:nth-child(2){-webkit-animation-duration:6s;-moz-animation-duration:6s;-o-animation-duration:6s;-ms-animation-duration:6s;animation-duration:6s;-webkit-animation-delay:0.2s;-moz-animation-delay:0.2s;-o-animation-delay:0.2s;-ms-animation-delay:0.2s;animation-delay:0.2s}
input.fire-check:checked ~ section .tn-box:nth-child(2) .tn-progress{-webkit-animation-duration:5s;-moz-animation-duration:5s;-o-animation-duration:5s;-ms-animation-duration:5s;animation-duration:5s;-webkit-animation-delay:0.7s;-moz-animation-delay:0.7s;-o-animation-delay:0.7s;-ms-animation-delay:0.7s;animation-delay:0.7s}
input.fire-check:checked ~ section .tn-box:nth-child(3){-webkit-animation-duration:9s;-moz-animation-duration:9s;-o-animation-duration:9s;-ms-animation-duration:9s;animation-duration:9s;-webkit-animation-delay:0.4s;-moz-animation-delay:0.4s;-o-animation-delay:0.4s;-ms-animation-delay:0.4s;animation-delay:0.4s}
input.fire-check:checked ~ section .tn-box:nth-child(3) .tn-progress{-webkit-animation-duration:7.5s;-moz-animation-duration:7.5s;-o-animation-duration:7.5s;-ms-animation-duration:7.5s;animation-duration:7.5s;-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s;-o-animation-delay:0.9s;-ms-animation-delay:0.9s;animation-delay:0.9s}
/* Last example pauses on hover (causes problems in WebKit browsers) */
.tn-box.tn-box-hoverpause:hover,.tn-box.tn-box-hoverpause:hover .tn-progress{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused;-ms-animation-play-state:paused;animation-play-state:paused}

HTML

2Dán đoạn code bên dưới vào nơi bạn muốn hiển thị nút thông báo

                <div class="support-note"><!-- let's check browser support with modernizr -->
                    <span class="no-cssanimations">CSS animations are not supported in your browser</span>
                    <span class="no-csstransforms">CSS transforms are not supported in your browser</span>
                    <!--span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span-->
                    <!--span class="no-csstransitions">CSS transitions are not supported in your browser</span-->
                    <span class="note-ie">Sorry, only modern browsers.</span>
                </div>
            </header>
            
            <input type="checkbox" class="fire-check" />
            <button class="fire"><i class='fa fa-bell'></i> Click here</button>
            <section>
            
                <div class="tn-box tn-box-color-1">
                    <p>Your settings have been saved successfully!</p>
                    <div class="tn-progress"></div>
                </div>
                
                <div class="tn-box tn-box-color-2">
                    <p>Yummy! I just ate your settings! They were delicious!</</p>
                    <div class="tn-progress"></div>
                </div>
                
                <div class="tn-box tn-box-color-3">
                    <p>Look at me! I take much longer!<p>
                    <div class="tn-progress"></div>
                </div>
                
            </section>
        </div>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by tympanus/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm