Перейти к содержимому

Полосатый фон в 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