Україна, Черкаси
Сміянська 119
+38 (067)4740973
24/6 Support
пн. - пт: 11:00 - 17:00
Онлайн
Сміянська 119
24/6 Support
Онлайн
Натисни на будь-яку картку щоб скопіювати HEX/CSS. Усі градієнти і overlay протестовано на контраст з білим текстом.
Білі літери меню читаються тільки на темних тлах. Усі кольори тут мають контраст ≥ 7:1 з білим (WCAG AAA).
Витягнуті зі скріна сайту — використовуй для CTA-кнопок, акцентів, бренд-смуг по бокам.
Кожен градієнт можна накласти на існуючий банер БЕЗ заміни фото. Натискай Copy CSS — отримаєш готовий код.
Реальні приклади з імітацією меню DEFENDA. Менш контрастні підходи — швидкі, найкращий — підхід №3.
Mobile First — обовʼязково 3 версії. WebP в пріоритеті, JPEG як fallback.
| Файл | Розмір | Формат | Розмір КБ | Призначення |
|---|---|---|---|---|
hero-mobile.webp | 768×1024 | WebP q75 | ~ 90 КБ | Mobile portrait |
hero-mobile.jpg | 768×1024 | JPEG q80 | ~ 130 КБ | Mobile fallback |
hero-tablet.webp | 1366×768 | WebP q75 | ~ 120 КБ | Tablet |
hero-desktop.webp | 2560×1440 | WebP q75 | ~ 280 КБ | Основний |
hero-desktop.jpg | 2560×1440 | JPEG q80 | ~ 450 КБ | Desktop fallback |
hero-4k.webp | 3840×2160 | WebP q70 | ~ 600 КБ | 4K / Retina (опц.) |
Цей код виправляє читабельність меню без зміни картинки. Стилі ізольовані під клас .defenda-hero.
/* ─── Hero Banner Overlay для DEFENDA ─── */
.defenda-hero {
position: relative;
min-height: 600px;
overflow: hidden;
}
/* Темна стрічка зверху під меню */
.defenda-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 180px;
background: linear-gradient(
to bottom,
rgba(20, 40, 25, 0.75) 0%,
rgba(20, 40, 25, 0.4) 60%,
rgba(20, 40, 25, 0) 100%
);
pointer-events: none;
z-index: 2;
}
/* Меню над overlay */
.defenda-hero .menu,
.defenda-hero .logo {
position: relative;
z-index: 5;
}
/* Білі літери з тінню (страховка) */
.defenda-hero .menu a,
.defenda-hero .logo {
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
font-weight: 600;
}
/* Активна мова — зелений акцент бренду */
.defenda-hero .menu .lang-active {
color: #7cb342;
}
/* CTA-кнопка КУПИТИ ОНЛАЙН — на темному фоні */
.defenda-hero .cta-btn {
background: #1a3a1a;
color: #ffffff;
padding: 10px 20px;
border-radius: 4px;
font-weight: 700;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transition: background 0.2s;
}
.defenda-hero .cta-btn:hover {
background: #2d5a2d;
}