Form Validation Using HTML5 Form Attributes, CSS3 Animation And Box Shadow

Jayakumar 9/28/2012 , , , , , No comments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Form Validation Using CSS3 Animation And Box Shadow</title>
<style>
@-webkit-keyframes 'validation' {
 0% {
    -webkit-box-shadow: 0 0 12px rgba(51, 204, 255, .2);
    -moz-box-shadow: 0 0 12px rgba(51, 204, 255, .2);
    -o-box-shadow: 0 0 12px rgba(51, 204, 255, .2);
    -khtml-box-shadow: 0 0 12px rgba(51, 204, 255, .2);
    -ms-box-shadow: 0 0 12px rgba(51, 204, 255, .2);
    box-shadow: 0 0 12px rgba(51, 204, 255, .2);
}
 50% {
 -webkit-box-shadow: 0 0 12px rgba(51, 204, 255, .9);
 -moz-box-shadow: 0 0 12px rgba(51, 204, 255, .9);
 -o-box-shadow: 0 0 12px rgba(51, 204, 255, .9);
 -khtml-box-shadow: 0 0 12px rgba(51, 204, 255, .9);
 -ms-box-shadow: 0 0 12px rgba(51, 204, 255, .9);
 box-shadow: 0 0 12px rgba(51, 204, 255, .9);
}
 100% {
 -webkit-box-shadow: 0 0 12px rgba(51, 204, 255, .2);
 -moz-box-shadow: 0 0 12px rgba(51, 204, 255, .2);
 -o-box-shadow: 0 0 12px rgba(51, 204, 255, .2);
 -khtml-box-shadow: 0 0 12px rgba(51, 204, 255, .2);
 -ms-box-shadow: 0 0 12px rgba(51, 204, 255, .2);
 box-shadow: 0 0 12px rgba(51, 204, 255, .2);
}
}
 
@-webkit-keyframes 'validation-error' {
    0% {
        -webkit-box-shadow: 0 0 15px rgba(204,0,0,.1);
        -moz-box-shadow: 0 0 15px rgba(204,0,0,.1);
        -o-box-shadow: 0 0 15px rgba(204,0,0,.1);
        -khtml-box-shadow: 0 0 15px rgba(204,0,0,.1);
        -ms-box-shadow: 0 0 15px rgba(204,0,0,.1);
        box-shadow: 0 0 15px rgba(204,0,0,.1);
    }
    50% {
        -webkit-box-shadow: 0 0 15px rgba(204,0,0,.5);
        -moz-box-shadow: 0 0 15px rgba(204,0,0,.5);
        -o-box-shadow: 0 0 15px rgba(204,0,0,.5);
        -khtml-box-shadow: 0 0 15px rgba(204,0,0,.5);
        -ms-box-shadow: 0 0 15px rgba(204,0,0,.5);
        box-shadow: 0 0 15px rgba(204,0,0,.5);
    }
    100% {
        -webkit-box-shadow: 0 0 15px rgba(204,0,0,.1);
        -moz-box-shadow: 0 0 15px rgba(204,0,0,.1);
        -o-box-shadow: 0 0 15px rgba(204,0,0,.1);
        -khtml-box-shadow: 0 0 15px rgba(204,0,0,.1);
        -ms-box-shadow: 0 0 15px rgba(204,0,0,.1);
        box-shadow: 0 0 15px rgba(204,0,0,.1);
    }
}
/* input:focus styles */
input[type=text]:focus, textarea:focus, input[type=email]:focus, input[type=password]:focus{
    background: #fff;
    border:1px solid  rgba(51, 204, 255, 1);
    -webkit-animation: validation 1.5s infinite ease-in-out;
    -moz-animation: validation 1.5s infinite ease-in-out;
    -o-animation: validation 1.5s infinite ease-in-out;
    -khtml-animation: validation 1.5s infinite ease-in-out;
    -ms-animation: validation 1.5s infinite ease-in-out;
    animation: validation 1.5s infinite ease-in-out;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -o-border-radius:3px;
    -khtml-boder-radius:3px;
    -ms-border-radius:3px;
    border-radius:3px;
    outline: none; /* remove outline */
}
input:required:invalid, input:focus:invalid
{
    -webkit-animation: validation-error 1.5s infinite ease-in-out;
    -moz-animation: validation-error 1.5s infinite ease-in-out;
    -o-animation: validation-error 1.5s infinite ease-in-out;
    -khtml-animation: validation-error 1.5s infinite ease-in-out;
    -ms-animation: validation-error 1.5s infinite ease-in-out;
    animation: validation-error 1.5s infinite ease-in-out;
    border:1px solid  rgba(204, 0, 0, 1);
}
input, textarea, fieldset {
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -o-border-radius:3px;
    -khtml-boder-radius:3px;
    -ms-border-radius:3px;
    border-radius:3px;
    border: 1px solid #bbb;
    box-shadow: 0 1px 1px #fff;
    -webkit-box-shadow: 0 1px 1px #fff;
    -moz-box-shadow: 0 1px 1px #fff;
    -o-box-shadow: 0 1px 1px #fff;
    -khtml-box-shadow: 0 1px 1px #fff;
    -ms-box-shadow: 0 1px 1px #fff;
     
}
 
