Assalamualaikum Wr.Wb
Galery Responsive? mengapa saya memposting kembali tentang web Responsive?Karena sebuah tampilan web responsiv memang sangat penting sekarang ini,karena orang tidak selalu saja browsing lewat laptop atau komputer tapi terkadang lewat perangkat yang memiliki layar yang kecil seperti smartphone misalnya.Mungkin sekarang justru lebih banyak orang yang browsing lewat hp,untuk itu sangatlah penting untuk membuat tampilan web responsive.Oke langsung saja kita mulai membuat galery responsive.
Seperti pada postingan sebelumnya kita buat style untuk galery kita
Letakkan atribut di antara <style> dan </style>
Itu dia untuk style nya sekarang tag untuk galery itu sediri.Letakkan tag di antara <body> dan </body>
Catatan: Untuk nama dan format gambar harus sesuai dengan nama dan format gambar yang ingin di masukkan.Dan untuk ukuran dapat di sesuaikan dengan keinginan teman - teman semua.
Ini SS cuplikan coding nya
Berikut hasilnya
Oke itu tadi tutorial membuat galery responsive,silakan di sesuaikan dan di perindah tampilannya sesuai dengan keinginan teman - teman semua terimakasih sampai jumpa di postingan berikutnya.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
Galery Responsive? mengapa saya memposting kembali tentang web Responsive?Karena sebuah tampilan web responsiv memang sangat penting sekarang ini,karena orang tidak selalu saja browsing lewat laptop atau komputer tapi terkadang lewat perangkat yang memiliki layar yang kecil seperti smartphone misalnya.Mungkin sekarang justru lebih banyak orang yang browsing lewat hp,untuk itu sangatlah penting untuk membuat tampilan web responsive.Oke langsung saja kita mulai membuat galery responsive.
Seperti pada postingan sebelumnya kita buat style untuk galery kita
Letakkan atribut di antara <style> dan </style>
<head>
<style>
div.img{
border: 1px solid #ccc;
}
div.img:hover{
border: 1px solid #777;
}
div.img img{
width: 100%
height:auto;
}
div.desc{
padding: 15px;
text-align: center;
}
*{
box-sizing: border-box;
}
.responsive{
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive{
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive{
width: 100%;
}
}
.clearfix:after{
content: "";
display: table;
clear: both;
}
</style>
</head>
Itu dia untuk style nya sekarang tag untuk galery itu sediri.Letakkan tag di antara <body> dan </body>
<body>
<h2>Contoh Galery Responsive</h2>
<div class="responsive">
<div class="img">
<img src="ss1.jpeg" width="300" height="200">
<div>Beri deskripsi untuk gambar</div>
</div>
</div>
<div class="responsive">
<div class="img">
<img src="ss2.jpeg" width="300" height="200">
<div>Beri deskripsi untuk gambar</div>
</div>
</div>
<div class="responsive">
<div class="img">
<img src="ss3.jpeg" width="300" height="200">
<div>Beri deskripsi untuk gambar</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding: 6px;">
<p>Itu tadi contoh galeri Responsive</p>
<p>Resize ukuran browser untuk melihat responsive atau tidaknya galery ini</p>
</div>
</body>
Catatan: Untuk nama dan format gambar harus sesuai dengan nama dan format gambar yang ingin di masukkan.Dan untuk ukuran dapat di sesuaikan dengan keinginan teman - teman semua.
Ini SS cuplikan coding nya
Berikut hasilnya
Oke itu tadi tutorial membuat galery responsive,silakan di sesuaikan dan di perindah tampilannya sesuai dengan keinginan teman - teman semua terimakasih sampai jumpa di postingan berikutnya.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar