Простая семантичная карточка-ссылка
Представим себе элемент дизайна — карточку. Карточку товара, или карточку поста в блоге. Суть в том, что по клику в любое место карточки нужно переходить на страницу этого товара или поста.
Первая реализация
Логично предположить, что этот элемент должен быть сделан тегом a . Как-то так:
Item header
Item looong description
Проблема
Во-первых это не семантично. Ссылка предполагает наличие внутри себя текста, который описывает, куда она ведет. Помещать туда что-то кроме него — значит путать пользователей со скринридерами и поисковых роботов.
Во-вторых внутри карточки могут предполагаться другие ссылки. Например, на автора статьи или категорию товара:
Item header
Item looong description
Ivan Ivanovich 
Такая верстка не будет работать. Ссылки нельзя вкладывать внутрь других ссылок. Поведение в таком случае не определено, поэтому браузеры избегают такой верстки и превращают ее в такую:
Item header
Item looong description
Ivan Ivanovich Реализация получше
Все же стоит сделать карточку подходящим для нее тегом, в данном случае article , а главную ссылку положить в заголовок:
Item header
Item looong description
Теперь верстка семантична и будет нормально прочитана скринридерами, роботами и другими разработчиками.
Как же сделать переход по ссылке по клику в любое место (кроме ссылки на автора), а не только в заголовок? Существует неочевидное решение на CSS для таких случаев.
Item header
Item looong description
Эти стили создали для ссылки внутри заголовка псевдо-элемент размером во всю карточку, который лежит поверх контента. Теперь клик в любое место карточки является кликом в этот псевдо-элемент, то есть кликом в ссылку и вызовет переход на страницу товара или поста.
«Вложенные» ссылки
Чтобы сделать внутри этой карточки ссылку на автора или категорию товара, положим нужные элементы поверх псевдо-элемента ссылки. Или же опустим псевдо под другие элементы. Значит нужно свойство z-index для управления контекстом наложения и pointer-events для управления событием клика.
Item header
Item looong description
Ivan Ivanovich - добавили z-index: -1 для псевдо-элемента, чтобы убрать его под все остальные элементы в карточке
- добавили z-index: 0 для всей карточки, чтобы создать новый локальный контекст наложения, иначе бы псевдо был в глобальном контексте наложения и убрался под элемент body
- добавили pointer-events: none; для описания и картинки, чтобы сделать их прозрачными для событий мыши, теперь клики в них считаются кликами в элемент ровно под ними, то есть в псевдо
- элементы внутри карточки, которым мы не указали pointer-events (ссылка на автора в данном случае) будут лежать поверх псевдо и не пропускать через себя события мыши, это можно использовать для красивых ховер-эффектов
Более сложные ховер-эффекты
В примере выше по наведению мыши мы только меняем цвет текста для заголовка-ссылки. Это сделано с помощью псевдокласса :hover на теге a . Что делать, если по ховеру нам нужно менять цвет фона карточки?
Первая мысль: сделать селектор article:hover и в нем прописать новый цвет фона.
Почему это плохо? Bo-первых, потому что этот псевдокласс предназначен для интерактивных элементов. article не интерактивный. Во-вторых, этот эффект будет срабатывать, когда пользователь наводит мышку на «вложенные» ссылки. А должен только при наведении на «главную» ссылку.
Правильнее будет использовать функциональный псевдокласс :has() и написать так:
article:has(h3 > a:hover)
От такого решение нас пока останавливает только поддержка :has() в браузерах ��
Поэтому используем article:hover , но помним, что это не очень правильное решение.
Нерешенные проблемы
Это решение не идеальное с точки зрения UX. Например, нельзя выделить текст в карточке, не зажав кнопку Alt (option на MacOS). Эта проблема осталась нерешенной.
Цитирования
- 324-ый выпуск подкаста Веб-стандарты
- Фронтенд-новости №12 от Николая Шабалина
Если вы видите ссылку на эту статью в источнике, который не упомянут здесь, сообщите мне, пожалуйста.
Мотивировать меня чаще писать о CSS можно на patreon.
Мои каналы о CSS css_mind и csswg_weekly в телеграм.
Нашли опечатку? Сообщите мне о ней.
Карточки
Здесь вы узнаете, как сделать информационные «карточки» при помощи CSS.
Иван Иванов
Анна Иванова
Как сделать карточку
Шаг 1) Добавляем HTML:
Иван Иванов
Архитектор & Инженер
Шаг 2) Добавляем CSS:
.card < /* Добавляем тень, чтобы создать эффект "карточки" */ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; >/* При наведении мыши, тень будет гуще */ .card:hover < box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); >/* Добавим поля внутри контейнера карточки */ .container
С закругленными углами:
.card < box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 5px; /* 5px закругленные углы */ >/* Добавляем закругленные углы наверху изображения */ img
Скроенные джинсы
Некоторый текст о джинсах. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.
Создать карточку товара
Шаг 1) Добавить HTML:
Пример
Скроенные джинсы
Некоторый текст о джинсах..
Шаг 2) Добавить CSS:
Пример
.card <
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
>
.price color: grey;
font-size: 22px;
>
.card button border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
>
.card button:hover opacity: 0.7;
>
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Как создать карточки товаров на сайте
Узнайте, как создать привлекательные и эффективные карточки товаров для повышения конверсии вашего интернет-магазина!
Алексей Кодов
Автор статьи
23 июня 2023 в 15:21
Создание карточек товаров на сайте играет важную роль в привлечении внимания посетителей и повышении конверсии. В этой статье мы рассмотрим основные аспекты создания карточек товаров и предоставим примеры для наглядности.
1. Определение структуры карточки товара
Прежде всего, необходимо определить структуру карточки товара. Она должна содержать следующую информацию:
- изображение товара
- название товара
- краткое описание
- цена
- кнопка «добавить в корзину» или «купить»
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
2. Верстка карточки товара
После определения структуры можно приступить к верстке карточки товара. Используйте HTML и CSS для создания разметки и стилизации элементов карточки. Вот пример верстки карточки товара:
Название товара
Краткое описание товара
Цена товара 3. Стилизация карточки товара
Следующим шагом будет стилизация карточки товара с помощью CSS. Учтите, что дизайн карточки должен быть привлекательным и удобным для пользователя. Вот пример стилизации карточки товара:
.product-card < display: flex; flex-direction: column; align-items: center; border: 1px solid #ccc; padding: 16px; border-radius: 4px; >.product-card__image < width: 100%; object-fit: cover; margin-bottom: 16px; >.product-card__title < font-size: 18px; font-weight: bold; margin-bottom: 8px; >.product-card__description < font-size: 14px; margin-bottom: 16px; >.product-card__price < font-size: 16px; font-weight: bold; margin-bottom: 16px; >.product-card__button
�� Не забывайте адаптировать карточку товара для мобильных устройств с помощью медиа-запросов.
4. Интеграция карточки товара в сайт
После верстки и стилизации карточки товара, интегрируйте ее в ваш сайт, добавив разметку и стили в соответствующие файлы вашего проекта. Это может быть выполнено с помощью шаблонизаторов или же просто добавлением HTML и CSS кода вручную.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Теперь вы знаете, как создать карточки товаров на сайте и готовы повысить конверсию своего интернет-магазина! Не забывайте тестировать свои карточки товара на разных устройствах и браузерах для обеспечения наилучшего пользовательского опыта.