Галерия от изображения на чист CSS

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



    Описание

    Галерията се характеризира с това, че изображенията са разпръснати хаотично, а когато натиснете с бутона на мишката върху едно от тях, то се увеличава. В същото време, благодарение на стилът анимация, увеличената миниатюра се разполага перпендикулярно на страницата.

    Код

    Самият код на галерията с ефект на увеличаване на миниатюрите е много лек, без да е свързан с каквито и да е библиотеки и скриптове.
    Кодът е с вложени в него изображения:


    </div>

    <style>

     .gallery {
        margin: 100px auto 0;
        width: 700px;
    }
    .gallery a {
        display: inline-block;
        height: 135px;
        position: relative;
        width: 180px;

        -moz-user-select: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
    .gallery a img {

        cursor: pointer;
        display: block;
        height: 100%;
        left: 0px;
        position: absolute;
        top: 0px;
        width: 100%;
        z-index: 1;


        -webkit-transition: all 1.0s ease;
        -moz-transition: all 1.0s ease;
        -o-transition: all 1.0s ease;
        transition: all 1.0s ease;

    }
    /* Вращение  */
    .gallery a:nth-child(1) img {
        -moz-transform: rotate(-25deg);
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }
    .gallery a:nth-child(2) img {
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
    .gallery a:nth-child(3) img {
        -moz-transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    .gallery a:nth-child(4) img {
        -moz-transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    .gallery a:nth-child(5) img {
        -moz-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    .gallery a:nth-child(6) img {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    .gallery a:nth-child(7) img {
        -moz-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    .gallery a:nth-child(8) img {
        -moz-transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    .gallery a:nth-child(9) img {
        -moz-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    .gallery a:nth-child(10) img {
        -moz-transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    .gallery a:nth-child(11) img {
        -moz-transform: rotate(25deg);
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
    }
    .gallery a:nth-child(12) img {
        -moz-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    .gallery a:focus img {
        cursor: default;
        height: 350%;
        left: -150px;
        top: -100px;
        position: absolute;
        width: 350%;
        z-index: 25;
        /* Правила перехода */
        -webkit-transition: all 1.0s ease;
        -moz-transition: all 1.0s ease;
        -o-transition: all 1.0s ease;
        transition: all 1.0s ease;

        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }</style>


    Кодът е предвиден за 9 изображения, мисля, че този брой ще ви е достатъчен. Изображенията са примерни.

    Настройки


    ➤В червен цвят в него са маркирани размерите на изображенията при увеличаване. Тук може да направите промяна.

    ➤Размерът на миниатюрите е маркиран в синьо. Мнението ми е, че те се показват по-добре с този размер. Ако тези значения в кода не са ви подходящи, опитайте се да ги промените.

    ➤В редовете

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

    въведете адресите на вашите изображения.

    ➤Проверете кода преди и след редакцията, за да разберете какво се е получило на тази страница.

    ➤Готовия вече код можете да инсталирате на статична страница, в публикация в режим на HTML, или в притурка. Ефектът ще се появи след публикуването.

    И към още един много важен момент искам да привлека вниманието ви.


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


    ➤Кодът има атрибут tabindex. Това свойство определя реда на разделите за елементите. Той ви позволява да използвате бутона "Tab" (или "shift + tab"), за да превключвате изображенията. На когото от вас е интересно да научи повече за tabindex, то в мрежата има много информация.

    ➤Идеята е на Виктория Барад. Уточненията в кода са на руски език.

    Желая ви успех и упоритост.

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

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

    BGtop

    OpenCloseComments
    Cancel