Создание раздвигающейся галереи изображений с использованием только CSS3

8 февраля 2015 | Опубликовано в css | 1 Комментарий »

В этом уроке мы создадим раздвигающуюся галерею изображений, использую только CSS. И еще мы рассмотрим альтернативу псевдоклассу :target. Посмотрите пример, чтобы увидеть, как работает галерея изображений.

Демонстрация работы – Скачать исходный код

Псевдокласс :target

Вы, возможно, уже знаете о псевдоклассе :target, позволяющем нажать на ссылку и активировать соответствующие стили для элемента, на который указывает эта ссылка. Это очень удобно, но минусом является то, что страница прокрутится до этого элемента, и, чтобы избавится от этого, придется использовать Javascript.

Альтернативный способ не особенно простой и понятный, но это, вероятно, единственный способ добиться нужного эффекта, чтобы при этом не менялось положение страницы, без использования Javascript.

Давайте рассмотрим следующий код как пример работы с псевдоклассом :target:

<a href="#image-1">Click me!</a>
<div id="image-1">
   Some text or an image here.
</div>

Здесь ссылка указывает на блок #image-1. Мы можем задать нужные действия с помощью CSS для состояния, когда блок активен, т. е., когда пользователь нажимает на ссылку:

#image-1:target {
  /* Style #image-1 here */
}

Но страница прокрутится до этого элемента, что может быть проблемой, если нужно поддерживать универсальную функциональность.

Альтернативный способ

Альтернативным способом является применение форм. Полю ввода, кнопке или другим формам можно добавить псевдокласс :focus или :checked, который активируется, когда пользователь нажмет на форму. Мы можем задать стили элементу формы так, чтобы он не выглядел элементом формы. Вот об этом мы и расскажем в этом уроке. Здесь мы будем использовать псевдокласс :checked. Давайте начнем.

Совместимость

В новых версиях браузеров все будет работать отлично, но в старых версиях браузера Internet Explorer нет поддержи переходов. Чтобы и там переходы заработали, можно применить следующее решение.

После переходов следующей проблемой являются двумерные трансформации. Они не поддерживаются браузером Internet Explorer 8 версии и младше. Эту проблему можно решить следующим способом.

Структура

Структура галереи довольно простая. Есть несколько блоков, в которых есть подпись, радиокнопка и содержимое. Это вложено в другой блок, чтобы код CSS от этого блока не смешивался с кодом от других форм.

<div id="image-expand">
    <div>
        <label for="button-1"><span>Some Title</span></label>
        <input id="button-1" name="button-set" type="radio" />
        <div class="content">
            <img src="1.jpeg" alt="" />
            <a class="read-more" href="/">Read More</a>
        </div>
    </div>
    <div>
        <label for="button-2"><span>Another!</span></label>
        <input id="button-2" name="button-set" type="radio" checked />
        <div class="content">
            <img src="2.jpeg" alt="" />
            <a class="read-more" href="/">Read More</a>
        </div>
    </div>
    <div>
        <label for="button-3"><span>News</span></label>
        <input id="button-3" name="button-set" type="radio" />
        <div class="content">
            <img src="3.jpeg" alt="" />
            <a class="read-more" href="/">Read More</a>
        </div>
    </div>
    <div>
        <label for="button-4"><span>Tutorials</span></label>
        <input id="button-4" name="button-set" type="radio" />
        <div class="content">
            <img src="4.jpeg" alt="" />
            <a class="read-more" href="/">Read More</a>
        </div>
    </div>
</div>

CSS

Все заработает именно благодаря коду CSS. Давайте сначала зададим стили для основных элементов:

#image-expand div {
    float: left;
    position: relative;
}

#image-expand div .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 200px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    z-index: 500;
} 

#image-expand div label {
    width: 100px;
    height: 200px;
    display: block;
    background: #f6f6f6;
    box-shadow: inset -25px 0px 30px -10px rgba(0,0,0,0.05);
    cursor: pointer;
    border-right: 1px solid #ddd;
    color: #222;
    overflow: hidden;
    position: relative;
    z-index: 1000; /* So its above everything */
}

#image-expand div label span {
    width: 140px;
    display: block;
    position: relative;
    top: 70px;
    font-family: 'Myriad Pro', Arial, sans-serif;
    font-size: 26px;
    text-transform: uppercase;
    font-weight: bold;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);

}
#image-expand input[type=radio] {
    opacity: 0; /* Make the radio button invisible. */
}

.content .read-more {
    position: absolute;
    bottom: 30px;
    right: 40px;
    text-decoration: none;
    padding: 10px 20px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    box-shadow:  0px 4px 6px #132732, 0px 4px 0px #1d3846, inset 0px 15px 30px -10px rgba(255,255,255,0.2);
    background: #4e96ba;
    border-radius: 4px;
    font-weight: bold;
    color: #fff;
}

.content .read-more:active {
    box-shadow: 0px 2px 0px #1d3846, inset 0px 15px 30px -10px rgba(255,255,255,0.2);
    bottom: 28px;
}
#image-expand .content, #image-expand label, #image-expand input { /* Transitions for fluidity */
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    -ms-transition: all 0.1s ease-in;
}

Это основные стили, чтобы задать внешний вид и расположение. Следующий код может быть несколько неочевидным. Нам нужно менять код CSS в зависимости от того, какая кнопка активна. Мы добавили комментарии к, вероятно, непонятным местам кода CSS.

#image-expand label:hover ~ input:checked + .content {
    width: 500px; /* When the user hovers on a checked item, override any CSS */
}

#image-expand label:hover ~ .content {
    width: 111px; /* The width of the content is increased when the user hovers */
}

#image-expand label:hover {
    margin-right: 10px; /* On hover expand a little bit, just to hint that the user can interact */
}
#image-expand input:checked {
    margin-right: 580px; /* When something is checked, ensure it's the full width by expanding the input */
}

И это все. Если собрать все вместе, мы получим работающую раздвигающеюся галерею изображений. Можете посмотреть демонстрацию работы или скачать исходный код, чтобы лучше разобраться.

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также:

Опубликовано в css, февраля 8, 2015
Метки: css, css3, верстка, сss галереи, урок css, урок css3, урок верстка

�

Создание раздвигающейся галереи изображений с использованием только CSS3

Псевдокласс :target

Альтернативный способ

Совместимость

Структура

CSS

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые