Judul : Membuat Flexible Box dengan HTML5 dan CSS3
link : Membuat Flexible Box dengan HTML5 dan CSS3
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>
<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
 |
| 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;
}
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
 |
| kondisi browser penuh |
 |
| Layar browser diperkecil |
Demikianlah Artikel Membuat Flexible Box dengan HTML5 dan CSS3
Sekianlah artikel Membuat Flexible Box dengan HTML5 dan CSS3 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Flexible Box dengan HTML5 dan CSS3 dengan alamat link https://infoasikindo.blogspot.com/2014/05/membuat-flexible-box-dengan-html5-dan.html
0 Response to "Membuat Flexible Box dengan HTML5 dan CSS3"
Post a Comment