Css3 geçiş efektleri (Transition effects)

By

transitions

Bütün Css3  geçiş  efektlerinin bir  arada bulunduğu bir  örnek.  Input  ve checkbox üzerinde  hazırlanmış olan bu geçiş  efektlerini  kendi  çalışmalarınızda kullanmak için saklayabilirsiniz. Şu anki hali ile kullanılacak bir örnek  gibi görünmüyor. Bir nevi Css3 geçiş efektlerinin tanıtımı  için hazırlanmış diyebiliriz. Demo örneğini  incelerken bile  insanın aklına türlü türlü örnekler  geliyor. Mesela tek  bir  kutu içine sığdırılmış giriş paneli (üyelik, giriş, şifremi unuttum – hepsi  bir arada), resim galerileri için hover  efektleri, butonlar, menüler aklınıza gelebilecek her yerde kullanabilirsiniz.

Demo  sayfasında Css3  geçiş efektleri (Css3 transition effects) kullanılarak slayt, yukarıya doğru slayt, alağıya doğru slayt, büyüyen çerçeve, fade efekti, flip  efekti ve swap (atlı karınca benzeri yer değiştiren nesneler) efektleri hazırlanmış. Sizin burada  yapmanız  gereken en önemli görev dosyayı indirip  arşivinize  eklemek 🙂 Css3  animasyonlar  yada  farklı geçiş efektleri  bulmak için site site  araştırma yapmanıza  gerek yok sanırım. bu örnek sayesinde  bütün geçiş efektleri elinizin altında olacak.

 

Kullanım

Bütün özellikleri  parça  parça  ekleyip anlatmak  tahmin edemeyeceğiniz kadar  uzun bir  sayfaya neden olacaktı. Her  bir Css3 geçiş efekti (Css3 transition effect) kendi başına  ayrı bir konu olmaya  yeter. Bu nedenle  bütün kodları  direk ekliyorum. İlerleyen zamanlarda belki parça parça  bunları tanıtma fırsatımız olur sizlere.

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css :

