Membuat Flexible Box dengan HTML5 dan CSS3

Flexible Box akan membuat elemen-elemen dalam halaman website anda akan responsive terhadap ukuran browser dan juga bisa menampilkan versi mobile.
Kita akan membuat flexible box sederhana.

File HTML5

<html lang="en"> <head>
<meta charset="utf-8">
<title>Welcome to My Webpage!</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div id="wrapper">

<header id="head">
<h1>Flexible Box Model</h1>
</header>

<nav id="navigation">
<ul>
<li>home</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</nav>

<div id="new">
<section id="main">
<article>
<header>
<hgroup>
<h1>Article Title</h1>
<h2>Article Subtitle</h2>
</hgroup>
</header>
<p>This is the article</p>
<footer>
<p>-written by victor</p>
</footer>
</article>

<article>
<header>
<hgroup>
<h1>2nd Article Title</h1>
<h2>2nd Article Subtitle</h2>
</hgroup>
</header>
<p>This is the article</p>
<footer>
<p>-written by victor</p>
</footer>
</article>
</section>

<aside id="side_box">
<h2>News</h2>
The new winner in champion league is...
</aside>
</div>

<footer id="copyright">
Copyright web4u academy 2013
</footer>

</div>


</body>
</html>


Tampilan sebelum tanpa CSS3

Membuat Flexible Box dengan HTML5 dan CSS3
Tutorial CSS3 & HTML5


File CSS3

*{ margin: 0px;
padding: 0px;
}
/* tanda asterix artinya style ini berlaku untuk semua bagian halaman */

header, section, footer, aside, nav, article, hgroup {
display: block;
}
/*property display block : menampilkan setiap elemen seperti block layaknya tag <p> */

body {
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}

/* untuk menanggulangi browser yang tidak compatible selalu gunakan width: 100% untuk body
webkit-box untuk menampilkan flexible box
-webkit-box-pack: center akan membuat semua elemen halaman di body ke tengah
box-pack : untuk menentukan tempat elemen
webkit : untuk chrome
*/

#wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex: 1;
}
/* box-orient : value vertical atau horisontal
box-flex : menentukan apakah box tersebut flexible atau tidak
value 0 jika tidak, dan 1 jika ya.
*/

#head {
background: orange;
border: 2px solid black;
padding: 20px;
}

article {
border: 1px solid black;
display: -webkit-box;
padding: 10px;
margin: 10px;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}

#navigation {
border: red;
background: yellow
}

#navigation li{
display: inline-block;
list-style-type: none;
padding: 3px;
}

#new {
display: -webkit-box;
-webkit-box-orient: horizontal;
}

/* box-orient: horizontal membuat elemen berada posisi saling berdampingan */

#main {
border: 1px solid black;
-webkit-box-flex: 1;
padding: 30px;
}

#side_box {
border: 1px solid green;
width: 230px;
padding: 10px;
margin: 10px;
}

#copyright {
text-align: center;
padding: 20px;
border-top: 1px solid black;
margin-top: 20px;

}


Tampilan dengan CSS3
Membuat Flexible Box dengan HTML5 dan CSS3
kondisi browser penuh


Membuat Flexible Box dengan HTML5 dan CSS3
Layar browser diperkecil


Membuat Flexible Box dengan HTML5 dan CSS3 Membuat Flexible Box dengan HTML5 dan CSS3 Reviewed by Ainun Mahya on 10:40 PM Rating: 5

No comments:

Silakan Berkomentar dengan Bijak

Powered by Blogger.