Create Various Model Boxes Using HTML5

Manish Singh
12y
9.4k
0
0

Article

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 a HTML 5 that is used to show the image and text in a 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 a HTML editor such as Notepad.

Open start->Notepad.
The name of editor is "Box".

Step 2 : Create a Folder on a desktop.

Right-click on desktop->new->Folder.
Name of folder is "Sam".

Step 3 : Open Visual Studio.

Go to file -> New->Projects.
Crete an ASP. NET Web Application.
Name of "Model.aspx".

Step 4 : Add a 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".

Step 5 : Now in this step we set all CSS properties of a centered box and reversed box. Now we set height, width, alignment and font of the boxes.

Code

<style>
.HB
{

display: -webkit-box;

-webkit-box-orient: horizontal;
display: -moz-box;

-moz-box-orient: horizontal;
display: box;

box-orient: horizontal;

width: 500px;

height: 100px;

background-color:Green;

border: 2px solid peru;

}
.CB
{

-webkit-box-align: center;

-webkit-box-pack: center;
-moz-box-align: center;

-moz-box-pack: center;
box-align: center;

box-pack: center;

}
.JB {

-webkit-box-align: center;

-webkit-box-pack: justify;

-moz-box-align: center;

-moz-box-pack: justify;

box-align: center;

box-pack: justify;

}
.RB
{

-webkit-box-direction: reverse;

-moz-box-direction: reverse;

box-direction: reverse;

      }
  .CB
   {

width: 100px;

height: 50px;

border: 1px solid black;

font: 16px/50px Arial;

text-align: center;

}
.BG1
{

webkit-box-ordinal-group: 1;

moz-box-ordinal-group: 1;

box-ordinal-group: 1;

}
.BG2
{

-webkit-box-ordinal-group: 2;

-moz-box-ordinal-group: 2;
box-ordinal-group: 2;

}
p {

font: 20px Arial;

}
</style>

Step 6 : Now in this step we set the content, color and style of the body.

Code

<body>

<p>Center Box</p>

<div class="CB" style="background-color: #00FFFF">About</div>

<div class="CB" style="background-color: #00FFFF">Contect Us</div>

</div>

<p>Justified Box</p>

<div class="CB" style="background-color: #3399FF">About</div>

<div class="CB" style="background-color: #3399FF">Contect Us</div>

</div>

<p>Reverse Box</p>

<div class="CB" style="background-color: #FF66CC">About</div>

<div class="CB" style="background-color: #FF66CC">Contect Us</div>

</div>

<p>Center Box - children divided into 2 ordinal groups</p>

<div class="CB BG2" style="background-color: #FF8080">About</div>

<div class="CB BG1" style="background-color: #FF8080">Contect Us</div>

</div>

</body>

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

function toArray(nodelist)
{

return Array.prototype.slice.call(nodelist);

}

var flex_children = [

toArray(document.getElementsByClassName('FC1')),

toArray(document.getElementsByClassName('FC2'))

];

function updateDisplayInfo() {

var hbox = toArray(document.querySelectorAll('.HB > *'));

var vbox = toArray(document.querySelectorAll('.VB > *'));

hbox.forEach(function (node) {

node.innerHTML = 'w: ' + getComputedStyle(node, null).getPropertyValue('width');

});

vbox.forEach(function (node) {

node.innerHTML = 'h: ' + getComputedStyle(node, null).getPropertyValue('height');

});

}

Step 8 : Now in this step we write a functionality button event listener that shows a message to enable flexibility.

Code

var btn = document.getElementById('switch-btn');

btn.addEventListener('click', function () {

if (this.value == 'flex') {

this.value = 'inflex';

this.innerHTML = 'Enable';

flex_children.forEach(function (array) {

array.forEach(function (node) {

node.removeAttribute('class');

});

} else {

this.value = 'flex';

this.innerHTML = 'Disable Flexibility!';

flex_children.forEach(function (array, index) {

array.forEach(function (node) {

node.setAttribute('class', 'Fc' + (index + 4));

});

}

Step 9 : The complete code of an application is given below.

<style>
.HB
{

display: -webkit-box;

-webkit-box-orient: horizontal;
display: -moz-box;

-moz-box-orient: horizontal;
display: box;

box-orient: horizontal;

width: 500px;

height: 100px;

background-color:Green;

border: 2px solid peru;

}
.CB
{

-webkit-box-align: center;

-webkit-box-pack: center;
-moz-box-align: center;

-moz-box-pack: center;
box-align: center;

box-pack: center;

}
.JB {

-webkit-box-align: center;

-webkit-box-pack: justify;

-moz-box-align: center;

-moz-box-pack: justify;

box-align: center;

box-pack: justify;

}
.RB
{

-webkit-box-direction: reverse;

-moz-box-direction: reverse;

box-direction: reverse;

      }
  .CB
   {

width: 100px;

height: 50px;

border: 1px solid black;

font: 16px/50px Arial;

text-align: center;

}
.BG1
{

webkit-box-ordinal-group: 1;

moz-box-ordinal-group: 1;

box-ordinal-group: 1;

}
.BG2
{

-webkit-box-ordinal-group: 2;

-moz-box-ordinal-group: 2;
box-ordinal-group: 2;

}
p {

font: 20px Arial;

}
</style>
</head>

<body>

<p>Center Box</p>

<div class="CB" style="background-color: #00FFFF">About</div>

<div class="CB" style="background-color: #00FFFF">Contect Us</div>

</div>

<p>Justified Box</p>

<div class="CB" style="background-color: #3399FF">About</div>

<div class="CB" style="background-color: #3399FF">Contect Us</div>

</div>

<p>Reverse Box</p>

<div class="CB" style="background-color: #FF66CC">About</div>

<div class="CB" style="background-color: #FF66CC">Contect Us</div>

</div>

<p>Center Box - children divided into 2 ordinal groups</p>

<div class="CB BG2" style="background-color: #FF8080">About</div>

<div class="CB BG1" style="background-color: #FF8080">Contect Us</div>

</div>
<script>
function toArray(nodelist)
{

return Array.prototype.slice.call(nodelist);

}

var flex_children = [

toArray(document.getElementsByClassName('FC1')),

toArray(document.getElementsByClassName('FC2'))

];

function updateDisplayInfo() {

var hbox = toArray(document.querySelectorAll('.HB > *'));

var vbox = toArray(document.querySelectorAll('.VB > *'));

hbox.forEach(function (node) {

node.innerHTML = 'w: ' + getComputedStyle(node, null).getPropertyValue('width');

});

vbox.forEach(function (node) {

node.innerHTML = 'h: ' + getComputedStyle(node, null).getPropertyValue('height');

});

}

var btn = document.getElementById('switch-btn');

btn.addEventListener('click', function () {

if (this.value == 'flex') {

this.value = 'inflex';

this.innerHTML = 'Enable';

flex_children.forEach(function (array) {

array.forEach(function (node) {

node.removeAttribute('class');

});

} else {

this.value = 'flex';

this.innerHTML = 'Disable Flexibility!';

flex_children.forEach(function (array, index) {

array.forEach(function (node) {

node.setAttribute('class', 'Fc' + (index + 4));

});

}

</script>
</body>
</html>

Step 10 : Press Ctrl + F5 to run the application in a browser.

Output

Click a flexibility button and add a box in a row and column.

out 2.gif

Resources

Here is some useful resources

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all