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