Creating Responsive HTML5 Page Using Media Queries

Jayakumar 9/28/2012 , , ,

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;}

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

Jayakumar 9/28/2012 , , , , ,
<!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>

Css Reset styles

Jayakumar 5/01/2012 , ,
body {
background:#0C0C0C none repeat scroll 0 0;
color:#fff;
font-family:verdana;
font-size:12px;
margin:0 auto;
padding:0;
width:952px;
}
html>body{
    font-size:8.5pt;
}
h1,h2,h3,h4,h5,h6,div,table,ul,ul li,p,form,a,img{
    margin:0;
    padding:0;
    outline:none;
}
img{
    border:0;
}
li{
    margin:0;
    padding:0;
    text-decoration:none;
    list-style:none;
}
a{
    text-decoration:none;
}
a:hover{
outline:none;
}
input{
    outline:none;
}
#top{
    position:absolute;
    left:-999em;
    width:990em;
}
.clsClearFix{
    overflow:hidden;
    zoom:1;
}
* html .clsClearFix{
    height:1%;
    overflow:visible;
}
 table{
    color:#000;
    margin:0;
    padding:0;
    width:99%;
}
    td{
        vertical-align:top;
        color:#000;
        border-collapse:collapse;
    }
/*-- End Of Common Styles --*/

/* 8 roundered corners */

* html .tlc-Escortnews,* html .trc-Escortnews{

height:1%}

* html .lb-Escortnews{
    width:100%
}
.lb,.tlc-Escortnews,.trc-Escortnews{
    zoom:1
}

.tlc-Escortnews{
    background:transparent url(../images/tlc-rose.jpg) no-repeat;
}
.trc-Escortnews{
    background:transparent url(../images/trc-rose.jpg) no-repeat right top;
}  
.blc-Escortnews{
    background:transparent url(../images/blc-rose.jpg) no-repeat left bottom;
}
.brc-Escortnews{
    background:transparent url(../images/brc-rose.jpg) no-repeat right bottom;
}
.tb-Escortnews{
    background:transparent url(../images/tb-rose.jpg) repeat-x;
}
.bb-Escortnews{
    background:transparent url(../images/bb-rose.jpg) repeat-x center bottom;
   
}  
.rb-Escortnews{
    background:transparent url(../images/rb-rose.jpg) repeat-y right top;
}
.lb-Escortnews{
    background:#fff url(../images/lb-rose.jpg) repeat-y left bottom;
}

/* TCB Coodes */


.top_hotlist_dark {
background:transparent url(../images/top_hotlist_dark.png) no-repeat scroll left top;
padding-top:33px;
}
.bottom_hotlist_dark {
background:transparent url(../images/bottom_hotlist_dark.png) no-repeat scroll left bottom;
padding-bottom:8px;
}
.center_hotlist_dark {
background:transparent url(../images/center_hotlist_dark.jpg) repeat-y scroll left top;
}

/* LCR */

     

  



.clsCommonProfileLink li a{ text-decoration:none;display:block;
    float:left;    }
.clsCommonProfileLink li a span span{   
    line-height:23px;
    font-size:11px;
    font-weight:bold;
    color:#000;   
    text-decoration:none;
    padding:0 6px;
}

.clsCommonProfileLink a:hover span ,.clsCommonProfileLink .clsActiveCommonProfileLink a span {
    background:url(bg-videoactiveleft.jpg) no-repeat left top;   
    float:left;
    height:36px;
    display:block;
    padding-left:6px;

}
.clsCommonProfileLink a:hover,.clsCommonProfileLink .clsActiveCommonProfileLink a{
    background:url(bg-videoactivearrow.jpg) no-repeat center 26px;
    color:#FFF;
        text-decoration:none;

}
.clsCommonProfileLink a:hover span span,.clsCommonProfileLink .clsActiveCommonProfileLink a span span{
    background:url(bg-videoactiveright.jpg) repeat-x right top;
    color:#FFF;
    display:block;
    float:left;
    height:27px;   
    padding:0 6px 0 0;
   
}







How to remove the BOM character from HTML Files?

Jayakumar 4/30/2012

Byte Order Mark (or BOM) tells the computer how the bytes are ordered in a Unicode document. Because Unicode can be used in 8, 16 and 32 bits –it is important for the computer to understand which encoding has been used. BOM tells exactly the same to the computer.

BOM is actually a “zero-width non-breaking space” (practically a NULL character) and it is represented as U+FEFF
Unicode
Encoding		 In ISO-8859-1
BOM appears as
UTF-8 
UTF-16

(big endian)		 þÿ
UTF-16

