In this post, I will be discussing some new html5 form elements and making form validate with CSS3 Animation. In my previous post on CSS3 Animation we have seen Animation using CSS3 Gradient. But in this post we will create animation using another awesome CSS3 property the ‘box-shadow’.
About Box Shadow Property
As per w3.org,
The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ‘inset’ keyword.
It means that just like other CSS3 properties, we can have more than one box-shadow which needs to be seperated by comma and the syntax for example is as follows.
[sourcecode language="css"]
box-shadow: 0 0 12px rgba(51, 204, 255, .2);
[/sourcecode]
Above code means that x and y value for box-shadow is 0, the width of how much shadow should spread is 12px and the color that shadow should take is the rgba value. The rgba is another awesome property in CSS3 which allows us to give the color in red, green, blue and alpha (for opacity or transparency) value.
About CSS3 Animation
As discussed in previous post, In this post also we will create a keyframe based animation as follows
[sourcecode language="css"]
@-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);
}
}
[/sourcecode]
In the above code we have named CSS3 animation as ‘validation‘ for valid form and ‘validation-error‘ for any error in filling the form. As animation is supported properly only in chrome the output will be viewed best in browser chrome. I have kept three intervals for both animations, 0% for start which has box-shadow in least alpha level, 50% makes box-shadow visible by increasing alpha level and 100% again lowering the opacity down. The change in the two is the color change which indicates the error or valid input.
But another main part in achieving the validation is of html5 form attributes. Lets understand those which are used in the example.
About attributes of HTML5 form
HTML5 introduces lots of new Form features with new form attributes and input types. I will be creating a post later on HTML5 forms but as of now lets see the HTML5 attributes and types used in the example.
The placeholder attribute
The placeholder attribute of HTML5 allows the input or textarea to set a placeholder text when the field is empty or not focused. Generally we use to do this using javascript, but now we can add text in the input or text field by using placeholder attribute as follows
[sourcecode language="css"]
<label>Name:
<input type="text" name="fullname" placeholder="Your Good Name">
</label>
[/sourcecode]
In the above code, we have used placeholder attribute in input element which shows when the field is empty and not focused.
The required attribute
The required attribute of HTML5 is the most important attribute for our example as this attribute decides whether the input is required or not. Required fields must have a value before you can submit the form. To make an input required all you have to do is add required in the input as follows
[sourcecode language="css"]
<label>Name:
<input type="text" name="fullname" required placeholder="Your Good Name">
</label>
[/sourcecode]
The above code has required attribute in input element which makes it required field.
The input type email
The input type email is another awesome addition which does almost all validation of email. If it is combined with required attribute the input field validation is enhanced considerably. It can be used as follows
[sourcecode language="css"]
<label>Email:
<input type="email" name="address" required placeholder="your.good.name@website.com">
</label>
[/sourcecode]
The above code shows the input is having type as email with both attributes required and placeholder. These attributes and their combination not only saves time but also we don’t need to create a lot of JavaScript code as most of the validation is done by the attributes themselves.
The full code for the example is as follows
[sourcecode language="css"]
<!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>© 2012 <a href="http://www.alldesignstuffs.com/" target="_blank">All Design Stuffs</a></p>
</div>
</body>
</html>
[/sourcecode]
Above code shows, HTML5 page containing basic inquiry form with CSS3 and HTML5 goodness. Check the demo below for live example. I hope you enjoyed the post as much as I have enjoyed creating it. Thanks for reading!!!
