8 новых сss свойств о котрых ты мечтал

[@elborak795]

Помню, когда учился вёрстке, твоё семичасовое видео очень помогло. Сейчас уже много сайтов за плечами) Спасибо за видео! Успехов тебе профессиональных, а семье здоровья и благополучия!

[@vadymprokopchuk]

Благодарю

[@знаешьпочему-ж6е]

а как называется это видео? можешь подсказать?

[@elborak795]

Называлось "Верстка сайта с нуля до завершения, html/css/js" - около 7 часов

[@АраГорн-ж5ы]

1:20 subgrid 6:10 функции свойства transform как отдельные свойства 10:25 backdrop-filter 15:30 gap 17:00 text-wrap: balance 20:20 accent-color 22:40 aspect-ratio 27:50 line-clamp

[@bashkort_erete]

здоровья тебе добрый человек)

[@leader7700]

Длинновато видео для подобной информации что больше получаса и смотрел в быстрой скорости - на мой взгляд) Но три свойства были дельными и взял себе на заметку)

[@divik_k]

Жду продолжения

[@resmi3311]

только вчера увидел в видео св-во backdrop-filter и сегодня же понадобилось сделать для формы выделение блюром на фоне спасибо, Вадим, за знания и решения!

[@vadymprokopchuk]

Круть

[@ЕгорРура]

Спасибо за ролик! Узнал много нового. Буду иметь ввиду в последующей вёрстке.

[@ИгорьГлазков-с1б]

Здравствуйте Вадим. Большое спасибо Вам за труд. Здоровья Вам и вашей семье.

[@vadymprokopchuk]

Благодарю

[@kiralatysheva6794]

Вадос, красавчик! Как всегда лучший расклад по вечеринке =)

[@vadymprokopchuk]

Благодарю

[@ray84851]

Круто, про line-clamp даже не слышал никогда - всегда такие вопросы при помощи js решал, а оно оказывается уже отдельное css свойство есть.

[@computercomputer3293]

Огромное спасибо за ваш труд. С нетерпением буду ждать еще 8 ;)

[@arinqwerty]

text-wrap: balance - огонь просто! а я с неразрывными пробелами обычно решала такое. это свойство изящнее))

[@petthejir3394]

8 крутых свойств для домашней вечеринки, спасибо за контент

[@vadymprokopchuk]

вот вот)

[@terner_arthur]

Это ЖИРНЫЙ лайк Бро 😉👍

[@alekssjeva951]

Супер! Раньше для выравнивания в колонке задавал ей display: flex; flex-direction: column, а элементу, который находится перед тем, который нужно сделать на одном уровне - flex-grow: 1. Однако это только чаcтично проблему, потому что заголовок мог быть тоже неодинаковой высоты, и тогда уже текст под ним был не на одном уровне. Aspect-ratio использую уже очень давно, для инлайновых img, video, он тоже работает, задавать им display: block не нужно, главное указать ширину (аттрибутом или в стилях).

[@mike9505]

Вадос, респектушка, посмотрел твой видос и жизнь налаживается) 👍

[@vovchara_frontdev]

Сенкс!! Все очень круто, продолжай в том же духе, очень приятно слушать и мотать на ус)

[@ДмитрийЗенин-г8х]

Красавчик) очень позитивно и полезно 👍в ритме танца))

[@sheshko_pavel]

Видосы - огонь, спасибо! ) Было бы афигенно, если бы показал как структурировать и хранить CSS файлы в Next.js последней версии... шрифты подключать, нужен ли sass... мощный такой пласт инфы.

[@maksymrohovyi612]

Вадос, это очень круто, а не мог бы ты еще таких записать 8 или больше новых свойств мечты )))

[@blacksimons941]

Доброго времени суток, спасибо вам за ваши видео!

[@user-evgeIIIa]

Line-clamp и subgridы очень часто помогают в работе. Отличное видео!

[@alexmelk5225]

Круто!))

[@alexdrumer5933]

Спасибо огромное, ждем продолжения рубрики счастья!

[@vadymprokopchuk]

Супер)

[@user-rz1234]

Вадим, классное видио, спаисбо много нового. Про последнее свойство, есть похожее свойство text-overflow:ellipsis, но это если по ширине ограничить,а про ограничение по колличеству строк это очень круто! Благодарю))

[@vladimirtravkin4958]

Вадим, огромная тебе благодарность!

[@heisenberg1o2]

Спасибо за контент! Почаще такие вечеринки)

[@АннаГант-л9б]

Спасибо! Очень актуально! 👍🏻

[@vadymprokopchuk]

круто

[@Jane_123]

Спасибо за рубрику мечты, мне нравится)

[@mariamartseniuk8862]

Очень полезное видео. Спасибо)

[@progover24]

Первый, спасибо за видео 🚀

[@paul_brain]

Красота... спасибо за обзор! Пошел юзать

[@vadymprokopchuk]

супер!

[@Kei4i]

Про переносы слов - nbsp в помощь (символ неразрывного пробела). Вообще не всегда, но в большинстве случаев спасает. Типограф Лебедева в помощь. И сео кажется такое любит. Когда много языков на сайте и не такое начнёшь использовать. br - также неплохо работает, забавно, можно добавить класс и например скрывать его при разных разрешениях и выключать его когда надо.

[@LEV5CHA]

Безумно приятно слушать ))) и смотреть. Чудо чудесное 10 из 10!!111

[@vadymprokopchuk]

благодарю)

[@aleksandrkobelev8868]

Вадос. Твой видос это то о чем можно было только мечтать.

[@vadymprokopchuk]

Класс

[@ОльгаЧерданцева-т4ю]

Вадим! Респект! Как раз в планах было найти подобное свойство, ты прям подарил!!! ❤

[@vadymprokopchuk]

Подгончик такой

[@ОльгаЧерданцева-т4ю]

Вот благодарю, так благодарю!!! А ещё расскажи всем, я тут недавно открыла для себя новый селектор :has, :not:has. пробовал может быть, можно через ребёнка назначить свойство родителю у которого может и класса не быть, или их реакт формирует одинаковыми... Может ты уже рассказывал про это, я мож пропустила, ну, просто в восторге, насколько упрощается работа с новыми свойствами!!!

[@Baaanzaiplay]

Чётко! Можно ещё новых свойств, касательно адаптива (желательно), чтобы поменьше юзать медиа запросы. :)

[@WERWOLION]

для этого нужно просто на флекс-гридах верстать нормально + em-ы , clmp и пр нужно делать через миксины.

[@Baaanzaiplay]

Про миксины вообще не в курсе был) Учусь только....Всё никак не начну ипользовать препроцессоры, кажется что в обычном css ещё не шибко разбираюсь @@WERWOLION

[@andreasshev5748]

Отличное видео. Спасибо.

[@Ronghanes]

aspect-ratio использую давно, а вот остальные просто подарок! Спасибо за видео!

[@vadymprokopchuk]

отлично))

[@НаталияГлебова-г7ф]

Спасибо! Хотим еще счастья!

[@ВладиславТеслюк-х2у]

Я пользовался вместо lime-clamp - text-overflow ellipsis, тоже зачет

[@hunterxxx5135]

Братан! Спасибо тебе большое!!! Ты супер.

[@vadymprokopchuk]

спасибо

[@ОлесяОлехнович-в4я]

Спасибо! Подача оптимистичная!

[@ЮнесКозылов-ч5ц]

Новое видео о котором я мечтал...

[@lesan6866]

Пушка прям, сижу в Харькове и сразу их использую!!!)

[@vadymprokopchuk]

круть, так и нужно

[@eremey1760]

Лучший! Спасибо!

[@ВладиславЗайцевский]

очень полезная вечеринка получилась как всегда )))

[@roman-_-novikov]

Лучший, люблю целую

[@max_wbw]

Обучился нормальной вёрстке благодаря тебе, спасибо огромное 👍 Но верстал-верстал, верстал-верстал, надоело просто верстать, ушёл в full 😅

[@T2kibi]

А сколько ушло примерно времени на обучение верстке ?)

[@vadymprokopchuk]

Круто

[@max_wbw]

​@@T2kibi Я не считал, оно само как-то получилось😁

[@max_wbw]

​@@T2kibiНачал вообще с вордпресс, а там пошло поехало.

[@samjames88]

классная вечериночка, кайфанул однозначно)))

[@vadymprokopchuk]

огонь

[@SuperKozzz]

Вот это вечериночка🎉👍

[@Varanovski]

Ждём продолжение рубрики счастье!

[@vadymprokopchuk]

Супер!)

[@ringnull]

Очень круто, ждем еще )

[@ПетрСкворцов-о5ч]

Спасибо за твой труд 👏👍💪

[@KnowingCat]

Грид: Я самый лучший для выравнивания колонок, теперь у меня есть сабгриды. Флекс: Ну да, ну да, пошел я нахер.

[@РобертГенрих]

А когда сделают border-box по умолчанию?)

[@ПитбульЭнергия]

Огромное спасибо за контент!

[@tatigerbst4416]

Niceeeeeee! Thank you, Bro!

[@funnymoments621]

Люблю тебя Вова❤

[@saxboroda]

отличная рубрика, Вадим. одобрямс)

[@vadymprokopchuk]

Спасибос

[@MrStrangesound]

Text wrap balance - в adobe InDesign лет 15 назад было свойство balance ragged lines. Там ещё можно было выставлять пределы расширения букв/трекинга для лучшего заполнения контейнера текстом

[@alexx_2023]

это типа как в Ворде - выровнять по ширине?

[@88Liviu]

Большое спасибо автору!

[@artem6987]

Народу нравится! 👍

[@vadymprokopchuk]

Отлично ))

[@ТатьянаКолкова-ю9ч]

Супер полезно, давай еще

[@vadymprokopchuk]

Уже бахнул, 9 свойств новый видос

[@rudinandrey]

1 case почему то когда то отказались от верстки на таблицах, хотя на таблицах это сделать как два пальца, в общем придумываем себе проблемы, потом их преодолеваем :) в общем с этим гридом получились замечательные таблицы.

[@Kei4i]

Ну к слову таблицы до сих пор входу , когда делаешь вёрстку писем. Там прям иногда надо изловчиться, чтобы красиво было

[@alexperemey6046]

По логике таблиц и в гриде можно сделать без subgrid. Тут суть в том, что тебе нужно выравнивать элементы, которые не входят в объект таблицы, а лежат на уровень ниже.

[@mechanic_3453]

Восемь лайков !!! И благодарочка

[@ЕвгенийКараулов-л5й]

Я столько лет мучался с этими соотношениями сторон у картинок, а оказывается эту проблему можно было решить с помощью всего одного свойства - aspect-ratio. Самое крутое свойство, которое было в этом ролике)

[@Kei4i]

Да чего с этим мучаться, помню тоже с этим столкнулся и быстро выяснил - что если блоку выставить только ширину и высоту 0 и padding-bottom в процентах - то он становится по высоте равный процентам от ширины. Быстро накидал миксин в scss и два параметра - по сути аспект ратио , чтобы проценты руками не считать. Изображению background-size: content или любой другой подходящий. Самое главное - 100% поддержка на всех браузерах

[@ЕвгенийКараулов-л5й]

@@Kei4i Я просто не сторонник использовать background-size. Обычно в тег img картинки вставляю. А про фишку с padding'ом в курсе. Но это всё равно костыль

[@drawusoon]

Видео о котором я мечтал!)

[@vadymprokopchuk]

видео мечты

[@toron_1988]

дякую, більшість з них знав, дорречі навчався у тебе, зараз працюю теж вчителем)))

[@vadymprokopchuk]

круто!

[@_pheax]

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

[@anidesku]

Оч крутой видос!!

[@vadymprokopchuk]

Спасибо

[@ДаниилДолгих-р1ы]

Вадим, привет! Подскажи пожалуйста, стоит ли начинать учить JQuery, или он уже таки устарел окончательно? Спасибо

[@njsaab9722]

максимально ровный куплет))))

[@sergey_dm]

Дякую. Корисне відео. Є ще одна класна властивість color-mix:

[@kirarimomobami5358]

Это было очень познавательно!

[@vadymprokopchuk]

Отлично )

[@eduardkont6274]

Спасибо

[@zohidmustafoyev2448]

спасибо. класс

[@wasikkk1]

Дякую!) (Дуже сильно допомогло)

[@vadymprokopchuk]

супер, я радий

[@TheLenkaaaaaaaa]

Спасибо тебе!)

[@smotritelyoutube]

Лайк поставил, коммент написал, но без колокольчиков, простите)

[@vadymprokopchuk]

=))

[@mayday4977]

по поводу сабгрида, за три года работы ни разу не встретил такой проблемы... в 99 процентов случаев на карточке идет превью и карточка кликабельна. Превью дескрипшена мы срезаем по лайнам уходя в троеточие. Даже сложно представить момент когда вообще это использовать...Но спасибо за обзор. Было интересно.

[@АраГорн-ж5ы]

Большинство свойств уже приходилось использовать

[@НикитаТорцев-э6к]

таймкоды бы

[@PerecNeDorogo]

Спасибо)))

[@antonyeskimo7593]

Топ контент

[@aleksandr_anp]

Aspect ratio полезная штука

[@dimwel]

питань нема - лайк )

[@EkaterinaTerekhina]

Я видела еще такое решение разной высоты: Родительскому задаем display:flex: и направление (column, например) , а дочернему элементу, который выравниваем, margin-top (или margin-bottom) auto.

[@NickRover]

Для меня метод Вадима тоже в новинку, обычно решаю через flex и margin-top: auto такие елементы, в отличии от subgrid поддержка лучше (хотя и это решение не идеально)

[@pavel7930]

Бомба!

[@sanyaanya9475]

nice!

[@SotoAnime]

Ура

[@alexandrs5097]

Последнее свой-во реально находка! Помню очень был рад его появлению. А первое надо затестить на интернет магазах на карточках товара. Оно ведь на все блоки загруженной страницы работает?

[@yuliachamlai2024]

Как всегда уровень "Бог"!!!! 💪 Когда уже по курс по Wordpress- очень не хватает!?

[@vadymprokopchuk]

по хз хз

[@sartjhon3300]

А можно стилизовать эти три точки в line-clamp?

[@9094447788]

👍👍👍 Отлично! Ждем ещё!

[@АнатолийШуменков-р2х]

Супер

[@Timyr48]

Вадим, подскажи, что за тему vs code тьі юзаешь?

[@vadymprokopchuk]

Material

[@alexandrs.1706]

Спасибо большое. Очень кстати))

[@vadymprokopchuk]

супер

[@imdanteasy]

Спасибо за видео! Можно название шрифта vs code ?

[@vadymprokopchuk]

comic shanns

[@BrianGrifinn]

Скажи пожалуйста, занимаешься ли ты чем то кроме айти сферы, где можно зарабатывать? Личный вопрос, для собственного анализа

[@no_way_back813]

Дякую, цікавий матеріал

[@vadymprokopchuk]

дякую