Css3 geçiş efektleri (Transition effects)

transitions

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 type="checkbox" name="slide" id="slide" />
<input type="checkbox" name="slideup" id="slideup" />
<input type="checkbox" name="slidedown" id="slidedown" />
<input type="checkbox" name="pop" id="pop" />
<input type="checkbox" name="fade" id="fade" />
<input type="checkbox" name="flip" id="flip" />
<input type="checkbox" name="swap" id="swap" />
<div id="main">
 <h1>Input Checkbox transition effects</h1>
 <p>Please select transition effect from the list below.</p>
 <menu>
 <li><label for="slide" onClick="">Slide</label></li>
 <li><label for="slideup" onClick="">Slide Up</label></li>
 <li><label for="slidedown" onClick="">Slide Down</label></li>
 <li><label for="pop" onClick="">Pop</label></li>
 <li><label for="fade" onClick="">Fade</label></li>
 <li><label for="flip" onClick="">Flip</label></li>
 <li><label for="swap" onClick="">Swap</label></li>
 </menu>
</div>
<div id="slide-container">
 <div>
 <h1>Slide</h1>
 <p>Slide transition sample.<br />It returns when the button below is pushed.</p>
 <label for="slide" class="back" onClick="">Back</label>
 </div>
</div>
<div id="slideup-container">
 <div>
 <h1>Slide Up</h1>
 <p>Slide Up transition sample.<br />It returns when the button below is pushed.</p>
 <label for="slideup" class="back" onClick="">Back</label>
 </div>
</div>
<div id="slidedown-container">
 <div>
 <h1>Slide Down</h1>
 <p>Slide Down transition sample.<br />It returns when the button below is pushed.</p>
 <label for="slidedown" class="back" onClick="">Back</label>
 </div>
</div>
<div id="pop-container">
 <div>
 <h1>Pop</h1>
 <p>Pop transition sample.<br />It returns when the button below is pushed.</p>
 <label for="pop" class="back" onClick="">Back</label>
 </div>
</div>
<div id="fade-container">
 <div>
 <h1>Fade</h1>
 <p>Fade transition sample.<br />It returns when the button below is pushed.</p>
 <label for="fade" class="back" onClick="">Back</label>
 </div>
</div>
<div id="flip-container">
 <div>
 <h1>Flip</h1>
 <p>Flip transition sample.<br />It returns when the button below is pushed.</p>
 <label for="flip" class="back" onClick="">Back</label>
 </div>
</div>
<div id="swap-container">
 <div>
 <h1>Swap</h1>
 <p>Swap transition sample.<br />It returns when the button below is pushed.</p>
 <label for="swap" class="back" onClick="">Back</label>
 </div>
</div>

 

 

0 Comments

Leave a Comment