CSS фильтры

Друзья, мы уже давно можем во всю применять в нашей верстке css фильтры, отличная штука, позволяет более наглядно продемонстрировать на сайте разные эффекты и решить наши верстальческие проблемы.
Сайт курса по верстке - from0to1.com.ua/
Полезности на patreon - / from0to1
Видос по svg - • SVG, большой гайд
Большой гайд по гридам - • CSS GRID Большое руков...
Верстка сайта - • Верстка целого сайта в...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

[@sid9449]

Вадим, спасибо тебе за то что продолжил снимать такие классные и познавательные видосы в такое мягко сказать непростое время. Здоровья и мира тебе и твоей семье.

[@juleykhanibrahimov2391]

Первый коммент мой! :) Спасибо за контент! Вчера натягивал сайт на WordPress по твоему видосу :)

[@vadymprokopchuk]

красава

[@ЕгорЕгорович-д2т]

Годный контент подплыл.Лайк тебе! И спасибо.

[@vadymprokopchuk]

спасибо

[@thewantedplay8639]

Вадим, сними пожалуйста продвинутый урок по Pug :) оч хочется

[@vasya8441]

Те кто не подписан на канал, он у них в сердце, они его любят.

[@ДмитрийКоровин-в8э]

Спасибо 🙏 Вадим!!! Мира всем!!!

[@jekamokan]

Спасибо за потрясающее видео

[@s1de638]

Очень мало внимания упало на blur, он часто используется, когда открывается менюшка на сайте и дизайнер просит замылить всё сзади, вот там точно потребуется этот фильтр). Кстати, часто ещё и просят затемнить, это вам так, примеры, чтобы не на одних картинках. Только там встаёт вопрос, к чему применять фильтры. Лично я применял ко всем section(так уж получилось, что у меня все блоки были внутри section, а сама менюшка внутри header, поэтому её не размыло. А потом я прочитал, что есть такое свойство, как backdrop-filter. Поддержка 91.6%, но своё дело делает на ура - накидывает фильтр на фон позади элемента, а не на элемент, очень удобно) Будет классно, Владос, если расскажешь об этом, может поможет кому, а то я напыхтелся с такими вечеринками xD

[@s1de638]

Кстати, ещё хотелось чтобы ты высказал своё мнение по использованию иконочных шрифтов и svg спрайтов(кто-то их использует, лично мне они не нравятся). Плюс есть такое свойство, как gap(пошло от grid-gap и это очень оживляет flexbox), поддержка около 91-92, было бы классно если бы ты создал видео на 30 минут с такими вот фишками css, которые именно часто встречаются на практике. Важно новичкам всегда выстроить в голове, что и зачем. У тебя это очень классно получается, приятно твои видео смотреть, объясняешь лучше всех других ютуберов, а я много пересмотрел)

[@vadymprokopchuk]

спасибо, у меня есть сравнение просто иконочных с svg, со спрайтами нет

[@s1de638]

@@vadymprokopchuk привет, кстати, ты не мог бы подсказать, что за шрифт у тебя сейчас стоит в vs code? Раньше у тебя был стандартный, а тут с появлением мака и новый шрифт появился. Сам установил или фишка мака?

[@vasya8441]

Дуже гарний урок. Дякую Вам.

[@vadymprokopchuk]

Дякую

[@jugo-stream]

Благодаря твоим урокам, моя экспа заполняется будто у меня включён премиум!)

[@vadymprokopchuk]

класс, я рад!

[@kerusdc8322]

запустил видео по верстке, а смотрю, как сделать накуренное дерево 🤪

[@AntonioBenderas]

Уже предвижу в будущем туториалы по анимации •|• по трансформации

[@vadymprokopchuk]

вот все ты знаешь)

[@dmitriidmitriev7435]

Владос, красавчик!!!!! Круто объясняешь!!!!Спасибо за контент!!

[@ДмитрийЛавров-ж7м]

Отличный видос. Стоит правда предостеречь от чрезмерного использования некоторых свойств. Например, как-то раз я верстал макет, в котором были большие заблюренные "пятна". Я решил сделать их как раз через блюр. То есть у меня был примерно такой див: border-radius: 50%; background: blue; filter: blur(300px). Так вот на некоторых машинах сайт очень сильно лагал и я долго не мог понять в чём дело. То есть сайт подргужался "полосками" как когда-то грузились картинки на модемном интернете. Причём тормозил не на всех компах, что усложняло поиск причины. Сначала я грешил на js. Думал, что проблема может быть в яндекс метрике или яндекс картах. Но оказалось, что проблема как раз в этом блюре с огромным значением (примерно 300px). Все эти свойства, как и сказал Вадим, считает видеокарта. Но не на всех компах она есть (например в офис часто берут компьютеры без видеокарт). И как раз ПК без видеокарт, вынужденные высчитывать эти размытые пиксели на своих процессорах (а процессоры оч плохо справляются с такими задачами) и прорисовывали сайт по 5-10 минут (именно прорисовывали, а не грузили. Сайт весил очень мало и данные загружались очень быстро). По итогу решил эти пятная залить как обычные png, скачав их с макета в фигме

[@vadymprokopchuk]

ого, вот такая вечеринка может быть

[@ArtemNi]

Вадим, привет! Огромное спасибо! Вечеринка как всегда на высоте! Успехов, здоровья, терпения, поменьше штрафов от HTML-полиции!) 😅Жму руку!🤝

[@vadymprokopchuk]

Спасибо)

[@СашаТюменцев-ш9ь]

спасибо большое!!! Очень редкая тема, но очень полезная)

[@sintel8138]

Спасибо за видео, всё познавательно и интересно. Жду продолжения по теме SVG.

[@orlovwebdev]

Вадим, спасибо вам большое за ваш труд. Ваш формат обучающих роликов просто бомба, как что нибудь скажете, я смеюсь до слёз. А флексы полностью осознал за два ваших видео. Как же мне повезло что в этом океане знаний меня прибило к вашему уютному островку. Понимаю что лучшим решением будет пройти ваш курс, только потому что я уверен что там будет годнота, буду копить изо всех сил. Я с Казахстана, кажется оплатить возможно. Меня зовут Дмитрий, мне 26 лет, месяц как погружаюсь в эту сферу. Просто от души душевно в душу спасибо. Вот такая вечеринка

[@sEnigmus]

Только досмотрел предыдущие видео. А тут новое подвезли. :)

[@vadymprokopchuk]

активная работа

[@BazliMax]

Спасибо за видео!

[@gena2209]

лучший !

[@ГошаКуценко-с4ш]

Вадим привет! Спасибо большое за твою работу очень полезные знания и самое главное очень доступно и понятно, без нудятины

[@stepanrashevskii576]

Спасибо, Вадос, за видос))

[@serjmarkelov9915]

Вадим не перестает удивлять! Спасибо тебе огромное!) Я устроился фронт-енд разработчиком во многом благодаря твоим видео и твоему каналу и, вроде бы, уже знаю много крутых фишек, но вот опять - накладывание тени на png-ое изображение! Вот это реально пушка ребят. Но появился такой вопрос - а как быть с анимациями? Ты упомянул, что при использовании filter вычисления происходят с помощью аппаратного ускорения. Но вроде как анимирование свойства "opacity" считается хорошей практикой. Получается, что лучше анимировать через изменение opacity в свойстве filter? Т.е. например: .element:hover { filter: opacity(0) }

[@vadymprokopchuk]

вроде как да, я читал такое, но на практике не тестил

[@s1de638]

@@vadymprokopchuk Да, аппаратное ускорение действительно поддерживается, только вот я прочитал, что значение можно задавать только строго в процентах) Интересно, как оно так у тебя сработало .8

[@skaliuzhnyi]

Благодарю за урок. Планируется ли курс по JS?

[@vadymprokopchuk]

не в ближайшее время, сейчас другие заботы

[@skaliuzhnyi]

@@vadymprokopchuk это точно… держись!

[@divik_k]

Крутой ролик правда жаль что мало людей его посмотрели

[@Юрий-ъ4г6ъ]

Видео понравилось и полезная информация. Спасибо огромное.

[@vadymprokopchuk]

Класс )

[@Юрий-ъ4г6ъ]

