[HTML5 CSS] Animated gradient text + Исходники

Первый ролик на канале посвящённый эффектам CSS.
В видео мы создадим анимированный текст с текстурой градиента,
для понимания достаточно знания основ css & html.
Приятного просмотра!
Ссылка на исходники -
CodePen: codepen.io/ThreePixDroid/pen/...

[@Frankslaboratory]

Another unique effect, great job

[@ThreePixDroid_RU]

Thank you so much)

[@TneHarazion]

Ждем новое видео, то что лучше будет.

[@ThreePixDroid_RU]

Стараюсь! Это слишком простое или что-то конкретное не понравилось?

[@neonbrickchannel2136]

Классно получилось. Классно получилось, жду следующие части ;)

[@ASHENES]

контент как всегда на высоте)

[@MusiienkoVS]

Довольно хорошо получилось. Спасибо за контент

[@ThreePixDroid_RU]

пожалуйста)

[@user-pd3vv1ij6b]

Буду благодарен

[@pavelarseyev452]

Спасибо за видео. Само собой лайк и все такое. Но уже на второй минуте сразу тонна замечаний. Стилить по айдишнику - моветон. Обнулять марджины и паддинги можно без приписки px. Просто padding: 0; margin: 0; overflow: hidden - нужен не для скрытия полос прокрутки, а для скрытия выпирающих элементов. Само собой - если нет выпирающих элементов то и полос не будет. Плюс здесь это вообще не нужно, т.к. мы убираем отступы у всех элементов на странице, в том числе и margin у тега body и в этом случае наш враппер, который имеет размеры 100vw на 100 vh, как раз займет весь экран и не будет вылазить за пределы боди, следовательно и не будет создавать полосы прокрутки. font-family: Arial black пишется в кавычках, как и для всех шрифтов, название которых состоит из двух слов, хотя в этом случае тоже сработает. Автор, скажи честно, ты не очень часто практикуешь css?
З.Ы. до конца обязательно досмотрю просто из уважения к каналу :)

[@ThreePixDroid_RU]

Чёрт, да. Знаю об этом) Не думал, увидеть такую реакцию, ведь суть в самом эффекте, а видео хотел выложить скорее)
Странно, что названы не самые серьезные косяки, а лишь такие мелочи. Боюсь представить, что ты думаешь о JS) Там такая грязь...
Стараюсь конечно исправиться и
считаю такие отзывы полезными, так как всё таки заставляют меня внимательнее работать с кодом, постепенно улучшая его)

[@pavelarseyev452]

@@ThreePixDroid_RU я не знаю, что я мог еще упустить. Я описал то, что бросилось в глаза с самого начала. Потом просто забил и досмотрел уже молча. В конце концов, из того, что я описал - ничего не является явной ошибкой. Ну, кроме, может быть имени шрифта без кавычек. Остальные вещи просто говорят о не очень хорошем понимании цсса и/или об отсутствии желания сильно заморачиваться, что похоже и является правдой. Я ни в коем случае не хотел обидеть. Просто как-то в голове пазл не сложился - как человек, который делает такие офигенные штуки на канвасе с помощью фантазии и математики, допускает такие смешные вещи в цсс. Ну и кстати про js - вообще по-другому. Может быть, потому что самому не часто с классами работать приходится, может быть, потому что там все ок - ни разу не возникло желание за что-то зацепиться. Изначально только заметил особый способ выравнивания объявления переменных, с этим вот выставлением знаков равно в ровный столбик - но тут я не знаю, что должно быть в голове, чтобы придираться к чужому перфекционизму :)

[@ThreePixDroid_RU]

@Павел Арсеев Да, всё норм! Мне коммент понравился! На самом деле я боялся за другое совсем!)
В следующий раз при подготовке видео постараюсь быть корректнее)
p.s. Я ведь самоучка и для меня на первом месте сам эффект, если бы где то учился по специальности🧐... то там бы мне привили дисциплину 😁

[@WEBSTART-LIVE]

gradient2 лучше сделать псевдоэлементом, зачем лишний див. И тут лучше классы подойдут, зачем id. Если поколдовать, то можно всё сделать даже без псевдоэлемента, задав множественные анимации для одно эл-та.
Читать св-ва анимации в одной строке - мне было тяжело. Всегда их путаю) Лучше разбивать построчно - тем более видео обучающее
А так - интересное видео) познавательно. like

[@g0od1k]

Целый месяц прошел вот бы видео

[@ThreePixDroid_RU]

Завтра ближе к полуночи если всё по плану пойдёт!)
если не успею то в понедельник тоже около полуночи..

[@user-pd3vv1ij6b]

Учусь по твоим урокам. Они крутые. Я работаю в студии мне дали задание. Написать полет мухи по экрану. Полёт написал, но не могу никак написать чтобы она меняла свое направление в сторону движения. Не подскажешь как это сделать?

[@ThreePixDroid_RU]

Используй math.atan2
чтобы вычислить угол движения.
и поверни изображение мухи на этот угол)

[@user-pd3vv1ij6b]

@@ThreePixDroid_RU спасибо попробую нас в студии всего двое поэтому придётся самому как то выкручиваться практиковаться сложно мозг мой не справляется)

[@BoffkaBoffka]

СПАСИБО!!!
Шикарный урок!!!

[@ThreePixDroid_RU]

пожалуйста)