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>