Полосатый фон в Squarespace с использованием цветов сайта [с CSS]
Jen Webb
0:00 / 0:00
Полосатый фон в Squarespace с использованием цветов сайта [с CSS]
290 просмотров · 4 мес. назад
Jen Webb
11,3 тыс. подписчиков
290 просмотров · 4 мес. назад
Посмотрите мой новый шаблон Squarespace для терапевтов и других предприятий сферы услуг:
https://jen-webb.com/sonder-squarespa...
В этом видеоуроке я покажу вам, как добавить симпатичный полосатый фон к разделам вашего сайта Squarespace с помощью пользовательского CSS. Код динамически ссылается на цвета из ваших стилей сайта, это означает, что если вы когда-либо измените цвета, полосы автоматически изменятся, чтобы соответствовать новым цветам (без необходимости изменять код или обновлять графику в Canva или что-либо подобное).
Переменные цвета также являются отличным лайфхаком, когда вы хотите использовать цвета в своем пользовательском CSS — если вы жестко задаете значения цветов в своем CSS, это только приведет к проблемам в будущем, когда вы захотите изменить цвета. Используйте переменные!
Вот фрагменты кода:
// переменные цвета
@color-lightest: ~'hsla(var(--white-hsl), 1)';
@color-light: ~'hsla(var(--lightAccent-hsl), 1)';
@color-bright: ~'hsla(var(--accent-hsl), 1)';
@color-dark: ~'hsla(var(--darkAccent-hsl), 1)';
@color-darkest: ~'hsla(var(--black-hsl), 1)';
// Полосатый фон секции — не забудьте заменить ID секции
[ЗДЕСЬ УКАЗЫВАЕТСЯ ID СЕКЦИИ] .section-border .section-background {
background: repeating-linear-gradient(90deg, @color-bright, @color-bright 10px, @color-dark 10px, @color-dark 2px);
}
Если вы не хотите использовать цветовые переменные, вы также можете просто заменить переменные @color- в приведенном выше коде шестнадцатеричными кодами.
✿✿✿
ГДЕ МЕНЯ НАЙТИ
https://www.jen-webb.com
/ jenwebbcreates
/ jenwebbcreates1
✿✿✿
ОБОРУДОВАНИЕ ДЛЯ СЪЕМКИ
https://www.jenwebbdesigns.com/filmin...
✿✿✿
Главы
00:00 Проблема использования изображений
01:43 Шаблон
02:28 Динамические цветовые переменные в Squarespace
03:57 CSS для полосатого фона
✿✿✿
Все мнения мои собственные. В этом описании могут содержаться партнерские ссылки, которые позволят вам найти упомянутые в видео товары и поддержать канал без дополнительных затрат с вашей стороны. Хотя канал может получать минимальные суммы, когда вы используете эти ссылки, я включаю ссылки только на те продукты и услуги, которые мне действительно нравятся и которые я считаю ценными. Спасибо за вашу поддержку!
#webdesign #squarespacetips #squarespacecss