@@vadymprokopchuk на самом деле я вот только начал изучать вёрстку и вы 5 из ютуберов на ком я вообще остановил внимание. И убеждаюсь с каждым видео, что информация из вашего контента очень доступна и информативна. Воспринимается легко. Надеюсь, что достигну минимальных результатов и захочется повысить квалификацию))) потому, как тяжело ввиду обстоятельств которые сложились в быту (семья, дети) . Но вы вдохновляете. Продолжайте .

[@ArteEtHumanitate]

О, живём, аристократическое спасибо!)

[@dfoovoo5281]

фильтр дроп шэдоу огонь)

[@Gazon1155]

13:45 Вы не разблокировали данное ТС :D

[@ДимДимыч-у1м]

Вадим спасибо !

[@АлександрНовак-ы8ь]

По высоте : ВЕЧЕРИНКА, По ширине : ВЕЧЕРИНК, В целом : ВЕЧЕРИН.)) Почему так? Да потому что,контейнер))) Либо "порешать", либо убрать "пацанов из истории"......Дружище,ты - молодец! Убежден, что все твои уроки - только в пользу! За юмор - отдельная "вечеринка"! ТАК ДЕРЖАТЬ! PEOPLE FROM UKRAINE.

[@АндрейИльин-т4ы6й]

Вадим, сними пожалуйста видос по JS для slick slider. А то не совсем понятна форма записи в JS

[@TarasAndriutsa]

THANK YOU VERY MUCH

[@whoisleshalightmusic]

Дякую!)

[@kirillguryanov4925]

спасибо!

[@movieclips4848]

Сделайте серию уроков как это сделать

[@СеменТарасов-т3п]

Вадим, добрый день, подскажите если есть у возможность оплатить курс(карта другой страны), но я резиден Белоруссии, курсы мне все равно не будетут доступны?

[@elgizmitalove8938]

Привет, а можно туториал по созданию сайта для просмотра фильмов. Заранее благодарю

[@ЯнаБабичева-е8ь]

Здравствуйте, подскажите пожалуйста, у вас есть тех поддержка по курсу ?

[@veterok54]

Вообще я помню кто то говорил. Я ДЕЛАЮ БОЛЬШОЙ КУРС ПО WP)) Вадим, где курс?)

[@vadymprokopchuk]

Война

[@veterok54]

@@vadymprokopchuk надеюсь скоро закончится( у меня в Полтаве пока тихо, но в Харькове конечно треш полный(

[@mmosow]

Привет Вадос, можешь сделать видео как реализовать поиск карточек товара по интернет магазину, товары расположены на сайте с структурой каталога, разные категории товара на разных page.html, и чтобы поиск работал со всех страниц сайта. Весь интернет перерыл, нашел кучу способов как реализовать, но все способы это тупо карточки на одностраничке.

[@maxgeorgievsky9527]

Вадим сделай какую-нибудь сложную верстку для продвинутых а-ля Awwwards :) Было бы очень круто и полезно!

[@TarasAndriutsa]

THANK YOU ARE COOL AND USFOLE MAN NICE PROFIT EVRY BODY

[@sashasasha7238]

Дякую!

[@thewantedplay8639]

САЛЮТ ВАДИИИМ!!! Как твои дела??

[@vadymprokopchuk]

по тихоньку, спасибо

[@AntonioBenderas]

CSS фильтры от сигарет

[@vadymprokopchuk]

)))

[@vasiliypetrovych2405]

Буенос диас!

[@vasiliypetrovych2405]

Ну ты и мастер йода фронт енд го перезапуск на GULP Будет круто

[@spectre_of_emotion]

так это получается они фильтр использовали на фото, а я думал это таблетки классные, помогают типа :D Сплошной обман вокруг, а они зовут это рекламой

[@yashulja]

Комментарий для продвижения

[@onlydropped6479]

Вадим спасибо за урок. У тебя куча вместо полезного)

[@romanmegagunko4650]

Интересно, но как то долго..

[@stanislaff5578]

Лучше сразу frontent + backend за это донат закину

[@АлексАнтон-л8ч]

Дякую 🇺🇦✌️

[@АлександрШвец-г4з]

Вадик огромный тебе респектос! Береги себя и свою семью от рашиских снарядов!

[@vadymprokopchuk]

спасибо

[@ilyaivanov9103]

дизлайк и отписка