BAYRAĞIM


Ey mavi göklerin beyaz ve kızıl süsü

Kızkardeşimin gelinliği, şehidimin son örtüsü.

Işık ışık, dalga dalga bayrağım,

Senin destanını okudum, senin destanını yazacağım.



Sana benim gözümle bakmayanın

Mezarını kazacağım.

Seni selamlamadan uçan kuşun

Yuvasını bozacağım.



Dalgalandığın yerde ne korku ne keder...

Gölgende bana da, bana da yer ver!

Sabah olmasın, günler doğmasın ne çıkar!

Yurda, ay-yıldızının ışığı yeter.



Savaş bizi karlı dağlara götürdüğü gün

Kızıllığında ısındık;

Dağlardan çöllere düşürdüğü gün

Gölgene sığındık.



Ey şimdi süzgün, rüzgarlarda dalgalı;

Barışın güvercini, savaşın kartalı...

Yüksek yerlerde açan çiçeğim;

Senin altında doğdum,

Senin dibinde öleceğim.


Tarihim, şerefim, şiirim, herşeyim;

Yer yüzünde yer beğen:

Nereye dikilmek istersen

Söyle seni oraya dikeyim!

 


       CSS3 yavaş yavaş daha popüler tarayıcıların üzerinden desteklenen ve bütün stelerde bu konu ile ilgili bilgisi olanlar için kullanımlı bir şekilde kolaylık sağlar.Bu düğmeler CSS3 geçişleri kullanmak ve farklı fonksiyonları temsil etmek,geçişin simgeleri animasyonlu olarak dönüştürür. Bu Demo, İndir, Digg, E-posta ve RSS gibi fonksiyonları temsil eden 5 düğmeleri basit bir şekilde gösterir.

İNDİR
ÖNİZLEME

  HTML

       Bu, tüm düğmeler için temel yapıdır. Düğme kabın sınıfı yapacak animasyonu belirler. Demo indir, digg, e-posta, ve rss: her farklı düğme için 5 sınıf vardır.

<div id="button-container" class="demo">
        <a href="#" id="button">Demo</a>
            <div id="arrow-container">
                <div id="arrow-rectangle">
                </div>
                <div id="arrow-triangle" >
                </div>
            </div>
    </div>

   CSS
       Öncelikle, burada düğmeye temel görünüm yapmak için CSS stilleri uygulayalım.
body{
    margin: 0;
}
 
a{
    text-decoration:none
}
 
#button-container{
    position: relative; /*Important, Keeps the CSS3 Shapes in place*/
    margin: 10px;
    width: 220px;
    height: 50px;
}
 
#button{
    float: left;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-color: #ddd;
    padding-left: 20px;
     
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
 
    -moz-box-shadow:0 2px 0 #4c9434;
    -webkit-box-shadow:0 2px 0 #4c9434;
    box-shadow:0 2px 0 #4c9434;
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #60B842),
        color-stop(0.85, #7FD13D)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #60B842 0%,
        #7FD13D 85%
    );
 
    color:#fff;
    font-family:arial,helvetica,sans-serif;
    font-size:17px;
    font-weight:bold;
    text-shadow:1px 1px 1px #4c9434;
}
 
#button:hover{
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #6DD14B),
        color-stop(0.85, #85DB40)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #6DD14B 0%,
        #85DB40 85%
    );
    box-shadow:0 2px 0 #5EA839;
}
 
#button:active{
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #6DD14B),
        color-stop(0.85, #85DB40)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #6DD14B 0%,
        #85DB40 85%
    );
    box-shadow:0 1px 0 #5EA839;
    margin-top: 1px;
}

      Bu tek başına CSS3 düğme kullanmak için eksik kalır. Ama şimdi animasyonlu simgeler eklemek istiyorum.Önce şekiller işlemek ve farklı simgeleri halinde yapmak gerekir. Ben tüm düğmeler için istediğiniz temel başlangıç ​​simgesi olan bir oktur. Burada ok bileşenleri şunlardır;


/*Shapes and Components*/
 
    #arrow-container{
        position: absolute;
        top:0px;
        right: 0px;
        margin: 15px;
        box-shadow: 10px 10px;
        width: 35px;
        height: 20px;
        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: -moz-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    #arrow-rectangle{
        float: left;
        margin-top: 5px;
        width: 15px;
        height: 10px;
        background-color: #44801c;
        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: -moz-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    #arrow-rectangle-handle{
        float: left;
        margin-top: 5px;
        border-color: #44801c;
        border-style: solid;
        border-width: 5px;
        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: -moz-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    #arrow-rectangle-staff{
        float: left;
        margin-top: 5px;
        width: 5px;
        height: 10px;
        background-color: #44801c;
        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: -moz-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    #arrow-triangle{
        float: left;
        border-color: transparent transparent transparent #44801c;
        border-style: solid;
        border-width: 10px;
        height: 0px;
        width: 0px;
        -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
        transition: transform 0.2s ease-out;
    }

       Her simge bir ok dikdörtgen ve ok oluşturmak için ok üçgen kullanır. Ok-dikdörtgen-personel ve ok-dikdörtgen-kolu: biraz daha karmaşık dönüşümler ihtiyaçları ve farklı dikdörtgenler gerekiyor,çünkü Digg düğmesi istisnadır. Sizin beğeninize geçiş süresini değiştirebilir, ama hızlı olduğu zaman daha iyi görünüyor. 
Nihayet,burada animasyonlu geçişin efekti oluşturmak için dönüşümler vardır.

