Etiket: Slide Transition

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <style type="text/css">
 @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);

.feed {
-webkit-transition: 0.3s;
transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
-moz-transition: 0.3s;
 position:absolute;
 margin:-150px 320px;
 padding:2px 4px;
 border: 1px solid rgba(0,0,0,.2);
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 background-color: #0082ff; 
 overflow: hidden; 
 z-index:9999;
 color:white;
 cursor:pointer;
}
#developer {
-webkit-transition: 0.3s;
transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
-moz-transition: 0.3s;
 position:fixed;
 top:100px;
 left:-340px;
 width: 320px;
 height: 333px;
 padding:20px;
 border: 1px solid rgba(0,0,0,.2);
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 background: rgba(0, 0, 0, 0.5); 
 -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
 -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
 box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
 overflow: hidden; 
 z-index:9998;
 padding-top:10px;
}

#developer textarea{
 background: rgba(255, 255, 255, 0.4); 
 width: 296px;
 height: 90px;
 border: 1px solid rgba(255,255,255,.6);
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box; 
 display:block;
 font-family: 'Source Sans Pro', sans-serif;
 font-size:18px;
 color:#fff;
 padding-left:20px;
 padding-right:0px;
 padding-top:12px;
 margin-bottom:10px;
 overflow:hidden;
}

#developer input {
 width: 296px;
 height: 48px;
 border: 1px solid rgba(255,255,255,.4);
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box; 
 display:block;
 font-family: 'Source Sans Pro', sans-serif;
 font-size:18px;
 color:#fff;
 padding:auto 10px;
 margin-bottom:10px;
}

#developer input[type=submit] {
 cursor:pointer;
}

#developer input.name {
 background: rgba(255, 255, 255, 0.4); 
 padding-left:20px;
}

#developer input.email {
 background: rgba(255, 255, 255, 0.4);
 padding-left:20px;
}

#developer input.message {
 background: rgba(255, 255, 255, 0.4) ;
 padding-left:20px;
}

::-webkit-input-placeholder {
 color: #fff;
}

:-moz-placeholder{ 
 color: #fff; 
}

::-moz-placeholder {
 color: #fff;
}

:-ms-input-placeholder { 
 color: #fff; 
}

#developer input:focus, #developer textarea:focus { 
 background-color: rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
 -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
 box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
 overflow: hidden; 
}

.btn {
 width: 138px;
 height: 44px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 display:block;
 border: 1px solid #253737;
 background: #416b68;
 background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
 background: -webkit-linear-gradient(top, #6da5a3, #416b68);
 background: -moz-linear-gradient(top, #6da5a3, #416b68);
 background: -ms-linear-gradient(top, #6da5a3, #416b68);
 background: -o-linear-gradient(top, #6da5a3, #416b68);
 background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
 padding: 10.5px 21px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
 -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 text-shadow: #333333 0 1px 0;
 color: #e1e1e1;
}

.btn:hover {
 border: 1px solid #253737;
 text-shadow: #333333 0 1px 0;
 background: #416b68;
 background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
 background: -webkit-linear-gradient(top, #77b2b0, #416b68);
 background: -moz-linear-gradient(top, #77b2b0, #416b68);
 background: -ms-linear-gradient(top, #77b2b0, #416b68);
 background: -o-linear-gradient(top, #77b2b0, #416b68);
 background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
 color: #fff;
 }
.btn:active {
 margin-top:1px;
 text-shadow: #333333 0 -1px 0;
 border: 1px solid #253737;
 background: #6da5a3;
 background: -webkit-gradient(linear, left top, left bottom, from(#416b68), to(#416b68));
 background: -webkit-linear-gradient(top, #416b68, #609391);
 background: -moz-linear-gradient(top, #416b68, #6da5a3);
 background: -ms-linear-gradient(top, #416b68, #6da5a3);
 background: -o-linear-gradient(top, #416b68, #6da5a3);
 background-image: -ms-linear-gradient(top, #416b68 0%, #6da5a3 100%);
 color: #fff;
 -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 }
 </style>
 <form id="developer">
 <input name="name" placeholder="Adınız?" class="name" required />
 <input name="emailaddress" placeholder="E-Mail Adresiniz?" class="email" type="email" required />
 <input name="url" placeholder="url" class="email" type="url" disabled value="<?php echo "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];?>"/>
<textarea rows="4" cols="50" name="subject" placeholder="Hata Raporu" class="message" required></textarea>
 <input name="submit" class="btn" type="submit" value="Bildir" />
 <div class="feed">+</div>
 </form>
 <script type="text/javascript">
 var deger=1;
$(".feed").click(function() {

 if(deger == 1){
 $("#developer").css("left", "+=340");
 deger=0;
 }else{
 $("#developer").css("left", "-=340");
 deger=1;
 }
});
 </script>