html,body {
 overflow: hidden;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 background: -moz-linear-gradient(top, #000, #000 50%, #333);
 background: -webkit-linear-gradient(top, #000, #000 50%, #333);
}
input {
 display: none;
}
menu,li {
 list-style: none;
 padding: 0;
}
body > div {
 position: absolute;
 width: 90%;
 height: 97%;
 padding: 3% 5% 0;
 background: #ccc;
 z-index: 0;
 -moz-transition: 0.5s;
 -webkit-transition: 0.5s;
}
body > div:not(#main) {
 display: -moz-box;
 display: -webkit-box;
 background: #aaa;
}
body > div:not(#main) > div {
 width: 90%;
 height: 83%;
 margin: 2% 0 5%;
 padding: 5%;
 background: -moz-linear-gradient(top, #f0f0f0, #fff 70%, #fff);
 background: -webkit-linear-gradient(top, #f0f0f0, #fff 70%, #fff);
 border-radius: 7px;
 box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
h1 {
 margin: 0 0 0.4em;
 text-align: center;
 font-size: 240%;
 line-height: 1.3;
 color: #333;
 text-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 -1px 0 #000;
}
menu {
 border: 1px solid #bbb;
 border-radius: 7px;
 background: #fff;
 box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
menu li {
 border-bottom: 1px solid #ccc;
}
menu li:hover {
 border-bottom-color: #bbb;
}
menu li:last-child {
 border: 0;
}
menu li label {
 display: block;
 padding: 0.55em 1em;
 font-weight: bold;
 font-size: 90%;
 letter-spacing: 1px;
 color: #444;
 background: -moz-linear-gradient(top, #fff, #eee);
 background: -webkit-linear-gradient(top, #fff, #eee);
 text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
menu li:first-child label {
 -moz-border-radius-topleft: 7px;
 -moz-border-radius-topright: 7px;
 -webkit-border-top-left-radius: 7px;
 -webkit-border-top-right-radius: 7px;
}
menu li:last-child label {
 -moz-border-radius-bottomleft: 7px;
 -moz-border-radius-bottomright: 7px;
 -webkit-border-bottom-left-radius: 7px;
 -webkit-border-bottom-right-radius: 7px;
}
menu li label:after {
 float: right;
 content: '?';
 font-weight: bold;
 text-shadow: 0 1px 0 #fff;
 -moz-transform: scaleX(0.6) translateX(0.2em);
 -webkit-transform: scaleX(0.6) translateX(0.2em);
}
menu li label:hover {
 background: -moz-linear-gradient(top, #f3f3f3, #d5d5d5);
 background: -webkit-linear-gradient(top, #f3f3f3, #d5d5d5);
}
menu li label:active {
 background: -moz-linear-gradient(top, #e0e0e0, #aaa);
 background: -webkit-linear-gradient(top, #e0e0e0, #aaa);
 box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
#main {
 z-index: 1;
 -moz-transform: rotateY(0deg);
 -webkit-transform: rotateY(0deg);
}
.back {
 display: block;
 width: 99%;
 padding: 0.5em 0;
 border: 2px solid #777;
 font-size: 110%;
 font-weight: bold;
 line-height: 1;
 letter-spacing: 1px;
 color: #fff;
 text-align: center;
 text-shadow: 0 -2px 0 rgba(0,0,0,0.6);
 background: -moz-linear-gradient(top, #aaa, #666);
 background: -webkit-linear-gradient(top, #aaa, #666);
 border-radius: 7px;
 cursor: pointer;
}
.back:active {
 border: 2px solid #555;
 background: -moz-linear-gradient(top, #888, #444);
 background: -webkit-linear-gradient(top, #888, #444);
 box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
#slide-container {
 z-index: 1;
 -moz-transform: translateX(100%);
 -webkit-transform: translateX(100%);
}
input#slide:checked ~ #main {
 -moz-transform: translateX(-100%);
 -webkit-transform: translateX(-100%);
}
input#slide:checked ~ #slide-container {
 -moz-transform: translateX(0%);
 -webkit-transform: translateX(0%);
}
#slideup-container {
 z-index: 2;
 -moz-transform: translateY(100%);
 -webkit-transform: translateY(100%);
}
input#slideup:checked ~ #slideup-container {
 -moz-transform: translateY(0%);
 -webkit-transform: translateY(0%);
}
#slidedown-container {
 z-index: 2;
 -moz-transform: translateY(-100%);
 -webkit-transform: translateY(-100%);
}
input#slidedown:checked ~ #slidedown-container {
 -moz-transform: translateY(0%);
 -webkit-transform: translateY(0%);
}
#pop-container {
 -moz-transform: scaleX(0) scaleY(0);
 -webkit-transform: scaleX(0) scaleY(0);
 opacity: 0;
 -moz-transition: 0.5s;
 -webkit-transition: 0.5s;
}
input#pop:checked ~ #pop-container {
 z-index: 2;
 -moz-transform: scaleX(1) scaleY(1);
 -webkit-transform: scaleX(1) scaleY(1);
 opacity: 1;
}
#fade-container {
 opacity: 0;
 -moz-transition: 0.5s;
 -webkit-transition: 0.5s;
}
input#fade:checked ~ #fade-container {
 z-index: 2;
 opacity: 1;
}
#flip-container {
 -moz-transform: scaleX(0);
 -moz-transition: 0.3s 0s;
 -webkit-transform: scaleX(0);
 -webkit-transition: 0.3s 0s;
}
input#flip:checked ~ #main {
 -moz-transform: scaleX(0);
 -moz-transition: 0.3s;
 -webkit-transform: scaleX(0);
 -webkit-transition: 0.3s;
}
input#flip:checked ~ #flip-container {
 -moz-transition: 0.3s 0.1s;
 -webkit-transition: 0.3s 0.1s;
 z-index: 2;
 -moz-transform: scaleX(1);
 -webkit-transform: scaleX(1);
}
#swap-container {
 -moz-transition: 0.8s;
 -webkit-transition: 0.8s;
 opacity: 0;
 -moz-transform: scaleX(0.1) scaleY(0.1) translateX(180%);
 -webkit-transform: scaleX(0.1) scaleY(0.1) translateX(180%);
}
input#swap:checked ~ #main {
 -moz-transition: 0.8s;
 -webkit-transition: 0.8s;
 opacity: 0;
 -moz-transform: scaleX(0.1) scaleY(0.1) translateX(-180%);
 -webkit-transform: scaleX(0.1) scaleY(0.1) translateX(-180%);
}
input#swap:checked ~ #swap-container {
 opacity: 1;
 -moz-transform: scaleX(1) scaleY(1) translateX(0%);
 -webkit-transform: scaleX(1) scaleY(1) translateX(0%);
}
input#slide:checked ~ #main label[for='slide'],
input#slideup:checked ~ #main label[for='slideup'],
input#slidedown:checked ~ #main label[for='slidedown'],
input#pop:checked ~ #main label[for='pop'],
input#fade:checked ~ #main label[for='fade'],
input#flip:checked ~ #main label[for='flip'],
input#swap:checked ~ #main label[for='swap'] {
 background: -moz-linear-gradient(top, #ffc173, #ff8e00);
 background: -webkit-linear-gradient(top, #ffc173, #ff8e00);
 color: #fff;
 text-shadow: 0 -2px 0 rgba(0,0,0,0.3);
}
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :








Input Checkbox transition effects

Please select transition effect from the list below.

  • Slide

    Slide transition sample.
    It returns when the button below is pushed.

    Slide Up

    Slide Up transition sample.
    It returns when the button below is pushed.

    Slide Down

    Slide Down transition sample.
    It returns when the button below is pushed.

    Pop

    Pop transition sample.
    It returns when the button below is pushed.

    Fade

    Fade transition sample.
    It returns when the button below is pushed.

    Flip

    Flip transition sample.
    It returns when the button below is pushed.

    Swap

    Swap transition sample.
    It returns when the button below is pushed.

     

     



    Leave a Comment

    Your email address will not be published.

    You may also like

    Trend