Post
Ask Question

Create Various Model Boxes Using HTML5

Introduction

 
This is a simple application for beginners that shows how to create various types of boxes using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically, HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop various types of boxes for applications. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is an important tag of an HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to create various types of boxes for applications using HTML 5 and CSS tools.
 
Step 1: First open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "Box".
Step 2: Create a Folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "Sam".
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "Model.aspx".
webapplication.gif
 
Step 4: Add an HTML file to your web application.
  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Boxmodel.html".
html.gif
 
Step 5: Now in this step we set all CSS properties of a centered box and reversed box. Now we set the height, width, alignment, and font of the boxes.
 
Code
  1. <style>  
  2.    .HB  
  3.    {  
  4.    display: -webkit-box;  
  5.   -webkit-box-orient: horizontal;  
  6.    display: -moz-box;  
  7.   -moz-box-orient: horizontal;  
  8.    display: box;  
  9.    box-orient: horizontal;  
  10.    width: 500px;  
  11.    height: 100px;  
  12.    background-color:Green;  
  13.    border: 2px solid peru;  
  14.     }  
  15.   .CB  
  16.   {  
  17.   -webkit-box-align: center;  
  18.   -webkit-box-pack: center;  
  19.   -moz-box-align: center;  
  20.   -moz-box-pack: center;  
  21.    box-align: center;  
  22.    box-pack: center;  
  23.       }  
  24.   .JB   
  25.   {  
  26.   -webkit-box-align: center;  
  27.   -webkit-box-pack: justify;  
  28.   -moz-box-align: center;  
  29.   -moz-box-pack: justify;  
  30.    box-align: center;  
  31.    box-pack: justify;  
  32.     }  
  33.   .RB  
  34.   {  
  35.   -webkit-box-direction: reverse;  
  36.   -moz-box-direction: reverse;  
  37.    box-direction: reverse;  
  38.       }  
  39.   .CB  
  40.    {  
  41.    width: 100px;  
  42.    height: 50px;  
  43.    border: 1px solid black;  
  44.    font: 16px/50px Arial;  
  45.    text-align: center;  
  46.     }  
  47.   .BG1  
  48.   {  
  49.    webkit-box-ordinal-group: 1;  
  50.    moz-box-ordinal-group: 1;  
  51.    box-ordinal-group: 1;  
  52.     }  
  53.  .BG2  
  54.  {  
  55.   -webkit-box-ordinal-group: 2;  
  56.   -moz-box-ordinal-group: 2;  
  57.   box-ordinal-group: 2;  
  58.    }  
  59.  p   
  60. {  
  61.   font: 20px Arial;  
  62.      }  
  63.  </style> 
Step 6 : Now in this step we set the content, color and style of the body.
 
Code
  1. <body>  
  2.   <p>Center Box</p>  
  3.   <div class="HB CB">  
  4.   <div class="CB" style="background-color: #00FFFF">Home</div>  
  5.   <div class="CB" style="background-color: #00FFFF">About</div>  
  6.   <div class="CB" style="background-color: #00FFFF">Contect Us</div>  
  7.   </div>  
  8.   <p>Justified Box</p>  
  9.   <div class="HB JB">  
  10.   <div class="CB" style="background-color: #3399FF">Home</div>  
  11.   <div class="CB" style="background-color: #3399FF">About</div>  
  12.   <div class="CB" style="background-color: #3399FF">Contect Us</div>  
  13.   </div>  
  14.   <p>Reverse Box</p>  
  15.   <div class="HB RB">  
  16.   <div class="CB" style="background-color: #FF66CC">Home</div>  
  17.   <div class="CB" style="background-color: #FF66CC">About</div>  
  18.   <div class="CB" style="background-color: #FF66CC">Contect Us</div>  
  19.   </div>  
  20.   <p>Center Box - children divided into 2 ordinal groups</p>  
  21.   <div class="HB CB">  
  22.   <div class="CB BG1" style="background-color: #FF8080">Home</div>  
  23.   <div class="CB BG2" style="background-color: #FF8080">About</div>  
  24.   <div class="CB BG1" style="background-color: #FF8080">Contect Us</div>  
  25.       </div>  
  26.  </body> 