div{
background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, left top, left bottom, from(#badff3), to(#7acbed));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
    border: 1px solid #C3D4DB;
    border-top:1px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
    -webkit-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
    box-shadow:rgba(0,0,0,0.15) 0 0 1px;
    color:#444;
    font:normal 14px/24px Arial, Helvetica, Sans-serif;
    margin:0 auto 30px;
    overflow:hidden;
    width:460px;
    border-top:1px solid #fff;
    padding:22px 26px;
}
fieldset{
    background:#fff;
    border:1px solid #fff;
    padding:10px 20px;
    border-radius:5px;
}
legend{
    background:#fff;
    border-top:1px solid #fff;
    padding:22px 26px;
    font:normal 21px/14px Arial, Helvetica, Sans-serif;
    overflow:hidden;
    border-radius:5px;
}
 
input[type=text],
input[type=email],
input[type=password],
textarea
{
    border:1px solid #F7F9FA;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
    -webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
    box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
    margin:0px 0px 15px;
    padding:8px 6px;
    width:350px;
    display:block;
}
label{ margin:0px 0px 0px 25px; display:block;font:bold 14px/21px Arial, Helvetica, Sans-serif;}
input[type=submit]
{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:5px;
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, left top, left bottom, from(#badff3), to(#7acbed));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
    border:1px solid #7db0cc !important;
    cursor: pointer;
    padding:11px 16px;
    font:bold 15px/21px Arial, Helvetica, Sans-serif;
    text-shadow:rgba(0,0,0,0.2) 1px -1px 1px;
    color:#fff;
    -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    margin:0px 0px 0px 25px;
    padding:5px 21px;
}
 
input[type=submit]:hover,
input[type=submit]:focus,
input[type=submit]:active{
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #7acbed, #badff3);
    background:-webkit-gradient(linear, left top, left bottom, from(#7acbed), to(#badff3));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
input[type=submit]:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
h1 { margin:0px; padding:0px 0px 25px 0px;}
h1 a {
    display: block; text-decoration: none;
    font:bold 25px Helvetica, Arial, Sans-Serif; 
    text-align: center;
    color: #fff;
 }
    h1 a:hover {
        color: #fff;
        text-shadow:rgba(0,0,0,0.3) 1px 1px 1px;
    }
    h1 em{ font-weight:normal;}
p{ color:#fff;}
p a{ color:#fff;font-weight:bold; text-decoration:none;}
p a:hover{ font-weight:bold; text-decoration:underline;}
</style>
</head>
<body>
<div>
<h1><a href="#">Form Validation <em>using</em> CSS3 Animation <em>and</em> Box Shadow</a></h1>
<form class="form">
  <fieldset>
    <legend>Inquiry Form</legend>
     
      <label>Name:
        <input type="text" name="fullname" required placeholder="Your Good Name">
      </label>
     
      <label>Email:
        <input type="email" name="address" required placeholder="your.good.name@website.com">
      </label>
     
      <label>Password:
        <input type="password" required name="password">
      </label>
     
      <label>Description:
        <textarea  name="desc" placeholder="Write your comments here"></textarea>
      </label>
    <input name="button" type="submit" value="Submit">
  </fieldset>
  </form>
  <p>&copy; 2012 <a href="#" target="_blank">HTML5 & Css3 Stuffs</a></p>
</div>
</body>
</html>
action

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )

Followers

Translate

JOIN THE TEAM