Скрипты

ultimate-video-downloader-v2-0-скрипт-для-скачивания-видео-из-популярных-социальных-сетей Moko Ultimate Video Download Tool дает вам легкую возможность загружать ваши любимые видео с YouTube, Facebook, Instagram, Twitter, Vimeo, Dailymotion...
tinsta-v1-1-–-платформа-социальных-сетей-для-обмена-фотографиями Tinsta - это веб-платформа для обмена фотографиями в социальных сетях, она позволяет обмениваться фотографиями, видео с вашими подписчиками, такими как...
gostock-v1-3-–-скрипт-фотостока GoStock - Это платформа для обмена фотографиями, пользователи смогут загружать свои фотографии, чтобы поделиться со всем сообществом и посетителями, и...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Фотогалерея на CSS3

Фотогалерея на CSS3

В этом примере вы увидите, как сделать очень даже неплохую галерею изображений без использования JavaScript. Да мы будем использовать только CSS3, а именно некоторые его свойства: user-select, box-sizing, transition, box-shadow. Посмотрите готовый демонстрационный пример, для лучшего понимания того что должно получаться в итоге.

 

Demo

Архив с примером

HTML

index.html

Здесь всё просто не так ли, обратите внимание только к признаку ‘tabindex’.

<div class="gallery">
    <a tabindex="1"><img src="/images/1.jpg"></a>
    <a tabindex="2"><img src="/images/2.jpg"></a>
    <a tabindex="3"><img src="/images/3.jpg"></a>
    <a tabindex="4"><img src="/images/4.jpg"></a>
    <a tabindex="5"><img src="/images/5.jpg"></a>
    <a tabindex="6"><img src="/images/6.jpg"></a>
    <a tabindex="7"><img src="/images/7.jpg"></a>
    <a tabindex="8"><img src="/images/8.jpg"></a>
    <a tabindex="9"><img src="/images/9.jpg"></a>
    <a tabindex="10"><img src="/images/10.jpg"></a>
    <a tabindex="11"><img src="/images/11.jpg"></a>
    <a tabindex="12"><img src="/images/12.jpg"></a>
</div>

  CSS

css/main.css

И главное, что заставит нашу фото галерею красиво показывать изображения это стили CSS3.

/* Стили Фотогалереи */
.gallery {
    margin: 100px auto 0;
    width: 800px;
}
.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 {
    border: 8px solid #fff;
    border-bottom: 20px solid #fff;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;

    /* CSS3 Свойство калибровки поля  */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    /* CSS3 правила перехода */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;

    /* CSS3 Тень поля */
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}

/* Пользовательские CSS3 вращение преобразование */
.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: 250%;
    left: -150px;
    top: -100px;
    position: absolute;
    width: 250%;
    z-index: 25;

    /* CSS3 правила перехода */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;

    /* CSS3 преобразуйем правила */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

 

  • Просмотров: 7459
  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...

VLVIT.RU - Сайт для людей увлекающиеся web дизайном, современными интернет технологиями, графическими программами Adobe Photoshop, Illustrator.

2017г.