body111.gif
 
body.gif
 
Step 7: Now in this step we write a function with the name toArray that provides the functionality of converting a node list to an array and update the size of an inner box.
 
Code
  1. function toArray(nodelist)  
  2.   {  
  3.    return Array.prototype.slice.call(nodelist);  
  4.       }  
  5.   var flex_children = [  
  6.   toArray(document.getElementsByClassName('FC1')),  
  7.   toArray(document.getElementsByClassName('FC2'))  
  8.           ];  
  9.   function updateDisplayInfo() {  
  10.   var hbox = toArray(document.querySelectorAll('.HB > *'));  
  11.   var vbox = toArray(document.querySelectorAll('.VB > *'));  
  12.   hbox.forEach(function (node) {  
  13.    node.innerHTML = 'w: ' + getComputedStyle(node, null).getPropertyValue('width');  
  14.             });  
  15.    vbox.forEach(function (node) {  
  16.                 node.innerHTML = 'h: ' + getComputedStyle(node, null).getPropertyValue('height');  
  17.         });  
  18.   } 
Step 8: Now in this step we write a functionality button event listener that shows a message to enable flexibility.
 
Code
  1. var btn = document.getElementById('switch-btn');  
  2.    btn.addEventListener('click', function () {  
  3.    if (this.value == 'flex') {  
  4.        this.value = 'inflex';  
  5.        this.innerHTML = 'Enable';  
  6.        flex_children.forEach(function (array) {  
  7.        array.forEach(function (node) {  
  8.        node.removeAttribute('class');  
  9.            });  
  10.         });  
  11.         }   
  12.       else   
  13.      {  
  14.        this.value = 'flex';  
  15.        this.innerHTML = 'Disable Flexibility!';  
  16.        flex_children.forEach(function (array, index) {  
  17.        array.forEach(function (node) {  
  18.        node.setAttribute('class', 'Fc' + (index + 4));  
  19.        });  
  20.     });  
  21.  } 
Step 9 : The complete code of an application is given below.
  1. <html>  
  2. <head>  
  3.  <style>  
  4.    .HB  
  5.    {  
  6.    display: -webkit-box;  
  7.   -webkit-box-orient: horizontal;  
  8.    display: -moz-box;  
  9.   -moz-box-orient: horizontal;  
  10.    display: box;  
  11.    box-orient: horizontal;  
  12.    width: 500px;  
  13.    height: 100px;  
  14.    background-color:Green;  
  15.    border: 2px solid peru;  
  16.     }  
  17.   .CB  
  18.   {  
  19.   -webkit-box-align: center;  
  20.   -webkit-box-pack: center;  
  21.   -moz-box-align: center;  
  22.   -moz-box-pack: center;  
  23.    box-align: center;  
  24.    box-pack: center;  
  25.       }  
  26.   .JB {  
  27.   -webkit-box-align: center;  
  28.   -webkit-box-pack: justify;  
  29.   -moz-box-align: center;  
  30.   -moz-box-pack: justify;  
  31.    box-align: center;  
  32.    box-pack: justify;  
  33.     }  
  34.   .RB  
  35.   {  
  36.   -webkit-box-direction: reverse;  
  37.   -moz-box-direction: reverse;  
  38.    box-direction: reverse;  
  39.       }  
  40.   .CB  
  41.    {  
  42.    width: 100px;  
  43.    height: 50px;  
  44.    border: 1px solid black;  
  45.    font: 16px/50px Arial;  
  46.    text-align: center;  
  47.     }  
  48.   .BG1  
  49.   {  
  50.    webkit-box-ordinal-group: 1;  
  51.    moz-box-ordinal-group: 1;  
  52.    box-ordinal-group: 1;  
  53.     }  
  54.  .BG2  
  55.  {  
  56.   -webkit-box-ordinal-group: 2;  
  57.   -moz-box-ordinal-group: 2;  
  58.   box-ordinal-group: 2;  
  59.    }  
  60.  p {  
  61.   font: 20px Arial;  
  62.       }  
  63.  </style>  
  64. </head>  
  65. <body>  
  66.   <p>Center Box</p>  
  67.   <div class="HB CB">  
  68.   <div class="CB" style="background-color: #00FFFF">Home</div>  
  69.   <div class="CB" style="background-color: #00FFFF">About</div>  
  70.   <div class="CB" style="background-color: #00FFFF">Contect Us</div>  
  71.   </div>  
  72.   <p>Justified Box</p>  
  73.   <div class="HB JB">  
  74.   <div class="CB" style="background-color: #3399FF">Home</div>  
  75.   <div class="CB" style="background-color: #3399FF">About</div>  
  76.   <div class="CB" style="background-color: #3399FF">Contect Us</div>  
  77.   </div>  
  78.   <p>Reverse Box</p>  
  79.   <div class="HB RB">  
  80.   <div class="CB" style="background-color: #FF66CC">Home</div>  
  81.   <div class="CB" style="background-color: #FF66CC">About</div>  
  82.   <div class="CB" style="background-color: #FF66CC">Contect Us</div>  
  83.   </div>  
  84.   <p>Center Box - children divided into 2 ordinal groups</p>  
  85.   <div class="HB CB">  
  86.   <div class="CB BG1" style="background-color: #FF8080">Home</div>  
  87.   <div class="CB BG2" style="background-color: #FF8080">About</div>  
  88.   <div class="CB BG1" style="background-color: #FF8080">Contect Us</div>  
  89.       </div>  
  90.   <script>  
  91. function toArray(nodelist)  
  92.   {  
  93.    return Array.prototype.slice.call(nodelist);  
  94.       }  
  95.   var flex_children = [  
  96.   toArray(document.getElementsByClassName('FC1')),  
  97.   toArray(document.getElementsByClassName('FC2'))  
  98.           ];  
  99.   function updateDisplayInfo() {  
  100.   var hbox = toArray(document.querySelectorAll('.HB > *'));  
  101.   var vbox = toArray(document.querySelectorAll('.VB > *'));  
  102.   hbox.forEach(function (node) {  
  103.    node.innerHTML = 'w: ' + getComputedStyle(node, null).getPropertyValue('width');  
  104.             });  
  105.    vbox.forEach(function (node) {  
  106.                 node.innerHTML = 'h: ' + getComputedStyle(node, null).getPropertyValue('height');  
  107.         });  
  108.      }  
  109.   var btn = document.getElementById('switch-btn');  
  110.    btn.addEventListener('click', function ()   
  111.   {  
  112.    if (this.value == 'flex')   
  113.    {  
  114.        this.value = 'inflex';  
  115.        this.innerHTML = 'Enable';  
  116.        flex_children.forEach(function (array) {  
  117.        array.forEach(function (node) {  
  118.        node.removeAttribute('class');  
  119.            });  
  120.         });  
  121.         }   
  122.        else   
  123.      {  
  124.        this.value = 'flex';  
  125.        this.innerHTML = 'Disable Flexibility!';  
  126.        flex_children.forEach(function (array, index) {  
  127.        array.forEach(function (node) {  
  128.        node.setAttribute('class', 'Fc' + (index + 4));  
  129.        });  
  130.     });  
  131.  }  
  132.  </script>  
  133. </body>  
  134. </html> 
Step 10: Press Ctrl + F5 to run the application in a browser.
 
Output
 
ouuuuuuuu3.gif
 
out1.gif
 
Click a flexibility button and add a box in a row and column.
 
out 2.gif
 
Resources
 
Here are some useful resources


Similar Articles