Bentuk box model container
Disini pembahasan sangat gampang, membuat box teknik yang sangat penting untuk di pelajari, nah contohnya saja contohnya, disini kita akan start dari nol.
Nah jadi anggap saja kita sudah mempunyai index.html global.css jadi di index file nya kita bisa aja buat markup seperti dibawah!
Nah jadi anggap saja kita sudah mempunyai index.html global.css jadi di index file nya kita bisa aja buat markup seperti dibawah!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
Bisa kita lihat tepat dibawah title kita sudah mengimport file css kita, dan sekarang anda bisa ke file css dan ketikkan styles dibawah!
.container {
width: 300px;
height: 150px;
background: #f7f7f7;
}
Ok dan ini shape berbentuk persegi panjang, lalu kita akan memplejari teknik bagaimana membuatnya jadi tampilan simple but look sure.
Kita hanya perlu bermain dengan border saat ini!
Kita hanya perlu bermain dengan border saat ini!
.container {
width: 300px;
height: 150px;
background: #f7f7f7;
border-radius: 6px;
border-bottom: 10px solid #f2f2f2;
}
Kita bisa aja memebuat teknik ini menggunakan function rgba color. lihat code dibawah!
.container {
width: 300px;
height: 150px;
background: #e74c3c;
border-radius: 6px;
border-bottom: 8px solid rgba(0,0,0,.2);
}
Maka outputnya persis seperti..
Nah dari tadi kita hanya memebahas tentang border, gimana tentang design flat, kita bisa langsung implementasikan sekarang. Dan masih saja menggunakan .container, dan kita hanya bermain di css untuk kali ini.
.container {
width: 300px;
height: 150px;
background: #34495e;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
}
Design no border really, hanya menggunakan box shadow saja untuk tambahan property. Tapi jujur saja teknik dalam pembuatan box ini tidak require width dan height property, instead hanya menggunakan padding sistem. Edit index file and type it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id iste incidunt ratione, consectetur tenetur maxime dolore veniam eum earum numquam. Neque cumque fugit assumenda amet nostrum, beatae obcaecati temporibus.
</div>
</body>
</html>
Selanjutnya di file css kita perlu perkenalanan banyak, untuk all font kita set up saja di body, lalu pertambahan property akan ada di container.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.container {
background: #16a085;
color: white;
padding: 20px;
border-radius: 3px;
}
Nah lihat, kita menggukan green sea color, disini kita juga butuh penyesuaian, kenapa saya membuat warna tulisannya jadi putih, itu hanya karna saya rasa jika hitam kurang cocok.
Alasan disini kenapa kita tidak memakai height dan width, karna ini hanya akan memburuk kan design kalian saja jika kalian mempunyai basecontainer. Artinya jika kalian hanya set up ini menggunakan padding, jadi hasilnya height akan mengikuti seberapa banyak text / content dari isi container tersebut.
Alasan disini kenapa kita tidak memakai height dan width, karna ini hanya akan memburuk kan design kalian saja jika kalian mempunyai basecontainer. Artinya jika kalian hanya set up ini menggunakan padding, jadi hasilnya height akan mengikuti seberapa banyak text / content dari isi container tersebut.
Tapi jika height itu hanya akan mengarah ke seberapa width container kita. Tapi ketika kita membuat widthnya otomatis dari container, maka ini tidak akan mengikuti width yang ada di basecontainer.
itu hanya teknik saja, tapi ada 1 teknik lagi yang bisa kita tambah dalam skill box ini. Yaitu biasa di sebut panel. Disini kita juga perlu edit index file dengan menambah beberapa elementnya.
<body>
<div class="panel primary">
<div class="title">
What the title is ?
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt alias veritatis debitis incidunt mollitia illo delectus. Placeat architecto esse voluptates ipsam, omnis aut! Illo dolore, soluta reiciendis voluptates a repellat.
</div>
<div class="footer">
This is actually great if you're the good designer :)
</div>
</div>
</body>
Then followed by css file which I think it's not cool, tapi jika kamu memang best designer kamu akan tau what's cool for yours :)
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.panel {
margin: 20px 0;
border-radius: 4px;
}
.panel .title, .panel .content, .panel .footer {
padding: 10px;
}
.panel .title {
background: #2980b9;
color: white;
}
.panel .footer {
background: #f9f9f9;
color: #333;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
/* All type of the panel like primary or may be warning */
.panel.primary {
border: 1px solid #2980b9;
}
Itu hanya cara bagaimana panel sistemp, nah jika kamu mempunyai class baru seperti anda lihat dibawah!
<body>
<!-- Primary panel -->
<div class="panel primary">
<div class="title">
What the title is ?
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt alias veritatis debitis incidunt mollitia illo delectus. Placeat architecto esse voluptates ipsam, omnis aut! Illo dolore, soluta reiciendis voluptates a repellat.
</div>
<div class="footer">
This is actually great if you're the good designer :)
</div>
</div>
<!-- Success panel -->
<div class="panel success">
<div class="title">
What the title is ?
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt alias veritatis debitis incidunt mollitia illo delectus. Placeat architecto esse voluptates ipsam, omnis aut! Illo dolore, soluta reiciendis voluptates a repellat.
</div>
<div class="footer">
This is actually great if you're the good designer :)
</div>
</div>
</body>
Disini kita harus perhatikan baik - baik, karna kita menggunakan panel name sistem which is you see as primary and success, kita harus berlogika sedikit di css. Saya rasa css kamu yang tadi hapus aja semua, dan sekarang ketik ulang semuanya, gak banyak kok! Sedikit saja, namanya kita lagi belajar tidak ada salahnya mengulang, karna anda harus pay attention here!!!
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.panel {
margin: 20px 0;
border-radius: 4px;
}
.panel .title, .panel .content, .panel .footer {
padding: 10px;
}
.panel .title {color: white; }
.panel .footer {
background: #f9f9f9;
color: #333;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
/* All type of the panel like primary or may be warning */
.panel.primary {border: 1px solid #2980b9; }
.panel.primary .title { background: #2980b9 }
.panel.success .title { background: #1abc9c }
.panel.success {border: 1px solid #1abc9c; }
Dan hasilnya tak jauh lebih kurang seperti ini...
Panel title
Panel content
Dan sepertinya outputnya kamu bisa langsung lihat dibrowser kamu sendiri. Ok :)
![Cara Internet Gratis Android Dengan Troid VPN [ Lengkap ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDmahiUfLm3n8UGKDmSlT-RbXMS6QZt69nns0Glu7OysGF0EQME0yzWQ5brvthttI0a1TMxEhvEn0bqHpzoBhUdnUYmUVKdAHBCjk4sKmKDUKyc9on9yaEN7-eCQPRjL88SJv7qriKy716/s72-c/troidvpn.jpg)
Post A Comment
No comments :