Cara Membuat Image Gallery Responsive Menggunkaan CSS3
Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Di panduan kali ini saya akan mencoba membagi Cara Membangun Image Gallery Memiliki tampilan yang dinamis Menggunkaan CSS3.
Memiliki tampilan yang dinamis Web dikala ini seperti suatu keperluan pada suatu laman, kenapa karena bagi membangun tampilan kita tetap terlihat rapih di dikala di buka di smartphone dan tablet.
Nah, sekarang ini saya akan mencoba membangun image gallery memiliki tampilan yang dinamis menggunakan css3.
Sekarang ini saya akan memberikan trick Cara Membangun Image Gallery Memiliki tampilan yang dinamis Menggunkaan CSS3. berikut langkah-langkahnya:
– Pertama-tama teman-teman bikin folder image menytau dengan file HTML teman-teman bagi 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>Membangun Gallery Memiliki tampilan yang dinamis</h2>
<div class=memiliki tampilan yang dinamis>
<div class=img>
<a target=_blank href=images/Source Code Aplikasi-1.jpg>
<img src=images/Source Code Aplikasi-1.jpg alt= Di panduan kali ini saya akan mencoba membagi Cara Membangun Image Gallery Memiliki tampilan yang dinamis Menggunkaan CSS3 width=300 height=200>
</a>
<div class=desc>Kursus Web Master</div>
</div>
</div>
<div class=memiliki tampilan yang dinamis>
<div class=img>
<a target=_blank href=images/Source Code Aplikasi-2.jpg>
<img src=images/Source Code Aplikasi-2.jpg alt= Di panduan kali ini saya akan mencoba membagi Cara Membangun Image Gallery Memiliki tampilan yang dinamis Menggunkaan CSS3 width=600 height=400>
</a>
<div class=desc>Kursus Graphic Design</div>
</div>
</div>
<div class=memiliki tampilan yang dinamis>
<div class=img>
<a target=_blank href=images/Source Code Aplikasi-2.jpg>
<img src=images/Source Code Aplikasi-2.jpg alt= Di panduan kali ini saya akan mencoba membagi Cara Membangun Image Gallery Memiliki tampilan yang dinamis Menggunkaan CSS3 width=600 height=400>
</a>
<div class=desc>Kursus Web Programming</div>
</div>
</div>
<div class=memiliki tampilan yang dinamis>
<div class=img>
<a target=_blank href=images/Source Code Aplikasi-1.jpg>
<img src=images/Source Code Aplikasi-1.jpg alt= Di panduan kali ini saya akan mencoba membagi Cara Membangun Image Gallery Memiliki tampilan yang dinamis Menggunkaan CSS3 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 Di image*/
.img {
border: 1px solid #ccc;
}
/*Memberikan efek di dikala pointer di tujukan ke image*/
.img:hover {
border: 1px solid #777;
}
/*Membangun lebar sesuai dengan ukuran lebar class memiliki tampilan yang dinamis*/
.img img {
width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
/*membangun box-size di body*/
* {
box-sizing: border-box;
}
.memiliki tampilan yang dinamis {
padding: 0 6px;
float: left;
width: 24.99999%;
}
/*berfungsi bagi mengubah style class memiliki tampilan yang dinamis di lebar maksimum 700px*/
@media only screen and (max-width: 700px){
.memiliki tampilan yang dinamis {
width: 49.99999%;
margin: 6px 0;
}
}
/*berfungsi bagi mengubah style class memiliki tampilan yang dinamis di lebar maksimum 500px*/
@media only screen and (max-width: 500px){
.memiliki tampilan yang dinamis {
width: 100%;
}
}
/*clearfix ialah cara mudah dan cepat yang digunakan bagi clear element yang sebelumnya mengalami float*/
.clearfix:after {
content: ;
display: table;
clear: both;
}
– Hasilnya akan menjadi seperti ini.
di dikala di buka di desktop
Tampilan di dikala di buka di tablet dan smarthphone.
Bagaimana teman-teman mudahkan Cara Membangun Image Gallery Memiliki tampilan yang dinamis Menggunkaan CSS3.
Demikianlah panduan saya bagi kali ini. Sehat selalu ya teman-teman, selamat mencoba.
Sumber https://kursuswebsite.org
