8 новых сss свойств о котрых ты мечтал
Vložit
- čas přidán 16. 10. 2023
- Всем привет! Тут такое... просто супер крутая история, которая может вывести вашу верстку на другой уровень. Я вам раcскажу о 8 css свойствах, у которых отличная поддержка, вы их смело можете применять, а ваша верстка будет превращаться в верстку мечты.
Поддержка на патреон:
/ from0to1
мой курс по верстке сайтов, топовая вечеринка:
from0to1.com.ua/
Телеграм канал - t.me/from0to1com
Видео про семантику: • Семантика, семантическ...
Видео про БЭМ: • БЭМ методология. Практ...
Для самых маленьких лендинг: • Верстка сайта для самы...
Для самых маленьких многостраничник: • Верстка многостранично...
Верстка: • Верстка целого сайта в...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
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
здоровья тебе добрый человек)
Помню, когда учился вёрстке, твоё семичасовое видео очень помогло. Сейчас уже много сайтов за плечами) Спасибо за видео! Успехов тебе профессиональных, а семье здоровья и благополучия!
Благодарю
а как называется это видео? можешь подсказать?
Называлось "Верстка сайта с нуля до завершения, html/css/js" - около 7 часов
Здравствуйте Вадим. Большое спасибо Вам за труд. Здоровья Вам и вашей семье.
Благодарю
Огромное спасибо за ваш труд. С нетерпением буду ждать еще 8 ;)
Сенкс!! Все очень круто, продолжай в том же духе, очень приятно слушать и мотать на ус)
Вадос, красавчик! Как всегда лучший расклад по вечеринке =)
Благодарю
Спасибо за контент! Почаще такие вечеринки)
Вадос, респектушка, посмотрел твой видос и жизнь налаживается) 👍
Спасибо за ролик! Узнал много нового. Буду иметь ввиду в последующей вёрстке.
Вадим, классное видио, спаисбо много нового. Про последнее свойство, есть похожее свойство text-overflow:ellipsis, но это если по ширине ограничить,а про ограничение по колличеству строк это очень круто! Благодарю))
Красавчик) очень позитивно и полезно 👍в ритме танца))
Спасибо огромное, ждем продолжения рубрики счастья!
Супер)
Вадим, огромная тебе благодарность!
Доброго времени суток, спасибо вам за ваши видео!
Спасибо за рубрику мечты, мне нравится)
Очень полезное видео. Спасибо)
Это ЖИРНЫЙ лайк Бро 😉👍
Line-clamp и subgridы очень часто помогают в работе. Отличное видео!
Вадим! Респект! Как раз в планах было найти подобное свойство, ты прям подарил!!! ❤
Подгончик такой
Вот благодарю, так благодарю!!! А ещё расскажи всем, я тут недавно открыла для себя новый селектор :has, :not:has. пробовал может быть, можно через ребёнка назначить свойство родителю у которого может и класса не быть, или их реакт формирует одинаковыми... Может ты уже рассказывал про это, я мож пропустила, ну, просто в восторге, насколько упрощается работа с новыми свойствами!!!
Длинновато видео для подобной информации что больше получаса и смотрел в быстрой скорости - на мой взгляд) Но три свойства были дельными и взял себе на заметку)
Огромное спасибо за контент!
Вадос, это очень круто, а не мог бы ты еще таких записать 8 или больше новых свойств мечты )))
Круто, про line-clamp даже не слышал никогда - всегда такие вопросы при помощи js решал, а оно оказывается уже отдельное css свойство есть.
Спасибо! Очень актуально! 👍🏻
круто
aspect-ratio использую давно, а вот остальные просто подарок! Спасибо за видео!
отлично))
Очень круто, ждем еще )
Отличное видео. Спасибо.
8 крутых свойств для домашней вечеринки, спасибо за контент
вот вот)
Красота... спасибо за обзор! Пошел юзать
супер!
Безумно приятно слушать ))) и смотреть. Чудо чудесное 10 из 10!!111
благодарю)
Спасибо за твой труд 👏👍💪
только вчера увидел в видео св-во backdrop-filter и сегодня же понадобилось сделать для формы выделение блюром на фоне
спасибо, Вадим, за знания и решения!
Круть
Лучший! Спасибо!
Супер! Раньше для выравнивания в колонке задавал ей display: flex; flex-direction: column, а элементу, который находится перед тем, который нужно сделать на одном уровне - flex-grow: 1. Однако это только чаcтично проблему, потому что заголовок мог быть тоже неодинаковой высоты, и тогда уже текст под ним был не на одном уровне.
Aspect-ratio использую уже очень давно, для инлайновых img, video, он тоже работает, задавать им display: block не нужно, главное указать ширину (аттрибутом или в стилях).
Лучший, люблю целую
Большое спасибо автору!
Спасибо! Подача оптимистичная!
отличная рубрика, Вадим. одобрямс)
Спасибос
Братан! Спасибо тебе большое!!! Ты супер.
спасибо
Niceeeeeee! Thank you, Bro!
text-wrap: balance - огонь просто! а я с неразрывными пробелами обычно решала такое. это свойство изящнее))
Вадос. Твой видос это то о чем можно было только мечтать.
Класс
Видосы - огонь, спасибо! )
Было бы афигенно, если бы показал как структурировать и хранить CSS файлы в Next.js последней версии... шрифты подключать, нужен ли sass... мощный такой пласт инфы.
Спасибо тебе!)
Вот это вечериночка🎉👍
Жду продолжения
Чётко! Можно ещё новых свойств, касательно адаптива (желательно), чтобы поменьше юзать медиа запросы. :)
для этого нужно просто на флекс-гридах верстать нормально + em-ы , clmp и пр нужно делать через миксины.
Про миксины вообще не в курсе был) Учусь только....Всё никак не начну ипользовать препроцессоры, кажется что в обычном css ещё не шибко разбираюсь @@WERWOLION
Спасибо! Хотим еще счастья!
классная вечериночка, кайфанул однозначно)))
огонь
Это было очень познавательно!
Отлично )
очень полезная вечеринка получилась
как всегда )))
Первый, спасибо за видео 🚀
Супер полезно, давай еще
Уже бахнул, 9 свойств новый видос
Круто!))
Как всегда уровень "Бог"!!!! 💪 Когда уже по курс по Wordpress- очень не хватает!?
по хз хз
Люблю тебя Вова❤
Оч крутой видос!!
Спасибо
Ждём продолжение рубрики счастье!
Супер!)
Видео о котором я мечтал!)
видео мечты
Спасибо)))
Text wrap balance - в adobe InDesign лет 15 назад было свойство balance ragged lines. Там ещё можно было выставлять пределы расширения букв/трекинга для лучшего заполнения контейнера текстом
это типа как в Ворде - выровнять по ширине?
Дякую!) (Дуже сильно допомогло)
супер, я радий
Про переносы слов - nbsp в помощь (символ неразрывного пробела). Вообще не всегда, но в большинстве случаев спасает. Типограф Лебедева в помощь. И сео кажется такое любит. Когда много языков на сайте и не такое начнёшь использовать.
br - также неплохо работает, забавно, можно добавить класс и например скрывать его при разных разрешениях и выключать его когда надо.
спасибо Вадос
Пушка прям, сижу в Харькове и сразу их использую!!!)
круть, так и нужно
спасибо. класс
Последнее свой-во реально находка! Помню очень был рад его появлению. А первое надо затестить на интернет магазах на карточках товара. Оно ведь на все блоки загруженной страницы работает?
Восемь лайков !!! И благодарочка
Дякую. Корисне відео. Є ще одна класна властивість color-mix:
Новое видео о котором я мечтал...
Спасибо
Народу нравится! 👍
Отлично ))
Вадим, привет! Подскажи пожалуйста, стоит ли начинать учить JQuery, или он уже таки устарел окончательно? Спасибо
Я пользовался вместо lime-clamp - text-overflow ellipsis, тоже зачет
Я столько лет мучался с этими соотношениями сторон у картинок, а оказывается эту проблему можно было решить с помощью всего одного свойства - aspect-ratio. Самое крутое свойство, которое было в этом ролике)
Да чего с этим мучаться, помню тоже с этим столкнулся и быстро выяснил - что если блоку выставить только ширину и высоту 0 и padding-bottom в процентах - то он становится по высоте равный процентам от ширины. Быстро накидал миксин в scss и два параметра - по сути аспект ратио , чтобы проценты руками не считать. Изображению background-size: content или любой другой подходящий. Самое главное - 100% поддержка на всех браузерах
@@Kei4i Я просто не сторонник использовать background-size. Обычно в тег img картинки вставляю. А про фишку с padding'ом в курсе. Но это всё равно костыль
Бомба!
по поводу сабгрида, за три года работы ни разу не встретил такой проблемы... в 99 процентов случаев на карточке идет превью и карточка кликабельна. Превью дескрипшена мы срезаем по лайнам уходя в троеточие. Даже сложно представить момент когда вообще это использовать...Но спасибо за обзор. Было интересно.
Топ контент
Обучился нормальной вёрстке благодаря тебе, спасибо огромное 👍 Но верстал-верстал, верстал-верстал, надоело просто верстать, ушёл в full 😅
А сколько ушло примерно времени на обучение верстке ?)
Круто
@@T2kibi Я не считал, оно само как-то получилось😁
@@T2kibiНачал вообще с вордпресс, а там пошло поехало.
Классный ты чувак, как с тобой подружится ?
дякую, більшість з них знав, дорречі навчався у тебе, зараз працюю теж вчителем)))
круто!
Useful information. Thank you.👍
Грид: Я самый лучший для выравнивания колонок, теперь у меня есть сабгриды.
Флекс: Ну да, ну да, пошел я нахер.
А когда сделают border-box по умолчанию?)
nice!
таймкоды бы
Дякую, цікавий матеріал
дякую
Супер
Спасибо за видео! Можно название шрифта vs code ?
comic shanns
Я видела еще такое решение разной высоты:
Родительскому задаем display:flex: и направление (column, например) , а дочернему элементу, который выравниваем, margin-top (или margin-bottom) auto.
Для меня метод Вадима тоже в новинку, обычно решаю через flex и margin-top: auto такие елементы, в отличии от subgrid поддержка лучше (хотя и это решение не идеально)
Вадим, не подскажете, вопрос по свойству grid-template-rows: subgrid - у Вас 2 карточки и вы задаёте им свойство grid-row: 1 / 4, выглядит всё окей, а как быть в случае, если у меня карточек, например, штук 10? Из за grid-row они все встают в 1 строку и свойство grid-template-colums: repeat(2, 1fr) не работает.
Спасибо большое. Очень кстати))
супер
Aspect ratio полезная штука
1 case почему то когда то отказались от верстки на таблицах, хотя на таблицах это сделать как два пальца, в общем придумываем себе проблемы, потом их преодолеваем :) в общем с этим гридом получились замечательные таблицы.
Ну к слову таблицы до сих пор входу , когда делаешь вёрстку писем. Там прям иногда надо изловчиться, чтобы красиво было
По логике таблиц и в гриде можно сделать без subgrid. Тут суть в том, что тебе нужно выравнивать элементы, которые не входят в объект таблицы, а лежат на уровень ниже.
Человечище!! Привет еще раз. Вопрос не по теме но если не ты то никто. Вот даю 2 верстки деск и мобайл. Они их потом по отдельности на хостинг заливают? Огромное спасибо. Жа забыл сказать что макеты сильно отличаются, адаптив вообще никак.
По разному может быть, все зависит от проекта.
@@vadymprokopchuk спасибо огромное
А можно стилизовать эти три точки в line-clamp?
питань нема - лайк )
Вадим, подскажи, что за тему vs code тьі юзаешь?
Material
максимально ровный куплет))))
Стосовно subgrid, в такому варіанті для дочірнього елемента як grid-template-rows: subgrid; grid-row: 1/4; не має адаптива, навіть якщо використовувати auto-fit. Тому чи варто використувати цю властивість?