- Sitene Sadece CSS Ile Hazirlanmis Slayt Ekle

Sitene Sadece CSS Ile Hazirlanmis Slayt Ekle

YAZI BİLGİLERİ

Yazı: Sitene Sadece CSS Ile Hazirlanmis Slayt Ekle
Yazar: Teknolanya
Tarih: 13 Aralık 2016

Hepinize selamlar Tekno okurlar! Bugün sizlere "Sitene Sadece CSS Ile Hazirlanmis Slayt Ekle" başlığı altında bir slayt kodu vereceğim.İyi okumalar!

Selamlar dostlarım,üsttede okumuş olduğunuz gibi bugün sitenize sadece css ile hazırlanmış slayt ekleyebileceksiniz.Bu kodu bize armağan eden Slobada'ya da buradan selam olsun (:

Şimdi sizlere kodları verelim.Bu arada sitemize yeni eklenen gazete bülteninede buradan ulaşabilirsiniz!

CSS Kodu:

/**Genel Yerleşim**/    .slides {    padding: 0;    width: 700px;    height: 400px;    display: block;    margin: 0 auto;    position: relative;    }  /**Seçilebilme Özelliği**/    .slides * {    user-select: none;    -ms-user-select: none;    -moz-user-select: none;    -khtml-user-select: none;    -webkit-user-select: none;    -webkit-touch-callout: none;    }  /**Slayt Girişleri**/    .slides input { display: none; }  /**Slayt Alanı**/    .slide-container { display: block; }  /**Slayt Bölümü**/    .slide {    top: 0;    opacity: 0;    width: 700px;    height: 400px;    display: block;    position: absolute;    transform: scale(0);    transition: all .7s ease-in-out;    }  /**Slayt İçi Görseller**/    .slide img {    width: 100%;    height: 100%;    }  /**İleri Geri Yönlendirme**/    .nav label {    width: 200px;    height: 100%;    display: none;    position: absolute;    opacity: 0;    z-index: 9;    cursor: pointer;    transition: opacity .2s;    color: #FFF;    font-size: 156pt;    text-align: center;    line-height: 380px;    font-family: "Varela Round", sans-serif;    background-color: rgba(255, 255, 255, .3);    text-shadow: 0px 0px 15px rgb(119, 119, 119);    }    .slide:hover + .nav label { opacity: 0.5; }    .nav label:hover { opacity: 1; }    .nav .next { right: 0; }    input:checked + .slide-container  .slide {    opacity: 1;    transform: scale(1);    transition: opacity 1s ease-in-out;    }    input:checked + .slide-container .nav label { display: block; }  /**Slayt Altı Noktalar**/    .nav-dots {    width: 100%;    bottom: 9px;    height: 11px;    display: block;    position: absolute;    text-align: center;    }    .nav-dots .nav-dot {    top: -5px;    width: 11px;    height: 11px;    margin: 0 4px;    position: relative;    border-radius: 100%;    display: inline-block;    background-color: rgba(0, 0, 0, 0.6);    }    .nav-dots .nav-dot:hover {    cursor: pointer;    background-color: rgba(0, 0, 0, 0.8);    }    input#img-1:checked ~ .nav-dots label#img-dot-1,    input#img-2:checked ~ .nav-dots label#img-dot-2,    input#img-3:checked ~ .nav-dots label#img-dot-3,    input#img-4:checked ~ .nav-dots label#img-dot-4,    input#img-5:checked ~ .nav-dots label#img-dot-5,    input#img-6:checked ~ .nav-dots label#img-dot-6,    input#img-7:checked ~ .nav-dots label#img-dot-7,    input#img-8:checked ~ .nav-dots label#img-dot-8,    input#img-9:checked ~ .nav-dots label#img-dot-9,    input#img-10:checked ~ .nav-dots label#img-dot-10,    input#img-11:checked ~ .nav-dots label#img-dot-11,    input#img-12:checked ~ .nav-dots label#img-dot-12,    input#img-13:checked ~ .nav-dots label#img-dot-13,    input#img-14:checked ~ .nav-dots label#img-dot-14,    input#img-15:checked ~ .nav-dots label#img-dot-15 {    background: rgba(0, 0, 0, 0.8);    }

HTML Kodu:

#8.yıl!

Özlü Sözler

Sitene Sadece CSS Ile Hazirlanmis Slayt Ekle

YAZI BİLGİLERİ