Skip to content

Instantly share code, notes, and snippets.

@freshyill

freshyill/fancyform

Created August 17, 2011 18:57
Show Gist options
  • Save freshyill/1152309 to your computer and use it in GitHub Desktop.
Save freshyill/1152309 to your computer and use it in GitHub Desktop.
Download ZIP
Fancy show/hide form with CSS3 and jQuery
Raw
fancyform
<!doctype html>
<html>
<head>
<style type="text/css">
body {background: #333; font-family: Helvetica; padding: 20px;}
.container {width: 80%; margin: 20px auto; padding: 0; position: relative;}
article {background: #666; margin: 0; padding: 50px; border-radius: 4px; box-shadow: 0 0 15px #000, 0 1px 1px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,0.3) inset; position: relative; -webkit-perspective: 1000; z-index: 2; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5);}
form {color: #222; text-shadow: -1px 0 #fff; padding: 20px; background: #ccc; position: absolute; -webkit-transition: all .8s ease-in-out; box-shadow: 0 0 10px #000, 0 1px 0 rgba(255,255,255,.3) inset; width: 100%; -webkit-box-sizing: border-box; width: 50%; margin: 0 auto; top: 50px; left: 50px; opacity: 0;}
@-webkit-keyframes show-form {
from {-webkit-transform: translate3d(0,0,0); opacity: 0; z-index: 1;}
50% {-webkit-transform: translate3d(-130%,-130px,0); opacity: 1;}
to {-webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 3;}
}
@-webkit-keyframes hide-form {
from {-webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 3;}
50% {-webkit-transform: translate3d(-130%,-130px,0); opacity: 1;}
80% {-webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 1;}
to {opacity: 0;}
}
.showing {-webkit-animation: show-form 1s 0 1 both;}
.hiding {z-index: 1; -webkit-animation: hide-form 1.3s 0 1 both;}
</style>
</head>
<body>
<div class="container">
<article>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="add">Add a comment</a></p>
</article>
<form>
<h1>Form</h1>
<p><input placeholder="name"></p>
<p><input placeholder="email"></p>
<textarea placeholder="message"></textarea>
<p><input type="submit"></p>
<a href="#" class="cancel">Cancel</a>
</form>
</div>
<script src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$('.add').click(function(){
$('.form').addClass('showing');
$('.form').removeClass('hiding');
});
$('.cancel').click(function(){
$('.form').addClass('hiding');
$('.form').removeClass('showing');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment