Creating Responsive HTML5 Page Using Media Queries

Jayakumar 9/28/2012 , , , 13 comments

About Responsive Web Page


Responsive Web Page is a page that responds to the screen size, platform and orientation which helps user to easily check the page. The web page can be made responsive by mixing of flexible widths, intelligent structure and proper use of CSS media queries.

A responsive web page helps user to easily switch from their laptop to iPad and any other devices which will render that page. The web page automatically switches to the required dimensions and helps user to enjoy the page at any resolutions.

In other words, it automatically responds to the user’s preferences and hence eliminates the need for another web page for targeting different gadgets in the market. All this is made possible by the use of Media Queries.

About Media Queries


Media queries was used even in CSS2 when it allowed us to create specific style-sheets for media type such as print or screen. Now with the additions in CSS3, Media Queries has become more powerful and efficient to use in the web pages.

Media Queries allows us to add expressions to media type to check for specific conditions and depending on that make adjustments in the stylesheet to display our page with respect to those conditions.

For example, you can specify different styles for desktop and different styles for mobile. It is extremely powerful because it allows us to make web page render in almost all different resolutions and devices without changing the content. So lets move ahead and see how this can be done.

Creating Responsive Web Page



About @media all

When you use @media all it will add the style to all media. Even if we don’t add it in the media query, by default all is the value considered.
As per W3org,
A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.

About @media screen and (min-width: 1401px)

As we discussed so far, when we add screen then the device type the style will apply is screen and the other condition is that when the minimum width is 1401px the style inside that will execute. That is, if the size is 1401px or above the style will respond.

About @media screen and (max-width: 1401px)

Now again the device type targeted is screen but if the code is max-width: 1401px then the style will only respond till 1401px or below. That is, it will not execute the specific style if the width is above 1401px.

About @media screen and (min-width: 1200px) and (max-width: 1400px)

Now here is the main part, the device type is screen and we can restrict the style to execute in specific range. That is if (min-width: 1200px) and (max-width: 1400px) then the style inside the media query will only apply when the width is between 1200px and 1400px.
This makes the web page extremely powerful because now we don’t need to create another page for a specific width. Suppose If we want to see the same site in iPad or iPhone, all we have to do is yes you are right. Just make changes in the minimum width and maximum width and the style will execute depending on the conditions mentioned.
But that is not the only thing. One more important thing is to add the most important meta tag with the code shown below to the head area.

Adding meta tag to render it properly in mobile phones

1
<meta name="viewport" content="width=device-width; initial-scale=1" />

The above code will help the site to render beautifully in the mobile devices such as iPhone etc. Because adding the meta viewport code overrides the default of mobile devices which rescales the web page to fit the tiny screen. But with the use of meta viewport the issue is sorted by leaving them as per the device width that is if their width is the same as the device’s width more specifically for iphone (in either portrait or lanscape mode).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<title>Creating Responsive HTML5 Page Using Media Queries</title>
<style>
/*HTML5 Tags Styles starts here */
header, hgroup, nav, article, section, footer, aside, address{ display:block;}
time{  font-style:italic; padding:0px 5px;}
address{ font-size:11px; padding:10px 10px; text-align:right }
body{ font-family:Georgia, "Times New Roman", Times, serif; }
h1{
    font-size: 25px; margin:0px;}
.sidebar h1, #comments h1{ font-size:18px; padding:0px; border-bottom:2px solid #dedede;}
/*
Main Styles
*/
#Wrapper{ width: 90%; margin:0px auto;}
#Wrapper2{ overflow:hidden; border:1px dotted #ddd;}
#header {
    width: 100%;
     
}
#navigation {
    height: 37px;
    border: 1px solid #ddd;
    margin:0px auto;
    background-color:#f9f9f9;
    background-image:-webkit-linear-gradient( 90deg, #ccc 0%, #f9f9f9 10%, #fff 90%, #ccc 100%)
}
#navigation ul {
    list-style: none;
    margin:0px;
    padding:0px;
}
#navigation ul li {
    float: left;
    border-right: 1px solid #ddd;
    text-shadow: 0 1px 0 #fff;
}
#navigation ul li:nth-last-child(1){ border-right:none;}
#navigation ul li a {
    display: inline-block;
    padding: 0 15px;
    height: 37px;
    line-height: 38px;
    text-decoration: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    color: #888;
    font-weight: bold;
}
#navigation ul li a:active {
    background: #f6f6f6;
    -webkit-box-shadow: inset 0 2px 5px #ddd;
    -moz-box-shadow: inset 0 2px 5px #ddd;
    box-shadow: inset 0 2px 5px #ddd;
}
#navigation ul li a:hover{ color:#000;}
#title h1 a, #title h1 a:hover, #title h1 a:hover, #title h1 a:hover  {
    margin: 40px auto 20px auto;
    padding: 15px auto;
    display: inline-block;
    text-decoration: none;
    color: #444;
    -webkit-font-smoothing: antialiased;
    border-bottom: 6px solid transparent;
    text-rendering: optimizeLegibility;
     
}
#title h1 a:hover {
    border-bottom: 6px solid #eee;
}
#title h2 {
    font-weight: bold;
    color: #aaa;
    font-size: 14px;
    line-height: 140%;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    padding:5px 0px;
}
#title h2 small {
    color: #000;
    font-size: 13px;
     
    font-weight: bold;
    text-transform: uppercase;
}
#title h2 a {
    text-decoration: none;
    color: #999;
}
#contents{
    min-height: 408px;
    width: 65%;
    float: left;
    padding:15px;
    overflow:hidden;
    line-height:21px;
}
#contents h1{ padding:5px 0px;}
#sidebar-wrapper {
    float: left;
    width:29%;
    padding:10px;
    border-right:1px solid #ccc;
     
     
}
.sidebar {
    float: left;
    padding: 10px;
    width:90%;
}
.sidebar li{ padding:5px 0px;}
#comments article{ background-color:#fff; }
#comments footer{ background-color:#f9f9f9;border-top:2px solid #CCC;border-bottom:3px solid #CCC; font-size:11px;}
#comments footer p{ padding:0px; margin:0px; }
blockquote{ padding:10px; margin:0px 0px; border-bottom:1px solid #dedede;}
blockquote:before {
content: '\201C';
}
blockquote:after {
content: '\201D';
}
#copyrights{border-top:3px solid #CCC;border-bottom:3px solid #CCC;}
#copyrights p{ float:left; margin:10px 15px 0px 0px;}
@media all {
    #Wrapper,#navigation ul li a {
        -webkit-transition: width 1s ease-in-out;
        -moz-transition: width 1s ease-in-out;
        -o-transition: width 1s ease-in-out;
        transition: width 1s ease-in-out;
    }
}
@media screen and (min-width: 1401px){
    #Wrapper{ width: 1300px; margin:0px auto;}
    #contents{
    width: 65%;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
    #Wrapper{ width: 1100px; margin:0px auto;}
    #contents{
    width: 65%;
    }
}
@media screen and (min-width: 961px) and (max-width: 1200px) {
    #Wrapper{ width: 960px; margin:0px auto;}
    #contents{
    width: 65%;
    }
    #contents h1{ line-height:30px;}
}
@media screen and (min-width: 859px) and (max-width: 960px) {
    #Wrapper{ width: 830px; margin:0px auto;}
    #navigation ul li a{ font-size:12px; padding:0px 11px;}
    #contents{
    width: 63%;
    }
    #contents h1{ line-height:30px;}
}
@media screen and (min-width: 761px) and (max-width: 860px) {
    #Wrapper{ width: 740px; margin:0px auto;}
    #navigation ul li a{ font-size:12px; padding:0px 11px;}
    #contents{
    width: 63%;
    }
    #contents h1{ line-height:30px;}
}
@media screen and (min-width: 641px) and (max-width: 760px) {  
    #Wrapper{ width: 620px; margin:0px auto;}
    header{ text-align:center;}
    #navigation{ height:190px;}
    #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; }
    #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;}
    #contents{
    width: 55%;
    font-size:12px;
    }
    #contents h1{ font-size:16px; text-align:left;}
    #comments h1,.sidebar h1{ font-size:12px; text-align:left;}
    #sidebar-wrapper {
    float: left; font-size:11px;
    width:30%;clear:both;
    }
}
@media screen and (min-width: 421px) and (max-width: 640px) {
    #Wrapper{ width: 420px; margin:0px auto;}
    header{ text-align:center;}
    #navigation{ height:190px;}
    #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; }
    #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;}
    #contents{
    width: 95%;
    font-size:12px;position:relative;
    }
    #contents h1{ font-size:16px; text-align:left;}
    #comments h1,.sidebar h1{ font-size:12px; text-align:left;}
    #sidebar-wrapper {
    float: none; font-size:11px;
    width:95%;clear:both;
    }
}
@media screen and (min-width: 320px) and (max-width: 420px) {
    #Wrapper{ width: 320px; margin:0px auto;}
    header{ text-align:center;}
    #navigation{ height:190px;}
    #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; }
    #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;}
    #contents{
    width: 95%;
    font-size:12px;position:relative;
    }
    #contents h1{ font-size:16px; text-align:left;}
    #comments h1,.sidebar h1{ font-size:12px; text-align:left;}
    #sidebar-wrapper {
    float: none; font-size:11px;
    width:95%;clear:both;
    }
}
@media screen and (min-width: 0px) and (max-width: 319px) {
    #Wrapper{ width: 100%; margin:0px auto;}
    header{ text-align:center;}
    #navigation{ height:190px;}
    #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; }
    #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;}
    #contents{
    width: 95%;
    font-size:12px;position:relative;
    }
    #contents h1{ font-size:16px; text-align:left;}
    #comments h1,.sidebar h1{ font-size:12px; text-align:left;}
    #sidebar-wrapper {
    float: none; font-size:11px;
    width:95%;clear:both;
    }
}
/* ----------------------------------------------------------- all the css for print ------------------------------------------------------------- */
@media print {
     
}
/*HTML5 Tags Styles ends here */
</style>
<script>
document.createElement('header');document.createElement('hgroup');
document.createElement('nav');document.createElement('article');
document.createElement('section');document.createElement('time');
document.createElement('footer');document.createElement('aside');
document.createElement('address');
</script>
</head>
<body>
<!-- Div Wrapper Element Starts Here -->
<div id="Wrapper">
<!-- Header Element Starts Here -->
<header id="header">
    <!-- Hgroup Element Starts Here -->
  <hgroup id="title">
    <h1>HTML5</h1>
    <h2>Fifth <small>major</small> revision!</h2>
  </hgroup>
  <!-- Hgroup Element Ends Here -->
   
  <!-- Nav Element Starts Here -->
  <nav id="navigation">
    <ul>
    <li><a href="#" target="_blank">Our Home</a></li>
      <li><a href="#" target="_blank">RSS Feed of all articles</a></li>
      <li><a href="#" target="_blank">JOIN US on TWITTER</a></li>
      <li><a href="#" target="_blank">JOIN US on FACEBOOK</a></li>
      <li><a href="#" target="_blank">Contact Us</a></li>
    </ul>
  </nav>
  <!-- Nav Element Ends Here -->
   
</header>
<!-- Header Element Ends Here -->
<!-- Div wrapper2 starts here -->
<div id="Wrapper2">
<!-- Aside Element Starts Here -->
<aside id="sidebar-wrapper">
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav class="sidebar">
   <h1>My Links</h1>
   <ul>
    <li><a href="#" target="_blank">Portfolio</a>
    <li><a href="#" target="_blank">Twitter</a>
   </ul>
  </nav>
  <nav class="sidebar">
   <h1>Recent Posts</h1>
   <ol reversed>
    <li><a href="#" target="_blank">CSS3 Image Rack Part 2</a>
    <li><a href="#" target="_blank">CSS3 Image Rack Part 1</a>
   </ol>
  </nav>
  
 <!-- Aside Element Ends Here -->
  
 <!-- Another Aside Element Starts Here -->
 <section class="sidebar">
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog -->
  <h1>Twitter Feed</h1>
  <blockquote cite="#">
   CSS3 Image Rack Part 2 <a href="#" target="_blank">#5</a>
  </blockquote>
  <blockquote cite="#">
   CSS3 Image Rack Part 1 <a href="#" target="_blank">#>
  </blockquote>
   
  </section>
 </aside>
 <!-- Another Aside Element Ends Here -->
<!-- Article Element Starts Here -->
<article id="contents">
<!-- Article's Header Element Starts Here -->
  <header>
    <h1>Creating Responsive HTML5 Page Using Media Queries</h1>
  </header>
<!-- Article's Header Element Ends Here --> 
   
  <p>In this tutorial, I will be creating responsive web page using <a href="#" title="Creating HTML5 page with CSS3" target="_blank">HTML5 page that was done in previous HTML5 post on Creating HTML5 page with CSS3</a>...<br/><br/>[<a href="#" target="_blank">Read more</a>]</p>
   
  <!-- Article's Comments Section Element Starts Here -->
  <section id="comments">
    <h1>Comments</h1>
    <article>
       
      <p>Nice post on html5 structure!</p>
      <footer>

        </p>
      </footer>
    </article>
    <article>
       
      <p>Good post on html5 markups!</p>
      <footer>
        <p>Footer
        </p>
      </footer>
    </article>
  </section>
  <!-- Article's Comments Section Element Ends Here -->
   
</article>
<!-- Article Element Ends Here -->
</div>
<!-- Div wrapper2 ends here -->
<!-- Footer Element Starts Here -->
<footer id="copyrights">
 <p><small>© 2011 <a href="#" target="_blank">HTML5 & Css3 Stuffs</a></small></p>
  <p><a href="#" target="_blank">About Us</a> - <a href="#" target="_blank">CSS3</a> - <a href="#" target="_blank">Contact Us</a></p>
  <address>
  For more details, contact
  <a href="#">HTML5 & Css3 Stuffs</a>.
 </address>
</footer>
<!-- Footer Element Ends Here -->
</div>
<!-- Div Wrapper Element ends Here -->
</body>
</html>


Since html5 is not yet fully supported by older versions of IE and some other browsers. We can use below script to render it in the browser which does not support html5.

<script>
document.createElement('header');document.createElement('hgroup');
document.createElement('nav');document.createElement('article');
document.createElement('section');document.createElement('time');
document.createElement('footer');document.createElement('aside');
document.createElement('address');
</script>


Since the html5 elements are not having any default style in older browsers. We can use html5 reset for our page is as shown below so that the elements get default values. As all of them are mainly block level element I have made them as block element in css as shown below.

/*HTML5 Tags Styles starts here */
header, hgroup, nav, article, section, footer, aside, address{ display:block;}
action

13 comments :

Post a Comment

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: Posts ( Atom )

Followers

Translate

JOIN THE TEAM