The call METRO style is the new style interface of Microsoft applications, can be seen, for example, in Windows Phone 7 and Windows 8. The main menu of these applications has a simple format, based on the tiles, usually two different sizes.
An example of this menu can be seen in the following figure.
Get to work
To develop this menu, divide the lines in the central region in which we insert the tiles.
The tiles are of two types: normal and wide (as seen in the image above) and the colors will be given later with the addition of CSS classes.
To begin, let's create the title and the lines that will structure the menu, as shown below:
HTML Page:
<html>
<head>
<link rel="stylesheet" href="estilo.css"/>
<meta charset="UTF-8"/>
<script type="text/javascript" src="<http://code.jquery.com/jquery-1.7.2.min.js>"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Início</h1>
<div class="pagina">
<div class="linha">
</div>
<div class="linha">
</div>
<div class="linha">
</div>
</div>
</div>
</body>
</html>
CSS File:
@font-face { font-family: Century; src: url('GOTHIC.ttf'); }
body{
font-family: Century;
background: rgb(51,51,51);
color: #fff;
padding:20px;
}
.pagina{
width:auto;
height:auto;
}
.linha{
width:auto;
padding:5px;
height:auto;
display:table;
}
Tile added:
<div class="pagina">
<div class="linha">
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile tileLargo">
</div>
<div class="tile">
</div>
<div class="tile tileLargo">
</div>
</div>
<div class="linha">
<div class="tile tileLargo">
</div>
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile tileLargo">
</div>
</div>
<div class="linha">
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile tileLargo">
</div>
<div class="tile">
</div>
<div class="tile">
</div>
</div>
</div>
Formatting initial tiles:
.tile{
height:100px;
width:100px;
float:left;
margin:0 5px 0 0;
padding:2px;
}
.tileLargo{
width:210px;
}
.amarelo{
background:#DAA520;
}
.vermelho{
background:#CD0000;
}
.azul{
background:#4682B4;
}
.verde{
background-color: #2E8B57;
}
Association of tiles to color:
<div class="pagina">
<div class="linha">
<div class="tile amarelo">
</div>
<div class="tile azul">
</div>
<div class="tile tileLargo vermelho">
</div>
<div class="tile verde">
</div>
<div class="tile tileLargo amarelo">
</div>
</div>
<div class="linha">
<div class="tile tileLargo amarelo">
</div>
<div class="tile azul">
</div>
<div class="tile verde">
</div>
<div class="tile vermelho">
</div>
<div class="tile tileLargo verde">
</div>
</div>
<div class="linha">
<div class="tile amarelo">
</div>
<div class="tile verde">
</div>
<div class="tile vermelho">
</div>
<div class="tile tileLargo verde">
</div>
<div class="tile azul">
</div>
<div class="tile verde">
</div>
</div>
</div>
HTML Page:
<html>
<head>
<link rel="stylesheet" href="estilo.css"/>
<meta charset="UTF-8"/>
<script type="text/javascript" src="<http://code.jquery.com/jquery-1.7.2.min.js>"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Início</h1>
<div class="pagina">
<div class="linha">
</div>
<div class="linha">
</div>
<div class="linha">
</div>
</div>
</div>
</body>
</html>
CSS File:
@font-face { font-family: Century; src: url('GOTHIC.ttf'); }
body{
font-family: Century;
background: rgb(51,51,51);
color: #fff;
padding:20px;
}
.pagina{
width:auto;
height:auto;
}
.linha{
width:auto;
padding:5px;
height:auto;
display:table;
}
Tile added:
<div class="pagina">
<div class="linha">
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile tileLargo">
</div>
<div class="tile">
</div>
<div class="tile tileLargo">
</div>
</div>
<div class="linha">
<div class="tile tileLargo">
</div>
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile tileLargo">
</div>
</div>
<div class="linha">
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile tileLargo">
</div>
<div class="tile">
</div>
<div class="tile">
</div>
</div>
</div>
Formatting initial tiles:
.tile{
height:100px;
width:100px;
float:left;
margin:0 5px 0 0;
padding:2px;
}
.tileLargo{
width:210px;
}
.amarelo{
background:#DAA520;
}
.vermelho{
background:#CD0000;
}
.azul{
background:#4682B4;
}
.verde{
background-color: #2E8B57;
}
Association of tiles to color:
<div class="pagina">
<div class="linha">
<div class="tile amarelo">
</div>
<div class="tile azul">
</div>
<div class="tile tileLargo vermelho">
</div>
<div class="tile verde">
</div>
<div class="tile tileLargo amarelo">
</div>
</div>
<div class="linha">
<div class="tile tileLargo amarelo">
</div>
<div class="tile azul">
</div>
<div class="tile verde">
</div>
<div class="tile vermelho">
</div>
<div class="tile tileLargo verde">
</div>
</div>
<div class="linha">
<div class="tile amarelo">
</div>
<div class="tile verde">
</div>
<div class="tile vermelho">
</div>
<div class="tile tileLargo verde">
</div>
<div class="tile azul">
</div>
<div class="tile verde">
</div>
</div>
</div>
No comments :
Post a Comment