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".
![webapplication.gif]()
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".
![html.gif]()
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="HB CB">
<div class="CB" style="background-color: #00FFFF">Home</div>
<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="HB JB">
<div class="CB" style="background-color: #3399FF">Home</div>
<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="HB RB">
<div class="CB" style="background-color: #FF66CC">Home</div>
<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="HB CB">
<div class="CB BG1" style="background-color: #FF8080">Home</div>
<div class="CB BG2" style="background-color: #FF8080">About</div>
<div class="CB BG1" style="background-color: #FF8080">Contect Us</div>
</div>
</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
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.
<html>
<head>
<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="HB CB">
<div class="CB" style="background-color: #00FFFF">Home</div>
<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="HB JB">
<div class="CB" style="background-color: #3399FF">Home</div>
<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="HB RB">
<div class="CB" style="background-color: #FF66CC">Home</div>
<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="HB CB">
<div class="CB BG1" style="background-color: #FF8080">Home</div>
<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
![ouuuuuuuu3.gif]()
![out1.gif]()
Click a flexibility button and add a box in a row and column.
![out 2.gif]()
Resources
Here is some useful resources