Галерия с превъртане на изображения

Добър ден на всички. Бих искала да предложа да пробвате ефект на превъртане на изображения. В основата на ефекта лежи CSS код. Този ефект може да бъде полезен като фото галерия, която ще позволи да превъртате изображения, без да се променя качеството им. Необходимо е да се изберат изображения с един и същи размер, а той от своя страна да е зададен в CSS кода. Вижте тук работна версия.
Първо нека създадем един най-прост HTML код. И да подготвим няколко изображения, които ще бъдат показани в галерията. Те, всичките, трябва да са с един и същи размер, за да могат да се показват акуратно при превъртането на галерията.

<div class="gallery">
    <img src="адрес на изображението.jpg" alt=" название"/>
    <img src=" адрес на изображението.jpg" alt="название"/>
    <img src="адрес на изображението .jpg" alt="название"/>
    <img src=" адрес на изображението.jpg" alt="название"/>
    <img src=" адрес на изображението.jpg" alt="название"/>
</div>

Изображенията могат да бъдат неограничен брой. За да постигнете това е необходимо в HTML кода да добавяте допълнителни редове от вида:

<img src="адрес на изображението.jpg" alt=" название"/>

 И това е CSS кода.

<style>
}
.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 10px;
     }
.gallery {
    width: 500px;
    height: 355px;
    overflow-y: hidden;
    overflow-x: auto;
      white-space: nowrap;
    letter-spacing: -.25em;
    }</style>

Със синьо е обозначен размера на галерията, който стриктно отговаря на размерите на всички изображения в нея. И двата кода се вграждат един след друг на нужното място в публикацията в режим на HTML или в притурка. Тази обикновена галерия под формата на лента за превъртане, без никакви екстри, ще даде възможност да представете вашите изображения компактно, като спестявате от пространството на страницата.

Искам да ви информирам за факта, че в различните браузъри тази галерия с превъртане на изображения се държи по различен начин. А аз се справих с нея много трудно. Опитайте и вие.

Благодаря на всички. Доскоро.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: