Muhammad Hafid

Blog Belajar Python atau Django

Muhammad Hafid

Tugas kita itu adalah bukan untuk berhasil, tugas kita adalah untuk mencoba, karena di dalam mencoba itulah kita menemukan dan belajar membangun kesempatan untuk berhasil.

Cara Desain Thumbnail Responsive

Oke saya akan sedikit share mengenai cara membuat tampilan thumbnail yang responsive. Ini bisa anda kembangkan tidak hanya untuk menampilkan gallery image. Semoga tutorial ini bisa dapat dengan mudah dipahami, karena menurut saya cukup simple.
Pertama tama anda harus memahami struktur tag html yaitu html, head, body, ke3 elemen ini harus ada. Disini kita akan membuat 2 file html dan css, karena menurut saya css yang di include / ditulis didalam 1 html atau biasa disebut dengan inline css kurang optimal.

file coba.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="ngehe.css" rel="stylesheet" />
</head>
<body>
 <div class="container">
                    <div class="galleryItem">
                        <a href="#"><img src=inventory_category.png></a>
                        <h3>Title</h3>
                    </div>

                    <div class="galleryItem">
                        <a href="#"><img src=inventory_category.png></a>
                        <h3>Title</h3>
                    </div>
                </div>
</body>
</html>
*) yang di cetak tebal adalah tag class yang memanggil tag css yang akan kita buat.

file ngehe.css
.container {
    width: 100%;
    margin: 30px auto;
    overflow: hidden;
}

.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;
    width: 6%;
    margin:  2% 2% 50px 2%;
}

.galleryItem h3 {
    text-transform: uppercase;
}

.galleryItem img {
    max-width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

File css diatas belum responsive karena css diatas hanya menampilkan tampilan default layar besar pada umumnya, untuk menjadikannya responsive tambahkan script dibawah ini :

@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
    .......
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
    .......
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .........
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .........
}
 Sekarang panggil class di cssnya apa yang mau di responsive kan.
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
    .galleryItem {width: 21%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
    .galleryItem {width: 29.33333%;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .galleryItem {width: 46%;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .galleryItem {width: 96%;}
    .galleryItem img {width: 96%;}
    .galleryItem h3 {font-size: 18px;}
    .galleryItem p, {font-size: 18px;}
}
Semoga mudah dipahami.

Labels: Responsive , template

Thanks for reading Cara Desain Thumbnail Responsive . Please share...!

0 Comment for "Cara Desain Thumbnail Responsive"

Back To Top