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