ПРИКЛАДИ ТА НАТХНЕННЯ
Галерея CSS
Невеликі приклади кольору, сітки й типографіки. Оберіть тему, щоб перейти до пояснення.
Колір і контраст
Перейти до прикладу ↗
Сітка та блоки
Перейти до прикладу ↗
Типографіка
Перейти до прикладу ↗
Колір і контраст
Виразний акцент на спокійному тлі допомагає зберегти візуальну ієрархію.
.card { background: #f3e5cf; color: #202b2b; }
.card a { color: #a63a28; }Сітка та блоки
CSS Grid ділить простір на колонки, а медіазапит перебудовує макет на вузьких екранах.
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }Типографіка
Ієрархія розмірів і комфортна висота рядка задають ритм сторінки.
h1 { font: 700 3rem/1.05 Georgia, serif; }
p { font: 1rem/1.6 sans-serif; }