Cara Membuat Image Gallery Responsive Menggunkaan CSS3

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Image Gallery Responsive Menggunkaan CSS3.

Responsive Web saat ini seperti suatu kebutuhan dalam suatu website, kenapa karena untuk membuat tampilan kita tetap terlihat rapih pada saat di buka di smartphone dan tablet.

Nah, sekarang saya akan mencoba membuat image gallery responsive menggunakan css3.

Sekarang saya akan memberikan trick Cara Membuat Image Gallery Responsive Menggunkaan CSS3. berikut langkah-langkahnya:

– Pertama teman-teman buat folder image menytau dengan file HTML teman-teman untuk menyimpan image yang akan di simpan di gallery lalu ketikan kode HTML di bawah ini:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Membuat Gallery Responsive</h2>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="images/dumetschool-1.jpg">
      <img src="images/dumetschool-1.jpg" alt="dumetschool-1" width="300" height="200">
    </a>
    <div class="desc">Kursus Web Master</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="images/dumetschool-2.jpg">
      <img src="images/dumetschool-2.jpg" alt="dumetschool-2" width="600" height="400">
    </a>
    <div class="desc">Kursus Graphic Design</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="images/dumetschool-2.jpg">
      <img src="images/dumetschool-2.jpg" alt="dumetschool-3" width="600" height="400">
    </a>
    <div class="desc">Kursus Web Programming</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="images/dumetschool-1.jpg">
      <img src="images/dumetschool-1.jpg" alt="dumetschool-4" width="600" height="400">
    </a>
    <div class="desc">Kursus Web Design</div>
  </div>
</div>

<div class="clearfix"></div>

</body>
</html>

Jangan lupa save dengan nama index.html

– Kedua teman-teman ketikan kode CSS3 di bawah ini:

/*Memberikan Border Pada image*/
.img {
    border: 1px solid #ccc; 
}
/*Memberikan efek pada saat pointer di tujukan ke image*/
.img:hover {
    border: 1px solid #777; 
}
/*Membuat lebar sesuai dengan ukuran lebar class responsive*/
.img img {
    width: 100%;
    height: auto;
}

.desc {
    padding: 15px;
    text-align: center;
}
/*membuat box-size pada body*/
* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}
/*berfungsi untuk mengubah style class responsive pada lebar maksimum 700px*/
@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}
/*berfungsi untuk mengubah style class responsive pada lebar maksimum 500px*/
@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}
/*clearfix adalah cara praktis yang digunakan untuk clear element yang sebelumnya mengalami float*/
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

– Hasilnya akan menjadi seperti ini.

pada saat di buka di desktop

Tampilan pada saat di buka di tablet dan smarthphone.

Bagaimana teman-teman mudahkan Cara Membuat Image Gallery Responsive Menggunkaan CSS3.

Sekian tutorial saya untuk kali ini. Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat Image Gallery Responsive Menggunkaan CSS3

Kategori