CSS Tie-Dye Gradient Backgrounds | Мириам Эрик Сюзанна
| сообщение
конический всплеск цвета
Вдохновение с игривым градиентом
На прошлой неделе, мой друг Дилан (младший разработчик ищет работу, если у вас есть лиды!) прислал мне вопрос о повышение производительности этого забавная фоновая анимация с размытыми пятнами:
См. Фон размытия CSS Pen Moving от @miriamsuzanne на CodePen.
На моем компьютере все работает нормально, но на менее мощных устройствах может работать с перебоями Я сделал несколько небольших предложений,
и отправил ссылки на другие ресурсы производительности анимации.
Но это пост не о производительности анимации.
Я люблю чувство игривости
которые Дилан уже обнаружил в CSS —
несмотря на буткемпы кода в целом
не уделяя языку особого внимания.
Теперь я тоже хочу поиграть с размытым фоном!
Ищу текстуру
CSS {в реальной жизни}, Мишель Баркер написал отличный пост о Полутоновые шаблоны CSS. Мне всегда нравились полутоновые узоры, и я искал что-то добавить текстура к моему новому дизайну сайта. Последние несколько использованных дизайнов полуслучайные полупрозрачные пузыри – что-то вроде этого, но с цветами, основанными на дизайне сайта:
См. круги Pen Random от @miriamsuzanne на CodePen.
Нажмите повтор в правом нижнем углу, чтобы создать новые кругиМне нравится эта случайность, но пришло время попробовать что-то новое.
После игры с эффектом полутонов, это было не совсем правильно в контексте. Так что я пошел искать больше вдохновения. Существует множество идей фоновых шаблонов CSS:
- Классика Леа Веру Галерея шаблонов CSS3
- Темани Афиф
CSS-Pattern.
com - Ана Тюдор Фоновые узоры, упрощенные с помощью конических градиентов
- Джим Раптис Фоновые шаблоны CSS инструмент
- И многое другое
comКак всегда, У Аны Тюдор тоже есть серия фантастических демонстраций градиента на CodePen:
См. фоновые шаблоны карт Pen Single element от @thebabydino на CodePen.
См. фоновые шаблоны карт Pen Single element от @thebabydino на CodePen.
Конический и радиальный первый набросок
Я мог бы вернуться к некоторым из этих идей по дороге. Я представляю этот сайт потенциально имеющие разные шаблоны для разных разделов сайта – или, может быть, способ выбрать свой любимый шаблон? Но пока я пошел с шаблоном Темани Афиф который мне очень нравится:
См.
шаблон Pen Fancy с использованием радиального градиента от @t_afif на CodePen.
Я поменял местами свои тонкие цвета фона сайта, и дополнительный радиальный градиент сверху. Я думаю, что шаблон будет слишком громоздким если он продолжался слишком далеко вниз по странице, так что это дает ему хорошее затухание с мягкими/изогнутыми краями.
См. справочную информацию о Pen Site от @miriamsuzanne на CodePen.
Смешанная градиентная краска для галстуков
В рамках игры и исследуя эти закономерности, Я понял оба конические градиенты и режим наложения фона обе функции хорошо поддерживаются.
Неудивительно, они были вокруг некоторое время сейчас, но я никогда не интегрировал их в мою работу раньше. Поэтому я потратил некоторое время на изучение, и мне очень понравился этот результат:
См.
всплеск Pen Conic от @miriamsuzanne на CodePen.
Весело просто посидеть
и возиться с цветами,
градиенты и режимы наложения
чтобы увидеть, что происходит.
Я тоже экспериментировал с использованием oklch ,
вы можете раскомментировать этот код, чтобы увидеть результаты.
Я также экспериментировал с анимацией позиции каждого градиента, но это, кажется, не играло хорошо с режимами наложения? Я должен буду изучить это подробнее.
Я мог бы использовать этот эффект в нижнем колонтитуле моего сайта – где у меня раньше был транс-флаг. Что произойдет, если мы используем транс цвета?
См. заставку Pen Conic от @miriamsuzanne на CodePen.
Градиентный фон для электронной почты
Зачем использовать сплошной фон, если вы можете добавить блики градиентов в свое электронное письмо в формате HTML.
Чрезвычайно прост в реализации, и я объясню, как это сделать, а также покажу, как сделать так, чтобы он плавно переходил в сплошной фон, если почтовый клиент не поддерживает градиент CSS3.
Градиент CSS3
При использовании градиента CSS3 для добавления градиентного фона требуется всего одна строка CSS. Нам больше не нужно создавать градиентные изображения и вызывать их в CSS как фоновое изображение. Одним запросом к серверу меньше. Вы можете создать линейный, а также радиальный градиент с двумя или более цветами. Большинство основных браузеров поддерживают эту спецификацию, и у нас есть префикс производителя для некоторых браузеров.
Как насчет поддержки в почтовых клиентах. Все ли почтовые клиенты поддерживают градиент CSS3? Нет, не все почтовые клиенты поддерживают градиент CSS3, но мы всегда можем вернуть его к сплошному фону.
Тот факт, что некоторые почтовые клиенты (в основном более старые версии Outlook) не поддерживают эту спецификацию, не означает, что мы не должны отправлять электронные письма с красивым градиентным фоном пользователям, которые проверяют свою электронную почту в современных клиентах.
Я не буду вдаваться в подробности CSS3 Gradient. В Интернете есть множество ресурсов, на которых вы можете учиться. Если вы используете генератор градиентов CSS в Google, вы найдете несколько веб-сайтов, которые сгенерируют его для вас. Объявление градиента CSS, которое мы будем использовать для нашего шаблона, показано ниже:
Это создаст диагональный (45 градусов) линейный градиент фона от цвета #8e36e0 до цвета #164b92 .
Использование градиента CSS3 в электронной почте
Вы можете узнать больше о написании градиента CSS, который соответствует вашим требованиям к дизайну, самостоятельно. Теперь давайте посмотрим, как это написано для этого шаблона.
В этом шаблоне мы применяем градиентный фон в ячейке таблицы, которая охватывает весь документ и охватывает основной CTA нашего электронного письма. В приведенном ниже HTML-коде показано, как именно это сделать.
Давайте посмотрим на ключевые строки кода электронной почты:
- Строка 1
Эта таблица станет основой для нашего шаблона электронной почты. Полная ширина, белый фон, без пробелов и отступов. - Строка 3
Это ячейка таблицы, в которую мы собираемся добавить градиент CSS3 в качестве встроенного стиля. Здесь важно отметить атрибут
Вот как мы устанавливаем переход к сплошному фону для почтовых клиентов, которые не поддерживают градиент CSS3. - Строка 6 — Строка 11
Эта строка предназначена для того, чтобы градиентный фон работал для Outlook с помощью условного CSS, аналогичного тому, который мы используем для таргетинга на IE7, IE8 или IE lt 9. Но с электронной почтой мы проверяем mso для таргетинга. версии Outlook. Обратите внимание на mso-width-percent:1000 , это сделает прямоугольник на 100 % равным. fillcolor=»#8e36e0″ — начальный цвет, а color2=»#164c92″ — конечный цвет градиента. - Строка 13 — Строка 19
Это будет таблица, в которой мы будем кодировать CTA. Все, что мы хотим завернуть в ячейку градиента, должно находиться здесь. - Строка 30 — Строка 34
Сюда попадают другие копии электронной почты за пределами ячейки градиента.
