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