“Change order” and “align to center” and “flexible width” using HTML5 and CSS3
Jul09

“Change order” and “align to center” and “flexible width” using HTML5 and CSS3

We can play the following items using below code: Change the order of baby boxes Align the baby boxes to center of father box Adjust baby box width flexible to fulfill the father box width .father { background:#CCCCCC; display:-moz-box; -moz-box-orient:horizontal; width:700px; -moz-box-pack:center; } .baby1 { background:#FF0000; padding:10px; margin:10px; color:#FFFFFF; -moz-box-ordinal-group:3; } .baby2 { background:#006600; padding:10px; margin:10px; color:#FFFFFF; -moz-box-flex:1; -moz-box-ordinal-group:2; } .baby3 { background:#0000FF; padding:10px; margin:10px; color:#FFFFFF; -moz-box-ordinal-group:4; } .baby4 { background:#999900; padding:10px; margin:10px; color:#FFFFFF; -moz-box-ordinal-group:1; } <div class="father"> <div class="baby1">Baby1</div> <div class="baby2">Baby2</div> <div class="baby3">Baby3</div> <div class="baby4">Baby4</div>...

Read More
Reversing the Box Order using HTML5 and CSS3
Jul08

Reversing the Box Order using HTML5 and CSS3

We can reverse the order of boxes using HTML5 and CSS3 using following code. .father{ background:#e2e2e2; padding:10px; /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; -moz-box-direction:reverse; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-direction:reverse; /* W3C */ display:box; box-orient:horizontal; box-direction:reverse; } .baby1{ background:#99FF66; padding:10px; margin:10px;} .baby2{ background:#FFFF66; padding:10px; margin:10px;} .baby3{ background:#CCFFCC; padding:10px; margin:10px;} .baby4{ background:#0099FF; padding:10px; margin:10px;} <section class="father"> <div class="baby1">baby1</div> <div class="baby2">baby2</div> <div class="baby3">baby3</div> <div class="baby4">baby4</div>...

Read More

Minimum HTML5 Document

Below is a simple HTML5 document, with the minimum of required tags: <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>

Read More

HTML5 Introduction

What is HTML5? HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs. How Did HTML5 Get Started? HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML. Some rules for HTML5 were established: New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the...

Read More
'