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

Всем привет! Тут такое... просто супер крутая история, которая может вывести вашу верстку на другой уровень. Я вам раcскажу о 8 css свойствах, у которых отличная поддержка, вы их смело можете применять, а ваша верстка будет превращаться в верстку мечты.
Поддержка на патреон:
/ from0to1
мой курс по верстке сайтов, топовая вечеринка:
from0to1.com.ua/
Телеграм канал - t.me/from0to1com
Видео про семантику: • Семантика, семантическ...
Видео про БЭМ: • БЭМ методология. Практ...
Для самых маленьких лендинг: • Верстка сайта для самы...
Для самых маленьких многостраничник: • Верстка многостранично...
Верстка: • Верстка целого сайта в...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

[@user-tn1sj9zn9q]

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]

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

[@elborak795]

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

[@vadymprokopchuk]

Благодарю

[@user-xl3cu9sg1q]

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

[@elborak795]

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

[@user-ve7tx3ud6n]

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

[@vadymprokopchuk]

Благодарю

[@computercomputer3293]

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

[@kiralatysheva6794]

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

[@vadymprokopchuk]

Благодарю

[@heisenberg1o2]

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

[@vladimirtravkin4958]

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

[@vovchara_frontdev]

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

[@alexdrumer5933]

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

[@vadymprokopchuk]

Супер)

[@arthurterner3348]

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

[@mike9505]

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

[@user-fx2uo6pn1h]

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

[@user-rb3sw3ku6t]

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

[@blacksimons941]

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

[@mariamartseniuk8862]

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

[@user-zx4nh6eo4h]

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

[@Jane_123]

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

[@ringnull]

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

[@user-zk2kd3jm3c]

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

[@vadymprokopchuk]

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

[@user-zk2kd3jm3c]

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

[@user-rz1234]

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

[@user-rb1sp2iu2l]

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

[@88Liviu]

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

[@andreasshev5748]

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

[@eremey1760]

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

[@leader7700]

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

[@user-be8dy2lw3n]

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

[@vadymprokopchuk]

круто

[@petthejir3394]

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

[@vadymprokopchuk]

вот вот)

[@user-evgeIIIa]

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

[@user-ie2ci1cl3c]

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

[@ray84851]

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

[@Ronghanes]

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

[@vadymprokopchuk]

отлично))

[@roman-_-novikov]

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

[@maksymrohovyi612]

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

[@saxboroda]

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

[@vadymprokopchuk]

Спасибос

[@TheLenkaaaaaaaa]

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

[@paul_brain]

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

[@vadymprokopchuk]

супер!

[@resmi3311]

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

[@vadymprokopchuk]

Круть

[@tatigerbst4416]

Niceeeeeee! Thank you, Bro!

[@alexmelk5225]

Круто!))

[@hunterxxx5135]

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

[@vadymprokopchuk]

спасибо

[@alekssjeva951]

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

[@kirarimomobami5358]

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

[@vadymprokopchuk]

Отлично )

[@LEV5CHA]

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

[@vadymprokopchuk]

благодарю)

[@divik_k]

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

[@user-nj3dm6io1s]

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

[@aleksandrkobelev8868]

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

[@vadymprokopchuk]

Класс

[@SuperKozzz]

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

[@arinqwerty]

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

[@samjames88]

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

[@vadymprokopchuk]

огонь

[@user-wr3vv3eh7k]

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

[@vadymprokopchuk]

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

[@user-kq8yc7lz6z]

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

[@Baaanzaiplay]

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

[@WERWOLION]

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

[@Baaanzaiplay]

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

[@drawusoon]

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

[@vadymprokopchuk]

видео мечты

[@PerecNeDorogo]

Спасибо)))

[@anidesku]

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

[@vadymprokopchuk]

Спасибо

[@sheshko_pavel]

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

[@plaxa4094]

Вадим, не подскажете, вопрос по свойству grid-template-rows: subgrid - у Вас 2 карточки и вы задаёте им свойство grid-row: 1 / 4, выглядит всё окей, а как быть в случае, если у меня карточек, например, штук 10? Из за grid-row они все встают в 1 строку и свойство grid-template-colums: repeat(2, 1fr) не работает.

[@user-uc7zk9ez8u]

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

[@pavel7930]

Бомба!

[@Kei4i]

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

[@petersen1554]

Стосовно subgrid, в такому варіанті для дочірнього елемента як grid-template-rows: subgrid; grid-row: 1/4; не має адаптива, навіть якщо використовувати auto-fit. Тому чи варто використувати цю властивість?

[@MrStrangesound]

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

[@alexx_2023]

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

[@_pheax]

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

[@funnymoments621]

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

[@eduardkont6274]

Спасибо

[@progover24]

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

[@zohidmustafoyev2448]

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

[@Timyr48]

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

[@vadymprokopchuk]

Material

[@sartjhon3300]

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

[@user-vy8yj5kt9q]

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

[@Varanovski]

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

[@vadymprokopchuk]

Супер!)

[@olegs4418]

Человечище!! Привет еще раз. Вопрос не по теме но если не ты то никто. Вот даю 2 верстки деск и мобайл. Они их потом по отдельности на хостинг заливают? Огромное спасибо. Жа забыл сказать что макеты сильно отличаются, адаптив вообще никак.

[@vadymprokopchuk]

По разному может быть, все зависит от проекта.

[@olegs4418]

@@vadymprokopchuk спасибо огромное

[@antonyeskimo7593]

Топ контент

[@KnowingCat]

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

[@wasikkk1]

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

[@vadymprokopchuk]

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

[@alexandrs5097]

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

[@user-xb1jf2ul4w]

Супер

[@lesan6866]

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

[@vadymprokopchuk]

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

[@artem6987]

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

[@vadymprokopchuk]

Отлично ))

[@imdanteasy]

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

[@vadymprokopchuk]

comic shanns

[@sanyaanya9475]

nice!

[@user-hi1je3xw1g]

таймкоды бы

[@mechanic_3453]

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

[@yuliachamlai2024]

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

[@vadymprokopchuk]

по хз хз

[@user-rw3is4fn9p]

Подскажи пожалуйста, как называется темa в vs code?

[@BotKarma66]

Material Theme

[@user-oq8uv4tt5t]

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

[@sergey_dm]

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

[@mayday4977]

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

[@max_wbw]

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

[@T2kibi]

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

[@vadymprokopchuk]

Круто

[@max_wbw]

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

[@max_wbw]

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

[@andreyrudin2286]

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

[@Kei4i]

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

[@alexperemey6046]

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

[@user-pw7lh8uf7n]

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

[@Kei4i]

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

[@user-pw7lh8uf7n]

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

[@user-bf6cp8ju1i]

Вау!!!

[@SotoAnime]

Ура

[@toron_1988]

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

[@vadymprokopchuk]

круто!

[@no_way_back813]

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

[@vadymprokopchuk]

дякую

[@user-ly7ef5zw4o]

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

[@maksyko]

Классный ты чувак, как с тобой подружится ?

[@BrianGrifinn]

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

[@alexandrs.1706]

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

[@vadymprokopchuk]

супер

[@nic-ori]

Useful information. Thank you.👍