گالری تصاویر در CSS

با استفاده از CSS می توان گالری تصاویر ایجاد کرد.
 

گالری تصاویر

در مثال زیر نحوه ایجاد گالری تصاویر با استفاده از CSS نمایش داده شده است.

مثال :

گالری تصاویر
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
مشاهده مثال

 

گالری تصاویر واکنش گرا

در مثال زیر چگونگی ایجاد گالری تصاویر واکنش گرا با استفاده از CSS3 نمایش داده شده است.
مثال :

گالری تصاویر واکنش گرا
.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;
}
مشاهده مثال


 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز