НАДЕЛЕНИЕ ТЕКСТА СВЕРХСПОСОБНОСТЯМИ С ПОМОЩЬЮ CSS.
Каждый сайт должен содержать надписи о том, о чем бы он ни был. При создании сайтов разработчику приходится изменять текст, чтобы придать ему привлекательный вид с помощью CSS.
Анимация градиентов текста с помощью css
Градиенты — это способ сочетания двух или более цветов вместе, с помощью прогрессивных переходов, т.е. когда два цвета сочетаются, они не сочетаются в равных пропорциях, они смешиваются, постепенно переходя в свои цвета.
Пример равного соотношения,
Пример прогрессивных переходов (градиенты)
Этапы анимации текстового градиента
i. Добавьте свойство background в нужный селектор и определите тип градиента, который вы хотите использовать.
Вы можете посмотреть типы градиентов и их примеры здесь В этой статье я буду использовать свойство фона под названием linear-gradient.
Выберите два или более цветов, с которыми вы хотите работать, и добавьте их.
Полученный код должен выглядеть следующим образом
Используя linear-gradients, вы можете указать направление, в котором вы хотите, чтобы цвета переходили друг в друга.
Например, сверху вниз, снизу вверх, справа вверху, слева вверху, слева внизу.
Вы также можете указать направления в углах.
Вот формат;
Для этой статьи я укажу направления в углах.
Результирующий код должен быть
.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
}
ii. Добавьте в селектор CSS background clip: text; и background size: 400% 400%;. Это свойство указывает фону принимать форму текста, который он покрывает.
Это свойство CSS принимается не всеми браузерами, поэтому мы должны добавить еще одно свойство, чтобы оно правильно функционировало в большинстве браузеров.
В результате код снова будет выглядеть следующим образом:
.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
background size: 400% 400%;
-webkit-background-clip: text;
}
iii. С помощью описанных выше шагов вы успешно создали текстовый градиент. Вам осталось добавить свойство color к вашим селекторам, чтобы цвет текста не влиял на градиент. Это можно сделать, добавив в код свойство -webkit-text-fill-color: transparent;.
Это дает:
.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Таким образом, вы успешно создали текстовый градиент с помощью CSS.
Вы должны знать, что текстовые градиенты не анимируются в CSS, поэтому для их анимирования нужно добавить несколько трюков (почему бы и нет, мы же на css-tricks.com).
АНИМИРОВАТЬ ТЕКСТОВЫЙ ГРАДИЕНТ.
Шаги:
i. Как и все анимации в CSS, вы должны задать вашему селектору свойство animation, которое включает в себя animation name, animation-duration, animatio-iteration-count(Это свойство определяет, сколько раз будет запущена анимация. Мы пишем код для текстового градиента, поэтому анимация должна запускаться бесконечно), animation-timing-function (Функция анимации).
В результате код будет выглядеть следующим образом
.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: textGradient;
animation-duration: 2s,
animation-iteration-count: infinite;
animation-timing-function: ease;
}
Шаг ii.
Создаем ключевые кадры (Если вы не знаете, ключевые кадры — это способ создания анимации в CSS. Вот ссылка, чтобы прочитать об этом)
Дальше читайте внимательно.
Хитрость успешной анимации текстового градиента заключается в изменении его исходной позиции.
Это CSS свойство устанавливает начальную позицию для каждого фона. и позиция является относительной к его слою.
О свойстве background читайте здесь
Это будет окончательный код для анимации ключевых кадров
@keyframes Textgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Объясняя этот код, мы имеем
0%{
background-position: 0% 50%
}
Это относительно свойства animation-duration. Это означает, что в 0% от 2с, что равно 0%, т.е. в начале анимации, установите background-position в 0% 50%.
50% {
background-position: 100% 50%;
}
Это означает, что при 50% от 2 с, что составляет 50%, т.е. 1 с анимации, установите положение фона на 100% 50%
100% {
background-position: 0% 50%;
}
Это означает, что на 100% от 2 с, что составляет 100%, т.е. в конце анимации, установите положение фона на 0% 50%.
Таким образом, вы успешно анимировали текстовый градиент.
Пожалуйста, комментируйте любые вопросы, и я постараюсь ответить на них как можно лучше.