Gönderen Konu: Metro stili düğmeler oluşturma  (Okunma sayısı 763 defa)

Çevrimdışı orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 384
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
Metro stili düğmeler oluşturma
« : 03 May 2013, 11:39:56 »
Dün windows 8 incelerken sekmelerin biloklara uygulanmasi güzel olur diye duşundum araştirmalarim sonucu ortaya birşeyler cikti portalda html blok oluşturun aşağidaki kodlari ekleyip kendinize göre düzenleyin ekteki dosyayi temanizda ilgili yere eklemeyi unutmayin
DEMO

html kodlar

Kod: [Seç]
    <ul class="portfolio-grid">
                    <li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/1.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/2.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/3.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/4.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/5.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/6.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/7.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/8.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/9.png" alt="img01"/>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="animated flipInX">
                            <img src="../images/10.png" alt="img01"/>
                        </a>
                    </li>
                </ul>

css kodlar

Kod: [Seç]
.portfolio-grid {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
.portfolio-grid li {
    display: inline-block;
    margin: 5px 5px 5px 5px;
    vertical-align: top;
        width:212px;
}
.portfolio-grid li > a,
.portfolio-grid li > a img {
        width: 100%;
    border: none;
    outline: none;
    display: block;
    position: relative;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
}
.portfolio-grid li > a img:hover {
        border-radius: 50%;
        z-index: 9999;
}

.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
   
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
   
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
   
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: flipInX;
    -o-backface-visibility: visible !important;
    -o-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX;
}
« Son Düzenleme: 14 Nis 2016, 11:15:27 Gönderen: orhan »