با تشکر از شکیبایی شما سایت در حال بروزرسانی است.

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


 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS)

مقالات و دروس

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

مقالات مرتبط