Membuat Website Responsive dengan CSS | CSS Tricks

Membuat Website Responsive dengan CSS | CSS Tricks

20.27


Yapp..bertemu kembali dengan Zracoder..kali ini admin akan kasih tutorial, gimana sih membuat Layout Web dengan HTML 5 namun Responsive..

 Responsive disini berarti sebuah layout web akan mengikuti / menyesuaikan lebar web browser yang digunakan oleh si user


Normalnya akan seperti gambar diatas , Kemudian akan berubah jika tampilan web browser di PC/Laptop menjadi Lebar minimal 150 pixel dan lebar maximal 600 pixel


Tentunya, Sidebar akan berada dibawah Main-Contentnya,,begitu juga Footer

LIHAT JUGA Belajar HTML 5 Bagi Pemula

Langsung saja, Buka text editor lalu copy semua kode dibawah ini 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>Membuat Web Responsive | Zracoder13 </title>
 <link rel="stylesheet" href="style.css" type="text/css">
 <meta name="viewports" content="width=device-width, initial-scale="1">
</head>
<body class="body">
 <header class="mainheader">
  <nav>
   <ul>
    <li class="home" ><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Contact</a></li>
   </ul>
  </nav>
 </header>
 <div class="maincontent">
  <div class="content">
   <article class="top-content">
    <header>
     <h2><a href="" title="firstpost">First Post</a></h2>
    </header>
    <footer>
     <p class="postinfo">this post written by arby</p>
    </footer>
    <content>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </content>
   </article>
   <article class="bottom-content">
    <header>
     <h2><a href="" title="Second-post">Second Post</a></h2>
    </header>
    <footer>
     <p class="postinfo">this post written by arby</p>
    </footer>
    <content>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </content>
   </article>
  </div>
 </div>
 <aside class="top-sidebar">
  <article>
   <h2>Top Sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
 </aside>
 <aside class="middle-sidebar">
  <article>
   <h2>Middle Sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
 </aside>
 <aside class="bottom-sidebar">
  <article>
   <h2>Bottom Sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
 </aside>
 <footer class="mainfooter">
  <p>Copyright &copy; <a href="#">CYBERTEAM13.COM</a></p>
 </footer>
</body>
</html>


Save dengan nama "Home.html" 

Kemudian Copy lagi kode CSS dibawah ini

 
body {
 background-color: #f5f5f5;
 font-size: 85%;
 font-family: verdana;
 line-height: 1.5;
 }

.body {
 margin:0 auto;
 width: 70%;
 clear: both;
 }

.mainheader nav{
 background-color: #666;
 height: 50px;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }

.mainheader a {
 text-decoration: none;
 display: inline-block;
 }

.mainheader nav ul li {
 float: left;
 display: inline;
 }

.mainheader nav ul {
 margin:0 auto;
 list-style:none;
 }

.mainheader nav a:link, .mainheader nav a:visited {
 color: #FFF;
 padding: 15px 25px;
 }

.mainheader nav a:hover, .mainheader nav a:active{
 background-color: #383838;
 transition: 1s; 
 }
.mainheader nav .home a:link, .mainheader nav .home a:visited {
 background-color: #CF5C3F;
 }
 
.mainheader nav ul li a{
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }

.maincontent {
  border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }

.content a:link , a{
 text-decoration: none;
 color: #CF5C3F;
 }

.content {
 width: 70%;
 float: left;
 }

.top-content {
 background-color: #Fff;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 padding: 3% 5%;
 margin-top: 2%;
 }

.bottom-content {
 background-color: #Fff;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 padding: 3% 5%;
 margin-top: 2%;
 }

.top-sidebar {
 width: 24%;
 background-color: #FFF;
 float: left;
 margin-left: 2%;
 margin-top: 1.5%;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 padding: 2% 2%;
 margin-bottom: 2%;
 }

.middle-sidebar {
 width: 24%;
 background-color: #FFF;
 float: left;
 margin-left: 2%;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 padding: 2% 2%;
 margin-bottom: 2%;
 }

.bottom-sidebar {
 width: 24%;
 background-color: #FFF;
 float: left;
 margin-left:  2%;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 padding: 2% 2%;
 margin-bottom: 2%;
 }

.mainfooter {
 width: 100%;
 height: 50px;
 float:left ;
 margin: 2% 0;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 background-color: #666;
 }

.mainfooter p {
 color: #FFF;
 width: 92%;
 margin-left: 5%;
 }

@media only screen and (min-width: 150px) and (max-width: 600px) {

.body {
 width: 90%;
 } 

.mainheader nav{
 height: 200px;
 }

.mainheader a {
 text-decoration: none;
 }

.mainheader nav .home a:link, .mainheader nav .home a:visited {
  width: 88%;
 }

.mainheader nav a:hover, .mainheader nav a:active{
 width: 88%;
 transition: 1s;
 }

.mainheader nav ul li {
 width: 100%;
 text-align: center;
 } 

.mainheader nav ul {
 margin:0 auto;
 list-style:none;
 padding-left: 0px;
 }

.maincontent {
 overflow: hidden;

 }
.content {
 width: 100%;
 }

.top-sidebar {
 width: 95%;
 margin-left: 0px;
 }

.middle-sidebar {
 width: 95%;
 margin-left: 0px;
 }

.bottom-sidebar {
 width: 95%;
 margin-left: 0px;
 }
 }

Save dengan nama "Style.css" dan letakan keduanya dalam satu folder

 Kemudian agan bisa langsung cek sendiri hasilnya

 Lalu apa min yang buat sebuah web bisa Responsive??, Yaitu dengan menggunakan Query @media. 

 
@media only screen and (min-width: 150px) and (max-width: 600px)

Perhatikan Kode dibawah ini jika masih bingung ya

 
body {
 //Tampilan normal web agan
 width: 70%;
 margin:0 auto;
 clear: both;
}

@media only screen and (min-width: 150px) and (max-width: 600px) {
 //Tampilan ketika web browser agan mempunyai  dari lebar 150px dan sampai panjang 600px 
 body {
 width: 100%;
 }
}

Sangat Mudah Bukan??

 Oke..segitu saja mungkin dari Zracoder..Jika admin ada yang salah ,admin siap dikasih kritik di kolom komentar..dan jika masih ada yang bingung,,agan-agan bisa bertanya juga

Ohya mimin dapet inspirasi dari : 1stWebDesigner
Sekian,dan Terimakasih
Semoga Bermanfaat :)
Next
« Prev Post
Previous
Next Post »
Langganan: Posting Komentar (Atom)