(little endian)		 ÿþ
UTF-32

(big endian)		 □□þÿ (□ is the ASCII null character)
UTF-32

(little endian)		 ÿþ□□ (□ is the ASCII null character)
In HTML code the BOM character can also appear as &#65279;

Remove BOM from an XML file

Just open the file in vim text editor use the “nobomb” command
# vim file.xml
:set nobomb
:wq

Removal from HTML Files

Even if you have set the “charset=utf-8″ meta property right -it does not mean that you will not face the BOM problem. If a BOM character is causing problems in your HTML display -the problem actually lies in the text editor and not in your HTML/CSS code.
Most HTML editors, like Dreamweaver, Programmer’s Notepad, TextPad etc., do provide a way to disable BOM. The option usually comes in the place where you set the encoding of your text editor. It may appear in the form of “UTF-8 without BOM” or “UTF-8 No BOM”
Appearance of &#65279; character in your HTML code can also be solved using the above encoding change in HTML editor.
Setting UTF without BOM in Macromedia Dreamweaver


Setting UTF without BOM in Programmer's Notepad




Detection and Removal of BOM in UNIX/Linux

Find the list of files containing BOM characters
1

find /var/www/website/ -type f -print -exec hd -n 3 {} \; | grep -1 "ef bb bf" | grep "some_part_of_the_path" > bom_lines.txt

Remove BOM character
1

while read l; do sed -i '1 s/^\xef\xbb\xbf//' $l ; done < bom_lines.txt




Div Centered Vertically and Horizontally

Jayakumar 4/30/2012 , , , , ,

<.div id="horizon">
<.div id="content">




Css :

#horizon {
background-color: transparent;
color: white;
display: block;
height: 1px;
left: 0;
overflow: visible;
position: absolute;
text-align: center;
top: 50%;
visibility: visible;
width: 100%;
}
#content {
background-color: transparent;
font-family: Verdana,Geneva,Arial,sans-serif;
height: 70px;
left: 50%;
margin-left: -125px;
position: absolute;
top: -35px;
visibility: visible;
width: 250px;
}

HTML5 Reset Stylesheet

Jayakumar 4/06/2012 , ,
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

How CSS Positioning Works?

Jayakumar 3/12/2012 , , ,

The position property is one of the most useful tools that designers have in their CSS toolbox. However, there are a few concepts about positioning that might baffle beginners. First, what is positioning?

When your browser opens a webpage, it starts rendering elements (divs, paragraphs, headings etc.) in the order they appear in the HTML markup of the page. Positioning is a natural way of organizing how the elements are displayed and an easy resolution to situations like overlaps. There are four types of positioning: static, relative, absolute and fixed.

Elements are statically positioned by default

The default positioning, which is implicitly applied to every element on the page, is static. Static positioning means that every element is positioned in the natural order it is added to the page. Block elements are displayed under other block elements, and inline elements are displayed next to other inline elements.

Relative positioning

Setting the positioning to relative does not by itself produce any noticeable difference in the way the element is displayed on the page. But you can now move it from its normal position with the top, left, bottom and right CSS properties. This comes really handy when dealing with situations in which you need to offset an element, but not anchor it to a specified position on the page.

.relativeDiv{

/*
    Moving the div to the top-left
    from where it would normally show:
 */

position:relative;
top:-50px;
left:-100px;

}

Fixed positioning

Adding position:fixed to the CSS declarations of an element, positions it in relation to the browser window. This allows you to display toolbars, buttons or navigation menus, which are anchored at a fixed position and scroll with the page.

.fixedDiv{

/*
    Fixing the div 20 px from the bottom
    of the browser window:
 */

position:fixed;
right:20px;
bottom:20px;

}

Probably the only drawback is that this positioning is not supported in older browsers like IE6, if you can’t afford the luxury of dropping support for these.

Absolute positioning

An absolutely positioned element is displayed on the page in relation to the document, or a parent element with a positioning different from static. This way, using the top, left, bottom and right CSS properties, you can specify an exact position.

.parentDiv{

/* Absolute and Fixed positioning would work as well: */

position:relative;

}

.absoluteDiv{

/*
    Displaying the div 50px from the right and 90px from
    the top of its parent because of the explicit positioning
 */

position:absolute;
right:50px;
top:90px;

}

The benefits

Using these positioning properties you can achieve all kinds of advanced page layouts, which will bring your designs to the next level. In conjunction with the z-index property, you can change the default overlay rules that apply to elements (elements which appear later in the code are shown above the previous ones).

Subscribe to: Posts ( Atom )

Followers

Translate

JOIN THE TEAM