آموزش ایجاد گالری تصاویر Image Gallery در Css

بازدید: 802 بازدید
آموزش ایجاد گالری تصاویر

گالری تصویر Image Gallery در Css!!! چه ایده جالبی!

یک طراحی فوق العاده، آسان و جذاب ، برای زیبا سازی سایت شما!

css قدرتمند باز هم در کنار شماست تا به شما کمک کند که سایتی زیبا و جذاب برای کاربران خود تهیه کنید.

در اموزش امروز همراه ما باشید تا یک گالری زیبا از تصاویر را با کمک css طراحی و اجرا کنیم.

با سلام خدمت شما همراهان همیشگی سایت پرنیان طرح

گالری تصویر Image Gallery در Css!!! چه ایده جالبی!

یک طراحی فوق العاده، آسان و جذاب ، برای زیبا سازی سایت شما!

css قدرتمند باز هم در کنار شماست تا به شما کمک کند که سایتی زیبا و جذاب برای کاربران خود تهیه کنید.

در اموزش امروز همراه ما باشید تا یک گالری زیبا از تصاویر را با کمک css طراحی و اجرا کنیم.

 

آموزش ایجاد گالری تصاویر در CSS
گالری تصاویر

گالری تصاویر

در مثال زیر، با کمک CSS یک آلبوم تصاویر ساده یا گالری تصاویر ایجاد کرده ایم.

به کد زیر دقت کنید.

[php]

 

<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

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

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

div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class=”gallery”>
<a target=”_blank” href=”img_5terre.jpg”>
<img src=”img_5terre.jpg” alt=”Cinque Terre” width=”600″ height=”400″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>

<div class=”gallery”>
<a target=”_blank” href=”img_forest.jpg”>
<img src=”img_forest.jpg” alt=”Forest” width=”600″ height=”400″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>

<div class=”gallery”>
<a target=”_blank” href=”img_lights.jpg”>
<img src=”img_lights.jpg” alt=”Northern Lights” width=”600″ height=”400″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>

<div class=”gallery”>
<a target=”_blank” href=”img_mountains.jpg”>
<img src=”img_mountains.jpg” alt=”Mountains” width=”600″ height=”400″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>

</body>
</html>

[/php]

نمونه را مشاهده کنید.

 

مثال های بیشتر 

در این مثال نحوه کار کردن با پرس و جو های رسانه، برای ایجاد یک گالری تصاویر به صورت responsive (منعطف و سازگار) را تمرین خواهیم کرد.

این گالری می تواند در انواع نمایشگرهای بزرگ و کوچک مانند کامپیوتر، تبلت و گوشی های موبایل نمایش داده شود.

با نگه داشتن دکمه ctrl و جابه جایی دکمه اسکرول در ماوس میتوانید حالت responsive را به راحتی مشاهده کنید. و تغییرات را ببینید.

[php]

<html>
<head>
<style>
div.gallery {
border: 1px solid #ccc;
}

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

div.gallery 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>
<body>

<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>

<div class=”responsive”>
<div class=”gallery”>
<a target=”_blank” href=”img_5terre.jpg”>
<img src=”img_5terre.jpg” alt=”Cinque Terre” width=”600″ height=”400″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>
</div>

<div class=”responsive”>
<div class=”gallery”>
<a target=”_blank” href=”img_forest.jpg”>
<img src=”img_forest.jpg” alt=”Forest” width=”600″ height=”400″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>
</div>

<div class=”responsive”>
<div class=”gallery”>
<a target=”_blank” href=”img_lights.jpg”>
<img src=”img_lights.jpg” alt=”Northern Lights” width=”600″ height=”400″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>
</div>

<div class=”responsive”>
<div class=”gallery”>
<a target=”_blank” href=”img_mountains.jpg”>
<img src=”img_mountains.jpg” alt=”Mountains” width=”600″ height=”400″>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>
</div>

<div class=”clearfix”></div>

<div style=”padding:6px;”>
<p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>

</body>
</html>

[/php]

 

از این لینک نتیجه را مشاهده کنید و تغییرات را امتحان کنید.

 

بیشتر بدانیم.

دسته بندی دسته بندی نشده
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.