Template modification Виджет категорий как на Underbadges

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

Вид с ПК:

​

Вид со смартфона:

​

Основные характеристики виджета:​

1. Структура​

• Категории: Виджет включает несколько категорий, каждая из которых представлена в виде ссылки.
  
  
• Иконки: Каждая категория имеет уникальную иконку, что помогает пользователям быстро ориентироваться.

2. Дизайн​

• Гибкая верстка: Элементы располагаются в ряд и адаптируются к размеру экрана, благодаря чему виджет выглядит аккуратно на любых устройствах.
  
  
• Стилизация: Каждая категория имеет закругленные углы и эффект масштабирования при наведении, что делает интерфейс более привлекательным.
  
  
• Цветовая палитра: Рамки категорий окрашены в разные цвета, что добавляет визуального разнообразия и помогает выделить каждую категорию.

3. Интерактивность​

• Эффекты при наведении: При наведении на кнопку происходит изменение цвета текста и фона, а также добавление тени, что делает взаимодействие с элементом более динамичным и привлекательным.

4. Адаптивность​

• Минимальная ширина: Элементы имеют заданную минимальную ширину, что обеспечивает их читаемость на экранах различных размеров, от мобильных устройств до десктопов.

5. Удобство использования​

• Легкость навигации: Благодаря визуальным элементам и четкой структуре, пользователи могут легко находить нужные категории, что улучшает общий опыт взаимодействия с сайтом.

Код виджета (HTML, CSS, готовый вариант):​

Spoiler: HTML

<div class="category-widget">
  <a href="#" class="category uncategorized"><span class="icon">0️⃣</span> Категория 1</a>
  <a href="#" class="category category1"><span class="icon">1️⃣</span> Категория 2</a>
  <a href="#" class="category category2"><span class="icon">2️⃣</span> Категория 3</a>
  <a href="#" class="category category3"><span class="icon">3️⃣</span> Категория 4</a>
  <a href="#" class="category category4"><span class="icon">4️⃣</span> Категория 5</a>
  <a href="#" class="category category5"><span class="icon">5️⃣</span> Категория 6</a>
  <a href="#" class="category category6"><span class="icon">6️⃣</span> Категория 7</a>
  <a href="#" class="category category7"><span class="icon">7️⃣</span> Категория 8</a>
</div>

Spoiler: CSS

:root {
--border-color-1: #95a5a6; --border-color-2: #3498db; --border-color-3: #e67e22;
--border-color-4: #e74c3c; --border-color-5: #9b59b6; --border-color-6: #2ecc71;
--border-color-7: #f39c12; --border-color-8: #1abc9c;
}

.category-widget {
display: flex;
flex-wrap: wrap;
padding: 10px;
gap: 15px; /* Добавлено расстояние между элементами */
}

.category {
display: flex;
align-items: center;
padding: 10px 15px;
border-radius: 10px;
border: 2px solid transparent;
color: inherit;
font-weight: bold;
text-decoration: none;
transition: all 0.3s ease;
flex-grow: 1;
min-width: 100px;
white-space: nowrap;
text-align: center; /* Центрирование текста */
}

.category:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
color: white; /* Изменение цвета текста при наведении */
}

.category1 { border-color: var(--border-color-2); }
.category2 { border-color: var(--border-color-3); }
.category3 { border-color: var(--border-color-4); }
.category4 { border-color: var(--border-color-5); }
.category5 { border-color: var(--border-color-6); }
.category6 { border-color: var(--border-color-7); }
.category7 { border-color: var(--border-color-8); }
.uncategorized { border-color: var(--border-color-1); }

.category:hover.category1 { background-color: var(--border-color-2); }
.category:hover.category2 { background-color: var(--border-color-3); }
.category:hover.category3 { background-color: var(--border-color-4); }
.category:hover.category4 { background-color: var(--border-color-5); }
.category:hover.category5 { background-color: var(--border-color-6); }
.category:hover.category6 { background-color: var(--border-color-7); }
.category:hover.category7 { background-color: var(--border-color-8); }
.category:hover.uncategorized { background-color: var(--border-color-1); }

.icon {
margin-right: 8px;
}

Spoiler: Виджет (полный код готового варианта)

<div class="category-widget">
<a href="#" class="category uncategorized"><span class="icon">0️⃣</span> Категория 1</a>
<a href="#" class="category category1"><span class="icon">1️⃣</span> Категория 2</a>
<a href="#" class="category category2"><span class="icon">2️⃣</span> Категория 3</a>
<a href="#" class="category category3"><span class="icon">3️⃣</span> Категория 4</a>
<a href="#" class="category category4"><span class="icon">4️⃣</span> Категория 5</a>
<a href="#" class="category category5"><span class="icon">5️⃣</span> Категория 6</a>
<a href="#" class="category category6"><span class="icon">6️⃣</span> Категория 7</a>
<a href="#" class="category category7"><span class="icon">7️⃣</span> Категория 8</a>
</div>

<style>
:root {
--border-color-1: #95a5a6; --border-color-2: #3498db; --border-color-3: #e67e22;
--border-color-4: #e74c3c; --border-color-5: #9b59b6; --border-color-6: #2ecc71;
--border-color-7: #f39c12; --border-color-8: #1abc9c;
}
.category-widget {
display: flex;
flex-wrap: wrap;
padding: 10px;
gap: 15px; /* Добавлено расстояние между элементами */
}
.category {
display: flex;
align-items: center;
padding: 10px 15px;
border-radius: 10px;
border: 2px solid transparent;
color: inherit;
font-weight: bold;
text-decoration: none;
transition: all 0.3s ease;
flex-grow: 1;
min-width: 100px;
white-space: nowrap;
text-align: center; /* Центрирование текста */
}
.category:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
color: white; /* Изменение цвета текста при наведении */
}
.category1 { border-color: var(--border-color-2); }
.category2 { border-color: var(--border-color-3); }
.category3 { border-color: var(--border-color-4); }
.category4 { border-color: var(--border-color-5); }
.category5 { border-color: var(--border-color-6); }
.category6 { border-color: var(--border-color-7); }
.category7 { border-color: var(--border-color-8); }
.uncategorized { border-color: var(--border-color-1); }
.category:hover.category1 { background-color: var(--border-color-2); }
.category:hover.category2 { background-color: var(--border-color-3); }
.category:hover.category3 { background-color: var(--border-color-4); }
.category:hover.category4 { background-color: var(--border-color-5); }
.category:hover.category5 { background-color: var(--border-color-6); }
.category:hover.category6 { background-color: var(--border-color-7); }
.category:hover.category7 { background-color: var(--border-color-8); }
.category:hover.uncategorized { background-color: var(--border-color-1); }
.icon {
margin-right: 8px;
</style>