/*Animations*/
 
.rotateDown{
    -webkit-transform: rotateZ(90deg) translateX(5px);
    -moz-transform: rotateZ(90deg) translateX(5px);
    transform: rotateZ(90deg) translateX(5px);
}
.rotateDownMore{
    -webkit-transform: rotateZ(90deg) translateX(15px);
    -moz-transform: rotateZ(90deg) translateX(15px);
    transform: rotateZ(90deg) translateX(15px);
}
.rotate{
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}
.change{
    -webkit-transform: scale(0.4) rotateZ(-180deg);
    -moz-transform: scale(0.4) rotateZ(180deg);
    transform: scale(0.4) rotateZ(180deg);
}
.widen{
    -webkit-transform: scaleY(2) translateX(10px);
    -moz-transform: scaleY(2) translateX(10px);
    transform: scaleY(2) translateX(10px);
}
 
/*Digg Animations*/
 
.skinny{
    -webkit-transform: scaleY(.5) scaleX(4);
    -moz-transform: scaleY(.5) scaleX(4);
    transform: scaleY(.5) scaleX(4);    
}
#arrow-rectangle-handle.donut{
    -webkit-transform: scale(1.5) translateX(-14px);
    -moz-transform: scale(1.5) translateX(-14px);
    transform: scale(1.5) translateX(-14px);
    height: 5px;
    width: 5px;
    border-width: 2.5px;
}
#arrow-triangle.shovel{
    -webkit-transform: rotateZ(-135deg) translateX(8px) translateY(-8px);
    -moz-transform: rotateZ(-135deg) translateX(8px) translateY(-8px);
    transform: rotateZ(-135deg) translateX(8px) translateY(-8px);
    border-color: transparent transparent #44801c #44801c;
    border-radius: 7px;
}
 
/*Email Animations*/
 
#arrow-triangle.emailRotate{
    -webkit-transform: scale(1.34) scaleY(.7) rotateZ(90deg) translateX(2px) translateY(13.9px);
    -moz-transform: scale(1.34) scaleY(.7) rotateZ(90deg) translateX(2px) translateY(13.9px);
    transform: scale(1.34) scaleY(.7) rotateZ(90deg) translateX(2px) translateY(13.9px);
    border-color: transparent transparent transparent #2A4F11;
}
.emailTranslate{
    -webkit-transform: scale(1.5) scaleX(1.2);
    -moz-transform: scale(1.5) scaleX(1.2);
    transform: scale(1.5) scaleX(1.2);
}
 
/*RSS Animations*/
 
#arrow-triangle.rss{
    -webkit-transform: rotateZ(180deg) translateY(20px);
    -moz-transform: rotateZ(180deg) translateY(20px);
    transform: rotateZ(180deg) translateY(20px);
    border-radius: 30px;
    border-width: 10px;
    border-style: double;
    width: 10px;
    height: 10px;
}
.rssDot{
    -webkit-transform: scaleX(.7) scale(.5) translateX(20px);
    -moz-transform: rotateZ(180deg) translateY(20px);
    transform: rotateZ(180deg) translateY(20px);
    border-radius: 30px;
}

    JQuery


(function($){
    $(function(){
 
 
    $('#button-container.demo').hover(
              function () {
                $('#button-container.demo #arrow-container').addClass('rotate');
                $('#button-container.demo #arrow-triangle').addClass('change');
                $('#button-container.demo #arrow-rectangle').addClass('widen');
              }, 
              function () {
                $('#button-container.demo #arrow-container').removeClass('rotate');
                $('#button-container.demo #arrow-triangle').removeClass('change');
                $('#button-container.demo #arrow-rectangle').removeClass('widen');
              }
    );
     
    $('#button-container.download').hover(
              function () {
                $('#button-container.download #arrow-container').addClass('rotateDown');
              }, 
              function () {
                $('#button-container.download #arrow-container').removeClass('rotateDown');
              }
    );
     
    $('#button-container.digg').hover(
              function () {
                $('#button-container.digg #arrow-container').addClass('rotateDownMore');
                $('#button-container.digg #arrow-rectangle-handle').addClass('donut');
                $('#button-container.digg #arrow-rectangle-staff').addClass('skinny');
                $('#button-container.digg #arrow-triangle').addClass('shovel');
              }, 
              function () {
                $('#button-container.digg #arrow-container').removeClass('rotateDownMore');
                $('#button-container.digg #arrow-rectangle-handle').removeClass('donut');
                $('#button-container.digg #arrow-rectangle-staff').removeClass('skinny');
                $('#button-container.digg #arrow-triangle').removeClass('shovel');
             }
    );
     
    $('#button-container.email').hover(
              function () {
                $('#button-container.email #arrow-triangle').addClass('emailRotate');
                $('#button-container.email #arrow-rectangle').addClass('emailTranslate');
              }, 
              function () {
                $('#button-container.email #arrow-triangle').removeClass('emailRotate');
                $('#button-container.email #arrow-rectangle').removeClass('emailTranslate');
             }
    );
     
    $('#button-container.rss').hover(
              function () {
                $('#button-container.rss #arrow-triangle').addClass('rss');
                $('#button-container.rss #arrow-rectangle').addClass('rssDot');             
              }, 
              function () {
                $('#button-container.rss #arrow-triangle').removeClass('rss');
                $('#button-container.rss #arrow-rectangle').removeClass('rssDot');
             }
    );
     
     
    }); // end of document ready
})(jQuery); // end of jQuery name space



Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.

Yorum Gönder Blogger

 
Top