Showing posts with label CSS3 Box Shadow. Show all posts
Showing posts with label CSS3 Box Shadow. Show all posts
Form Validation Using HTML5 Form Attributes, CSS3 Animation And Box Shadow
<!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></div></body></html> |
CSS3 Box Shadow
CSS Box Shadow
Used in casting shadows off block-level elements (like divs).
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}- The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
- The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
- The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
- Color
Inner Shadow
Example
Internet Explorer Box Shadow
You need extra elements...
<div class="shadow1">
<div class="content">
Box-shadowed element
</div>
</div>.shadow1 {
margin: 40px;
background-color: rgb(68,68,68); /* Needed for IEs */
-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}
.shadow1 .content {
position: relative; /* This protects the inner element from being blurred */
padding: 100px;
background-color: #DDD;
}
Subscribe to:
Posts
(
Atom
)