CSS эффекты для лендингов
HTML-код
- Опубликовано: 29 сен 2024
- Подробнее о курсе «Технология CSS Grid. Руководство по адаптивной верстке»: webformyself.c...
В предлагаемом уроке вы найдете парочку симпатичных CSS-эффектов для лендингов. Данные эффекты не обязательно использовать исключительно для одностраничных сайтов, их можно использовать для любых других сайтов в случае, если вы хотите красиво оформить заголовок на странице.
Первый эффект связан с использованием режима смешивания цветов и свойства mix-blend-mod. Для второго эффекта используются эффект анимации и свойство background-clip для наложения фона на текст.
Очень классно. Постоянно слежу за Вашим каналом. Спасибо, что делитесь Вашими знаниями! Удачи! С наступающим праздником!
Гуд фича
Неожиданно белый Sublime =)
Ага, он разный бывает))
ах я думал это для веб-дизайнеров но оказалось, что это лишь для тех кто занимается версткой.
Сидите за компьютерами зрение снижает 🤣, это все изза светлых тем бро пожалуйста смени тему
кстати, советую посмотреть загрузки ЦПУ при всех этих анимашках..
Посмотрел. На не самом мощном ноутбуке при шести открытых вкладках, включая вкладку с анимацией, плюс еще некоторая мелочь - загрузка процессора около 20%... скриншот - prntscr.com/nnmqzr
@@matroskin978 на самом деле, когда вы переключаетесь на другую вкладку, другие вкладки рендеренгом уже не занимаются, расчет анимации возможно (зависит от браузера), но не рендеринг, если основную страницу перегрузить анимацией, про ЦПУ может быть загружен чуть ли не на 50%..что не очень хорошо.
@@reiserwasserman1629 я не переключался на другую вкладку, специально даже сделал скриншот выше. Браузер Firefox. Но также тестировал и в Chrome. Урок готовил на достаточно средненьком ноутбуке, экспериментировал с кодом в процессе подготовки - ничего тормозило при этом. Да и используется CSS анимация сегодня сплошь и рядом, почему она должна тормозить?
@@matroskin978 причем тут переключался или не переключался? еще раз прочитайте внимательно те моменты, на которые я вам акцентировал. Любой инструмент нужно использовать вмеру, в том числе и анимацию, а то зайдешь бывает на какой либо ресурс, который благодаря всем этим анимациям занимает большую часть процессорного времени, и желания работать с таким сайтом отпадает само собой.
@@reiserwasserman1629прочитал еще раз... Вы сказали, что когда переключается вкладка, тогда анимация в неактивной вкладке приостанавливается и ЦПУ не грузится. Я замерил нагрузку при активной вкладке, о чем Вам и написал. Ну а относительно меры, то в видео я ведь нигде и не говорил, что нужно использовать анимацию сплошь и рядом для каждого элемента страницы... здесь я с Вами согласен целиком и полностью - мера должно быть во всем. Но это не значит, что нужно отказаться от анимации совсем. Повторюсь, эффект в уроке никак не вешает процессор.
А что это за инструмент когда вы в папке на фото наводите, показывается размер,дата и сама фото как бы в модуле??
Это программа QTTabBar, которая расширяет возможности стандартного проводника Windows (организует возможности вкладок в проводнике, добавляет превью для файлов).
Очень круто!
Красава
супер
ВСЕ ГУД только походу данный шрифт только английский язык понимает? или можно любой другой просто поставить шрифт и все будет так же?
Первый эффект дался с трудностями все не так как на видео пока html{background: #fff;} не прописал не заработало и ещё пару стилей!
Прекрасное свойство, согласен. Но вот с кроссбраузерностью у него проблем куча. Если использовать -webkit-, то не вебкит браузеры не понимают его. Мой Yandexbrowser вообще отказывается воспринимать это св-во. Как быть с этим?
Во втором примере можно было изменить позиционирование по оси Y, увеличив значение top. Тогда можно и без изменения размера шрифта и без его трансформации обойтись.
Так же можно добавить background-size, чтобы и для других размеров шрифта можно было применить этот фон.
А в целом, спасибо - тема интересная.
Отличные эффекты, спасибо! Хотелось бы в следующий раз больше акцента на свойствах и значениях - в каких браузерах работает или нет (особенно мобильных), как работают при других значениях и тому подобное. И в начале поменьше воды)
приятно смотреть, заслуженый лайк
Почему я еще не подписан на этот канал, что за бред?
кто подскажет как анимировать шрифты в винде ))
Понравилось , побольше анимаций хотелось бы)
Очень голос знакомый, на юдеми купил курсы, пачкой сразу, это точно человек от туда...
Точняк, купил курс по php мастер кстати очень понравился
Информативное видео посмотрел скрафтил.
Супер! :) Смотрел ссылку до удаления - мне понравилось :)
Спасибо за видео, было интересно.
крутая фича, нужно иногда смотреть свойства css, авось что-то интересное да найду еще)
Забавный эффект, спасибо
Так блэт можно до просто при background указать gif файл
Ну так попробуйте :)
@@matroskin978 а я попробовал и получается
@@davidsahakyan8790 ну так отлично! :) В вебе, как правило, одну и ту же задачу можно решить разными способами, что не означает, что единственно правильным является только один ;) В многообразии - развитие и красота!
@@matroskin978 спасибо большое
@Game World а смысл, если можно css свойсво на текст накинуть и потом можно через css анимации или js сделать динамический эффект.
за видос лайк
Спасибо большое, сделайте еще больше таких фич
очень познавательной,спасибо
А теперь открой это в IE, браузере,нет...’браузере’, которым все ещё пользуется огромное количество людей
IE уже отменили как за стандарт.
Реально, хрен знает, кто им ещё пользуется.
Ждем еще чего нибудь интересненького!
Здравствуйте, а можно картинку волны png?
Здравствуйте. На офсайте можно взять исходники - webformyself.com/css-effekty-dlya-lendingov/
пошел курить доки, крос че.
Спасибо!)
отлично!
что это за шрифт?
стандартный
ждем пхп) 🙋
Да много уже было PHP... но еще, конечно же, будет... просто периодически хочется поэкспериментировать с чем-то новым... я же не верстальщик так то, поэтому самому интересно воспроизводить какие-то интересные фичи, на которые натыкаюсь в сети)
@@matroskin978 полностью с Вами согласен
Спасибо, больше таких видео!
Спасибо за оценку ;)
А зачем было второй файл создавать, html2, копировать. Изменил бы в первом url да и всё.
Чтобы в исходниках были оба варианта) Люди просят иногда исходники, в которых желательно дать готовые варианты - webformyself.com/css-effekty-dlya-lendingov/
@@matroskin978 понятно.
не вижу ничего "оригинального" в первом эффекте вообще, стандартный rgba желтый цвет текста с прозрачностью реализует такой же эффект, а второй не подходит для серьезных сайтов, разве что для детского магазина какого-нибудь..