Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)
В этом уроке мы возьмём пачку ссылок на обычные миниатюры изображений и превратим их в отзывчивую галерею на CSS сетке, с эффектом размытия при наведении. А ещё мы применим крутой CSS трюк, чтобы это всё работало на тач-скринах.
Вот что мы будем создавать:
Немного фона
Недавно, Рэйчел МакКоллин написала урок, объясняющий то, как в тему WordPress добавить галерею на основе ссылок на изображения.
Эти ссылки действуют в качестве навигации для дочерних страниц, не зависимо от того на какой странице пользователь (или какую страницу вы выберите), а итоговый плагин выводит что-то типа этого:
С помощью генератора разметки в плагине Рэйчел, мы сделаем следующее:
- Организуем миниатюры с применением CSS Grid, что даст нам отзывчивую галерею.
- С помощью CSS фильтров и переходов, создадим эффект, срабатывающий при наведении мыши.
- Используем изящный медиа-запрос CSS, чтобы пользователи с сенсорными экранами видели заголовок каждой миниатюры, без наведения.
1. Изменим разметку (слегка)
Давайте взглянем на разметку, сгенерированную кодом Рэйчел. После очистки, он выглядит вот так круто:
<div class="child-page-listing">
<h2>Our Locations</h2>
<article class="location-listing">
<a class="location-title" href="#">San Francisco</a>
<div class="location-image">
<a href="#">
<img src="image.jpg" alt="san francisco">
</a>
</div>
</article>
<!-- more articles -->
</div>
У нас тут родительский элемент <div>, который содержит <h2> и несколько элементов <article>. Если мы используем CSS сетку, сначала мы определяем контейнер сетки. Мы могли бы использовать для этого родительский <div>, но тогда каждый прямой дочерний элемент, даже <h2> станут элементами сетки, поэтому нам нужно кое-что изменить.
Мы обернём все элементы <article> в другой <div> (вы можете использовать любой элемент, который считаете наиболее подходящим), которому мы так изобретательно присвоим класс grid-container. Используйте этот исходный pen за основу.
2. Отзывчивая CSS-сетка в три строки
Всего несколько правил могут превратить наши миниатюры в сетку:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
}
Тут display: grid; – делает дочерние элементы элементами сетки и располагает их как положено, grid-gap: 1em; – задаёт интервалы.
Из-за значения, которое мы задали свойству grid-template-columns, которое определяет наши столбцы, возникают небольшие сложности. Наверное, вы ожидали увидеть что-то вроде repeat(3, 200px), что дало бы нам 3 столбца по 200px. В нашем случае, для repeat(), мы использовали ключевое слово auto-fill, а затем несколько значений. Что даёт нам столько столбцов шириной минимум 300px и максимум 1fr, сколько смогут вместиться в контейнер сетки.
Изменяйте размер окна браузера и смотрите, как оно меняется!
Осталось добавить лишь одну деталь:
img {
width: 100%;
height: auto;
}
Это обеспечит правильное заполнение контейнера изображениями (особенно это необходимо для демо от Рэйчел, так как нам нужно переопределить свойства width и height для WordPress вывода).
3. Эффект при наведении
В качестве наложения на миниатюры, мы будем использовать названия (title), которые будут появляться при наведении. А ещё сделаем изображение под курсором красноватыми и немного размытыми, для удобства читаемости текста наложения.
Накладываем названия
Для наложения названия, нам нужно правильно его расположить, поэтому начнём с article и зададим ему position: relative;, а для title – position: absolute;. Также придадим фону красноватый эффект и сделаем так, чтобы он заполнял всё доступное пространство.
.location-listing {
position: relative;
}
.location-title {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(90,0,10,0.4);
}
Хорошее начало!
Осталось доработать ещё одну-две вещи, включая лишнее пространство снизу (название немного больше, чем миниатюра). Это можно решить, удалив все line-height в контейнере изображений.
.location-image {
line-height: 0;
}
Оформляем названия
Некоторые типографические приёмы могут улучшить вид наших названий, а три строки с магией flexbox, выровняют их по центру.
.location-title {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(90,0,10,0.4);
/* typographic styles */
color: white;
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
/* position the text centrally*/
display: flex;
align-items: center;
justify-content: center;
}
Гораздо лучше:
Скрываем названия
Теперь, давайте скроем названия, убрав его непрозрачность, чтобы мы видели его только при наведении. Пара правил для нашего .location-title после тех, что уже есть, должны с этим справиться:
/* hide the title by default */ opacity: 0; transition: opacity .5s;
Ещё мы задали правило transition, чтобы непрозрачность происходила постепенно (за 0,5 секунды). Давайте сделаем это:
.location-listing:hover .location-title {
opacity: 1;
}
Прекрасно! Теперь названия снова появляются при наведении курсора мыши:
Размытые линии
Мы уже создали отлично-выглядящий эффект при наведении, но может добавим ещё чего-нибудь, как думаете? Давайте добавим фильтр размытия к изображениям. Начнём с настройки фильтра размытия при обычном состоянии, чтобы было от чего отталкиваться при переходе. Затем, для состояния «при наведении», добавим размытие на 2px (можете поставить любую другую цифру, но я думаю, с 2px выглядит хорошо):
.location-image img {
filter: blur(0px);
transition: filter 0.3s ease-in;
}
.location-listing:hover .location-image img {
filter: blur(2px);
}
Вот, что получилось:
Отметим пару вещей:
- Названия исчезли потому, что теперь браузер показывает размытое изображение поверх него.
- Эффект размытия выглядит хорошо, но у нас появились размытые края (мы можем сделать это получше).
Исправить скрытые заголовки нам поможет z-index: 1;, если мы добавим его в .location-title.
Исправление размытых краёв немного сложнее. Начнём с масштабирования изображения, сделав его немного больше, затем для контейнера изображений (.location-listing) зададим overflow: hidden;, таким образом, при размытии большего изображения, его края удачно обрежутся. Вот окончательные свойства для двух проблемных моментов:
.location-image img {
filter: blur(0px);
transition: filter 0.3s ease-in;
transform: scale(1.1);
}
.location-listing {
position: relative;
overflow: hidden;
}
Правило transform: scale(1.1); масштабирует наши изображения во всех направлениях на 1,1 (1,0 не изменит их вовсе). Этот результат намного аккуратнее:
4. Проблема с сенсорными экранами
В принципе, всё готово! Прекрасная сетка изображений и эффект размытия на каждой миниатюрке. Осталась одна вещь – те, кто не могут навести на изображение, не увидят их названия (огромное количество планшетов и смартфонов не эмулируют наведение, при длительном нажатии), что не допустимо.
К счастью, у CSS есть очень полезное взаимодействие для медиа-запросов, что поможет нам (их поддерживает большое количество браузеров). Эти запросы определят механизм ввода браузера – качество указательного устройства, возможность наведения и некоторые другие специальные вещи, так что мы сможем довольно точно понять, если наши миниатюры просматриваются на устройстве с сенсорным экраном.
Например, возьмём этот медиа-запрос (он делает именно то, что от него ожидается):
@media (hover: none) { }
В те фигурные скобки, мы вставим те стили, которые должны работать в браузерах, которые не обрабатывают :hover. Давайте сделаем это, мы зададим это для устройств, на которых наведение либо невозможно, либо неудобно и миниатюры изображений всегда будут размытыми, а названия видимыми.
/* for touch screen devices */
@media (hover: none) {
.location-title {
opacity: 1;
}
.location-image img {
filter: blur(2px);
}
}
Взгляните:
Примечание: как упоминалось, поддержка этого вполне оправдана, но разговоры о реализации интерактивных медиа-запросов все ещё продолжаются. Есть большая вероятность, что спецификация изменится или её части будут удалены.
Заключение
Мы закончили! Спасибо, что были со мной, я надеюсь вы узнали что-то новое и вам понравилось играться с CSS (а кому не понравиться?). Взгляните ещё раз на демку – можете добавить это в файлы темы, созданные Рэйчел в первой части.
Что ещё почитать
