8 новых сss свойств о котрых ты мечтал
Переглядів 29,747
6 місяців томуВсем привет! Тут такое... просто супер крутая история, которая может вывести вашу верстку на другой уровень. Я вам раcскажу о 8 css свойствах, у которых отличная поддержка, вы их смело можете применять, а ваша верстка будет превращаться в верстку мечты.
Поддержка на патреон:
/ from0to1
мой курс по верстке сайтов, топовая вечеринка:
from0to1.com.ua/
Телеграм канал - t.me/from0to1com
Видео про семантику: • Семантика, семантическ...
Видео про БЭМ: • БЭМ методология. Практ...
Для самых маленьких лендинг: • Верстка сайта для самы...
Для самых маленьких многостраничник: • Верстка многостранично...
Верстка: • Верстка целого сайта в...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
@user-tn1sj9zn9q 6 місяців тому
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 4 місяці тому
здоровья тебе добрый человек)
@elborak795 6 місяців тому
Помню, когда учился вёрстке, твоё семичасовое видео очень помогло. Сейчас уже много сайтов за плечами) Спасибо за видео! Успехов тебе профессиональных, а семье здоровья и благополучия!
@vadymprokopchuk 6 місяців тому
Благодарю
@user-xl3cu9sg1q 5 місяців тому
а как называется это видео? можешь подсказать?
@elborak795 5 місяців тому
Называлось "Верстка сайта с нуля до завершения, html/css/js" - около 7 часов
@computercomputer3293 6 місяців тому
Огромное спасибо за ваш труд. С нетерпением буду ждать еще 8 ;)
@heisenberg1o2 6 місяців тому
Спасибо за контент! Почаще такие вечеринки)
@user-ve7tx3ud6n 6 місяців тому
Здравствуйте Вадим. Большое спасибо Вам за труд. Здоровья Вам и вашей семье.
@vadymprokopchuk 6 місяців тому
Благодарю
@vovchara_frontdev 6 місяців тому
Сенкс!! Все очень круто, продолжай в том же духе, очень приятно слушать и мотать на ус)
@mike9505 6 місяців тому
Вадос, респектушка, посмотрел твой видос и жизнь налаживается) 👍
@user-zx4nh6eo4h 6 місяців тому
Красавчик) очень позитивно и полезно 👍в ритме танца))
@vladimirtravkin4958 6 місяців тому
Вадим, огромная тебе благодарность!
@user-rb3sw3ku6t 6 місяців тому
Спасибо за ролик! Узнал много нового. Буду иметь ввиду в последующей вёрстке.
@arthurterner3348 6 місяців тому
Это ЖИРНЫЙ лайк Бро 😉👍
@kiralatysheva6794 6 місяців тому
Вадос, красавчик! Как всегда лучший расклад по вечеринке =)
@vadymprokopchuk 6 місяців тому
Благодарю
@user-fx2uo6pn1h 6 місяців тому
Огромное спасибо за контент!
@ringnull 6 місяців тому
Очень круто, ждем еще )
@blacksimons941 6 місяців тому
Доброго времени суток, спасибо вам за ваши видео!
@tatigerbst4416 6 місяців тому
Niceeeeeee! Thank you, Bro!
@Jane_123 6 місяців тому
Спасибо за рубрику мечты, мне нравится)
@mariamartseniuk8862 6 місяців тому
Очень полезное видео. Спасибо)
@alexdrumer5933 6 місяців тому
Спасибо огромное, ждем продолжения рубрики счастья!
@vadymprokopchuk 6 місяців тому
Супер)
@user-rb1sp2iu2l 6 місяців тому
Спасибо за твой труд 👏👍💪
@user-be8dy2lw3n 3 місяці тому
Спасибо! Очень актуально! 👍🏻
@vadymprokopchuk 3 місяці тому
круто
@roman-_-novikov 6 місяців тому
Лучший, люблю целую
@user-rz1234 6 місяців тому
Вадим, классное видио, спаисбо много нового. Про последнее свойство, есть похожее свойство text-overflow:ellipsis, но это если по ширине ограничить,а про ограничение по колличеству строк это очень круто! Благодарю))
@paul_brain 6 місяців тому
Красота... спасибо за обзор! Пошел юзать
@vadymprokopchuk 6 місяців тому
супер!
@88Liviu 6 місяців тому
Большое спасибо автору!
@eremey1760 6 місяців тому
Лучший! Спасибо!
@andreasshev5748 6 місяців тому
Отличное видео. Спасибо.
@user-zk2kd3jm3c 6 місяців тому
Вадим! Респект! Как раз в планах было найти подобное свойство, ты прям подарил!!! ❤
@vadymprokopchuk 6 місяців тому
Подгончик такой
@user-zk2kd3jm3c 6 місяців тому
Вот благодарю, так благодарю!!! А ещё расскажи всем, я тут недавно открыла для себя новый селектор :has, :not:has. пробовал может быть, можно через ребёнка назначить свойство родителю у которого может и класса не быть, или их реакт формирует одинаковыми... Может ты уже рассказывал про это, я мож пропустила, ну, просто в восторге, насколько упрощается работа с новыми свойствами!!!
@user-ie2ci1cl3c 6 місяців тому
Спасибо! Подача оптимистичная!
@leader7700 6 місяців тому
Длинновато видео для подобной информации что больше получаса и смотрел в быстрой скорости - на мой взгляд) Но три свойства были дельными и взял себе на заметку)
@user-evgeIIIa 6 місяців тому
Line-clamp и subgridы очень часто помогают в работе. Отличное видео!
@ray84851 6 місяців тому
Круто, про line-clamp даже не слышал никогда - всегда такие вопросы при помощи js решал, а оно оказывается уже отдельное css свойство есть.
@maksymrohovyi612 6 місяців тому
Вадос, это очень круто, а не мог бы ты еще таких записать 8 или больше новых свойств мечты )))
@TheLenkaaaaaaaa 6 місяців тому
Спасибо тебе!)
@SuperKozzz 6 місяців тому
Вот это вечериночка🎉👍
@alexmelk5225 6 місяців тому
Круто!))
@divik_k 6 місяців тому
Жду продолжения
@user-nj3dm6io1s 6 місяців тому
Спасибо! Хотим еще счастья!
@hunterxxx5135 6 місяців тому
Братан! Спасибо тебе большое!!! Ты супер.
@vadymprokopchuk 6 місяців тому
спасибо
@Ronghanes 6 місяців тому
aspect-ratio использую давно, а вот остальные просто подарок! Спасибо за видео!
@vadymprokopchuk 6 місяців тому
отлично))
@saxboroda 6 місяців тому
отличная рубрика, Вадим. одобрямс)
@vadymprokopchuk 6 місяців тому
Спасибос
@resmi3311 5 місяців тому
только вчера увидел в видео св-во backdrop-filter и сегодня же понадобилось сделать для формы выделение блюром на фоне спасибо, Вадим, за знания и решения!
@vadymprokopchuk 5 місяців тому
Круть
@samjames88 6 місяців тому
классная вечериночка, кайфанул однозначно)))
@vadymprokopchuk 6 місяців тому
огонь
@petthejir3394 6 місяців тому
8 крутых свойств для домашней вечеринки, спасибо за контент
@vadymprokopchuk 6 місяців тому
вот вот)
@_pheav 6 місяців тому
спасибо Вадос
@user-kq8yc7lz6z 6 місяців тому
очень полезная вечеринка получилась как всегда )))
@PerecNeDorogo 6 місяців тому
Спасибо)))
@antonyeskimo7593 6 місяців тому
Топ контент
@alekssjeva951 6 місяців тому
Супер! Раньше для выравнивания в колонке задавал ей display: flex; flex-direction: column, а элементу, который находится перед тем, который нужно сделать на одном уровне - flex-grow: 1. Однако это только чаcтично проблему, потому что заголовок мог быть тоже неодинаковой высоты, и тогда уже текст под ним был не на одном уровне. Aspect-ratio использую уже очень давно, для инлайновых img, video, он тоже работает, задавать им display: block не нужно, главное указать ширину (аттрибутом или в стилях).
@faintx4 6 місяців тому
Спасибо за труд
@vadymprokopchuk 6 місяців тому
Спасибо
@LEV5CHA 6 місяців тому
Безумно приятно слушать ))) и смотреть. Чудо чудесное 10 из 10!!111
@vadymprokopchuk 6 місяців тому
благодарю)
@anidesku 6 місяців тому
Оч крутой видос!!
@vadymprokopchuk 6 місяців тому
Спасибо
@sheshko_pavel 6 місяців тому
Видосы - огонь, спасибо! ) Было бы афигенно, если бы показал как структурировать и хранить CSS файлы в Next.js последней версии... шрифты подключать, нужен ли sass... мощный такой пласт инфы.
@aleksandrkobelev8868 6 місяців тому
Вадос. Твой видос это то о чем можно было только мечтать.
@vadymprokopchuk 6 місяців тому
Класс
@progover24 6 місяців тому
Первый, спасибо за видео 🚀
@eduardkont6274 6 місяців тому
Спасибо
@arinqwerty 6 місяців тому
text-wrap: balance - огонь просто! а я с неразрывными пробелами обычно решала такое. это свойство изящнее))
@user-wr3vv3eh7k 5 місяців тому
Супер полезно, давай еще
@vadymprokopchuk 5 місяців тому
Уже бахнул, 9 свойств новый видос
@kirarimomobami5358 6 місяців тому
Это было очень познавательно!
@vadymprokopchuk 6 місяців тому
Отлично )
@zohidmustafoyev2448 6 місяців тому
спасибо. класс
@drawusoon 6 місяців тому
Видео о котором я мечтал!)
@vadymprokopchuk 6 місяців тому
видео мечты
@mechanic_3453 6 місяців тому
Восемь лайков !!! И благодарочка
@wasikkk1 5 місяців тому
Дякую!) (Дуже сильно допомогло)
@vadymprokopchuk 5 місяців тому
супер, я радий
@Baaanzaiplay 6 місяців тому
Чётко! Можно ещё новых свойств, касательно адаптива (желательно), чтобы поменьше юзать медиа запросы. :)
@WERWOLION 6 місяців тому
для этого нужно просто на флекс-гридах верстать нормально + em-ы , clmp и пр нужно делать через миксины.
@Baaanzaiplay 6 місяців тому
Про миксины вообще не в курсе был) Учусь только....Всё никак не начну ипользовать препроцессоры, кажется что в обычном css ещё не шибко разбираюсь @@WERWOLION
@pavel7930 6 місяців тому
Бомба!
@Varanovski 6 місяців тому
Ждём продолжение рубрики счастье!
@vadymprokopchuk 6 місяців тому
Супер!)
@user-uc7zk9ez8u 6 місяців тому
Вадим, привет! Подскажи пожалуйста, стоит ли начинать учить JQuery, или он уже таки устарел окончательно? Спасибо
@user-vy8yj5kt9q 6 місяців тому
Я пользовался вместо lime-clamp - text-overflow ellipsis, тоже зачет
@Kei4i 6 місяців тому
Про переносы слов - nbsp в помощь (символ неразрывного пробела). Вообще не всегда, но в большинстве случаев спасает. Типограф Лебедева в помощь. И сео кажется такое любит. Когда много языков на сайте и не такое начнёшь использовать. br - также неплохо работает, забавно, можно добавить класс и например скрывать его при разных разрешениях и выключать его когда надо.
@MrStrangesound 6 місяців тому
Text wrap balance - в adobe InDesign лет 15 назад было свойство balance ragged lines. Там ещё можно было выставлять пределы расширения букв/трекинга для лучшего заполнения контейнера текстом
@alexx_2023 6 місяців тому
это типа как в Ворде - выровнять по ширине?
@sanyaanya9475 5 місяців тому
nice!
@artem6987 6 місяців тому
Народу нравится! 👍
@vadymprokopchuk 6 місяців тому
Отлично ))
@sergey_dm 6 місяців тому
Дякую. Корисне відео. Є ще одна класна властивість color-mix:
@lesan6866 6 місяців тому
Пушка прям, сижу в Харькове и сразу их использую!!!)
@vadymprokopchuk 6 місяців тому
круть, так и нужно
@alexandrs5097 6 місяців тому
Последнее свой-во реально находка! Помню очень был рад его появлению. А первое надо затестить на интернет магазах на карточках товара. Оно ведь на все блоки загруженной страницы работает?
@user-xb1jf2ul4w 6 місяців тому
Супер
@toron_1988 6 місяців тому
дякую, більшість з них знав, дорречі навчався у тебе, зараз працюю теж вчителем)))
@vadymprokopchuk 6 місяців тому
круто!
@user-oq8uv4tt5t 6 місяців тому
Новое видео о котором я мечтал...
@yuliachamlai2024 6 місяців тому
Как всегда уровень "Бог"!!!! 💪 Когда уже по курс по Wordpress- очень не хватает!?
@vadymprokopchuk 6 місяців тому
по хз хз
@user-pw7lh8uf7n 6 місяців тому
Я столько лет мучался с этими соотношениями сторон у картинок, а оказывается эту проблему можно было решить с помощью всего одного свойства - aspect-ratio. Самое крутое свойство, которое было в этом ролике)
@Kei4i 6 місяців тому
Да чего с этим мучаться, помню тоже с этим столкнулся и быстро выяснил - что если блоку выставить только ширину и высоту 0 и padding-bottom в процентах - то он становится по высоте равный процентам от ширины. Быстро накидал миксин в scss и два параметра - по сути аспект ратио , чтобы проценты руками не считать. Изображению background-size: content или любой другой подходящий. Самое главное - 100% поддержка на всех браузерах
@user-pw7lh8uf7n 6 місяців тому
@@Kei4i Я просто не сторонник использовать background-size. Обычно в тег img картинки вставляю. А про фишку с padding'ом в курсе. Но это всё равно костыль
@nic-ori 6 місяців тому
Useful information. Thank you.👍
@KnowingCat 6 місяців тому
Грид: Я самый лучший для выравнивания колонок, теперь у меня есть сабгриды. Флекс: Ну да, ну да, пошел я нахер.
@mayday4977 6 місяців тому
по поводу сабгрида, за три года работы ни разу не встретил такой проблемы... в 99 процентов случаев на карточке идет превью и карточка кликабельна. Превью дескрипшена мы срезаем по лайнам уходя в троеточие. Даже сложно представить момент когда вообще это использовать...Но спасибо за обзор. Было интересно.
@no_way_back813 6 місяців тому
Дякую, цікавий матеріал
@vadymprokopchuk 6 місяців тому
дякую
@user-bf6cp8ju1i 6 місяців тому
Вау!!!
@alexandrs.1706 6 місяців тому
Спасибо большое. Очень кстати))
@vadymprokopchuk 6 місяців тому
супер
@SotoAnime 6 місяців тому
Ура
@dimwel 6 місяців тому
питань нема - лайк )
@max_wbw 6 місяців тому
Обучился нормальной вёрстке благодаря тебе, спасибо огромное 👍 Но верстал-верстал, верстал-верстал, надоело просто верстать, ушёл в full 😅
@T2kibi 6 місяців тому
А сколько ушло примерно времени на обучение верстке ?)
@vadymprokopchuk 6 місяців тому
Круто
@max_wbw 6 місяців тому
@@T2kibi Я не считал, оно само как-то получилось😁
@max_wbw 6 місяців тому
@@T2kibiНачал вообще с вордпресс, а там пошло поехало.
@plaxa4094 6 місяців тому
Вадим, не подскажете, вопрос по свойству grid-template-rows: subgrid - у Вас 2 карточки и вы задаёте им свойство grid-row: 1 / 4, выглядит всё окей, а как быть в случае, если у меня карточек, например, штук 10? Из за grid-row они все встают в 1 строку и свойство grid-template-colums: repeat(2, 1fr) не работает.
@catwriter1693 6 місяців тому
Дякую👍
@sartjhon3300 6 місяців тому
А можно стилизовать эти три точки в line-clamp?
@andreyrudin2286 6 місяців тому
1 case почему то когда то отказались от верстки на таблицах, хотя на таблицах это сделать как два пальца, в общем придумываем себе проблемы, потом их преодолеваем :) в общем с этим гридом получились замечательные таблицы.
@Kei4i 6 місяців тому
Ну к слову таблицы до сих пор входу , когда делаешь вёрстку писем. Там прям иногда надо изловчиться, чтобы красиво было
@alexperemey6046 6 місяців тому
По логике таблиц и в гриде можно сделать без subgrid. Тут суть в том, что тебе нужно выравнивать элементы, которые не входят в объект таблицы, а лежат на уровень ниже.
@imdanteasy 3 місяці тому
Спасибо за видео! Можно название шрифта vs code ?
@vadymprokopchuk 3 місяці тому
comic shanns
@petersen1554 6 місяців тому
Стосовно subgrid, в такому варіанті для дочірнього елемента як grid-template-rows: subgrid; grid-row: 1/4; не має адаптива, навіть якщо використовувати auto-fit. Тому чи варто використувати цю властивість?
@user-ly7ef5zw4o 6 місяців тому
А когда сделают border-box по умолчанию?)
@maksyko 6 місяців тому
Классный ты чувак, как с тобой подружится ?
@EkaterinaTerekhina 6 місяців тому
Я видела еще такое решение разной высоты: Родительскому задаем display:flex: и направление (column, например) , а дочернему элементу, который выравниваем, margin-top (или margin-bottom) auto.
@NickRover 6 місяців тому
Для меня метод Вадима тоже в новинку, обычно решаю через flex и margin-top: auto такие елементы, в отличии от subgrid поддержка лучше (хотя и это решение не идеально)
@user-hi1je3xw1g 6 місяців тому
таймкоды бы
@olegs4418 6 місяців тому
Человечище!! Привет еще раз. Вопрос не по теме но если не ты то никто. Вот даю 2 верстки деск и мобайл. Они их потом по отдельности на хостинг заливают? Огромное спасибо. Жа забыл сказать что макеты сильно отличаются, адаптив вообще никак.
@vadymprokopchuk 6 місяців тому
По разному может быть, все зависит от проекта.
@olegs4418 6 місяців тому
@@vadymprokopchuk спасибо огромное
Суспільне Чернігів
Переглядів 1,3 млн
Pro Web
Переглядів 2,9 тис.
От 0 до 1
Переглядів 2,9 тис.
Фрілансер по життю
Переглядів 366 тис.
Ulbi TV
Переглядів 269 тис.