ZAMAN AYARLI YAZI KUTULARI [CSS]

Merhaba arkadaslar herkese kolay gelsın. Bu aksam kı yazımda sızlere yıne yabancı bır sıteden buldugum zaman ayarlı duyuru kutularını ve kodlarını verecegım. Bu duyuru cubuklarını 3 zaman ayarıyla ve 3 renkle kullanabılırsınız.

Anlatımi Ve Kullanımı Soyledir;

Duyuru cubuklarının css kodlarını ekledıgınız yerde ''Activate Me'' adlı bır buton cıkar.Tabii bunu degistirebilirsiniz.

Daha sonra butona tıkladıgınızda kac tane yazı kutusu ekledıysenız hepsını goruntulersınız.
1 Saniye gectıkten sonra kutudakı yazınızın hemen altında beyaz bir çubuk belirir.

Uzun zamanlı olan 8 saniye de dolar ve yok olur.
Orta zamanlı olan  6 saniye de dolar ve yok olur.
Kısa zamanlı olan ıse 5 saniyede dolar ve kaybolur.

Ben de baska bır sıtede kullanması ıcın bı arkadasımla bunu paylastım. Benım bunu kullanmamdakı amac su:
Bıldıgınız uzere bazı sıtelerdekı uyelık alanları sızlerı adımlarla yönlendirir.
Mesela 1. adım adınız soyadınız adresiniz. 2. adım telefon numaranız okulunuz mesleginiz vb. gibidir.
Ben bu adımları doldururken asagıdakı cubukları kullandım.
1. Adımdayken alttakı kutuda ''1. adımınız tamamlandı ıkıncı adıma gecmex ıcın xxx sanıye bekleyınız'' yazıyor.
2. Adıma geldıgımızde ıse kayıt ıslemı tamamlanmıstır. Kayıt butonuna tıkladıgınızda yıne alttakı cubuk dolar ve yok olur. Daha sonra gırıs sayfasına yonlendırılırsınız.
---
Sizlere Bu Anlattıklarımı Gostermek Icın Bır Kac Resım Ekledım

 ---

Sımdı ıse eklentımızın kodlarını vereyım. Tum platformlarda sorunsuz calısacaktır..

CSS KODLARI SUNLAR;

.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;
    cursor: default;
    display: none;
}
 
.tn-box-color-1{
    background: #ffe691;
    border: 1px solid #f6db7b;
}
.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);
}
input.fire-check:checked ~ section .tn-box {
    display: block;
    animation: fadeOut 5s linear forwards;
}
 
input.fire-check:checked ~ section .tn-box .tn-progress {
    animation: runProgress 4s linear forwards 0.5s;
}
.tn-box.tn-box-active {
    display: block;
    animation: fadeOut 5s linear forwards;
}
 
.tn-box.tn-box-active .tn-progress {
    animation: runProgress 4s linear forwards 0.5s;
}
.tn-box.tn-box-active {
    display: block;
    animation: fadeOut 5s linear forwards;
}
 
.tn-box.tn-box-active .tn-progress {
    animation: runProgress 4s linear forwards 0.5s;
}

EKLEMEK ICIN SU KODLARI KULLANIYORUZ;

<div class="tn-box tn-box-color-1">
    <p>Kutuda Gorunmesını Istedıgınız Yazıyı Bu Alana Yazıyorsunuz..</p>
    <div class="tn-progress"></div>
</div>

Not: Yesıl ıle gosterılmıs yerler degıstırmenız gereken kodlardır.. 0.5 saniyedir. yani 5 saniyedir. Bunlara gore kendınıze gore degıstırınız..