00:00 Интро 01:22 Таблица 03:06 Флоаты 04:10 Инлайны 06:02 Мультиколонки 07:21 Флексы 08:27 Гриды 08:51 Вторая группа 09:30 Позиционирование 10:18 Направление письма 11:39 SVG 15:59 Элемент 18:17 Фреймы 21:58 Баг в Safari 22:44 Выводы 23:35 Аутро
@imhateb22
2 жыл бұрын
Блин. Почему так мало просмотров и так мало лайков? Офигенное же видео. Вадим, у Вас самый крутой канал про вёрстку. Пожалуйста продолжайте. Ваши видео очень интересные, а подача и манера речи выше всяких похвал. Одно удовольствие смотреть.
@SamaraDjVitek
2 жыл бұрын
Название напомнило слова Остапа Бендера, который знал "четыреста сравнительно честных способов отъема денег". :)
@hypnocolor
2 жыл бұрын
Вот это флэшбек! Дизайнил обложку для этой книги и даже не подозревал, что ребята напечатали какой-то тираж, а спустя 9 лет увижу книгу в руках Вадима. Тепло как-то стало :)
@pepelsbey
2 жыл бұрын
Отличная обложка :)
@YuriiKratser
2 жыл бұрын
Во-первых, спасибо. Это было и позновательно и весело. Во-вторых, способ с svg и - это есть ни что иное как лучшие способы прикольнутся над своей новой командой запилив данные решения в своем первом или близко к тому пул риквесте. Я представляю степень офигения тимлида, который видит в моем коде дич на свг. А самое смешное будет тогда, когда меня спросят: "Юра, зачем ты заюзал свг, когда можна написать тут 3 строчки css кода?", на что я отвечу: "ну как же? Вы посмотрите на это чудо при уменьшение экрана, посмотрите как классно!" )) Спасибо, Вадим)
@Andreykch
2 жыл бұрын
о, css дичь это всегда прикольно и интересно. Не прочь увидеть ещё подобное)
@GsBluma
2 жыл бұрын
Когда разбирали способ с svg, я просто угарала, как на юмористическом концерте! Это же надо было такое придумать! А вот последняя технология натолкнула меня на воспоминания. В 2007 году наша учительница по информатики решила, что нам не нужен бейсик, лучше она нас html научит. Тогда мы ничего не знали про CSS, у нас не было сред разработки, мы писали в блокнотах. Я вообще плохо помню, что мы там изучали и, кажется, все изменилось. Но блоки мы называли фреймами. И, возможно, как раз что-то такое мы и делали. Впрочем потом я поступила на гуманитарную специальность и забыла о верстке на 13 лет. И вот сейчас я изучаю новые технологии верстки и планирую дальше двигаться в направлении frontend, но если бы не тот курс по доисторическому html в школе, я бы никогда не пыталась войти в IT. А это интересно)))
@kapitankrolick
2 жыл бұрын
футболки Вадима как отдельный вид искусства, терялась , в какие глаза смотреть)) Я когда пост в твиттере увидела, мне на ум пришли естественно таблицы, флоаты, флексы, гриды, позиционирование и трансформ😁 ну последнее можно тоже в дичь записать
@user-pu4bq2vg6s
2 жыл бұрын
Увидев слово "дичь", понял, что это маст вотч)) А вы умеете заинтересовать)
@maximzabara
2 жыл бұрын
Вадим, спасибо за видос! Ух, про флоаты, инлайны и таблицы, прям словил флешбэк )) Во фронтенде с 2007 года ))) Вспомнил боль прошлых лет )) После просмотра видоса, выплыла в голове нетленная фраза Остапа Бендера из Золотого теленка: - Лично у меня есть 400 сравнительно честных способов отъема денег. А тут 11 способов сверстать две колонки ))))
@StepanZubashev
2 жыл бұрын
Отлично. В духе "ненормального программирования". Последние 2 способа шикарны :) На самом деле ещё можно было 6-й воткнуть - сделать всё на canvas-е :D
@AlexZHIMuk
2 жыл бұрын
Очень интересно было увидеть нестадартные версии решения. Спасибо, Вадим! Это было что-то с чем-то. Смысл в таких видео точно есть.
@antDgt
2 жыл бұрын
Увидел видео и думаю "посмотрю потом, а сейчас гляну пару минут", в итоге не смог оторваться. Спасибо :)
@pepelsbey
2 жыл бұрын
Вот я тоже так: думал только проверю пару вариантов. Очнулся, когда написал 11 штук )) Пришлось записывать видео.
@placid3495
2 жыл бұрын
Спасибо, Вадим, очень интересно!
@user-nc9bb8ps6m
Жыл бұрын
спасибо большое Вадим, заинтересовало с свг очень...
@thelocalbody
2 жыл бұрын
Я узнал очень много, а не кое-что !!! Брависимо, Вадим!!!
@sick_bear
2 жыл бұрын
5 лет занимаюсь фронтендом - впервые улсышал про мультиколонки)
@groovcorp1818
2 жыл бұрын
Похоже это самый полезный формат. Не хватает лишь одного, какой вариант как выбирать. Т.е. какой вариант самый оптимальный, какой почти (не будет работать в IE6) и т.д. Жду видео в таком же формате. Спасибо за видео.
@pepelsbey
2 жыл бұрын
Я подсветил, что гриды - самый оптимальный вариант. А дальше уже зачинаются компромиссы, даже внутри первой группы. Про вторую просто забудьте ))
@stambultsian
2 жыл бұрын
В конце прослезился. Когда только начинал изучения веба, использовал фреймсеты для подобного позиционирования. И был очень горд, когда сделал нечто вроде SPA. Тогда такой термин вроде даже не в ходу был.
@alexeykudrow
2 жыл бұрын
Шикарное видео, спасибо! Но до самого конца ожидал увидеть display table:)
@undefinedundefined5924
2 жыл бұрын
position: absolute для обоих блоков, а размеры и позиции рассчитать самостоятельно на js и выставить в пикселях. На ресайз браузера поставить событие по перерассчёту размеров и позиций.
@pepelsbey
2 жыл бұрын
Какой. Ужас. Для такого нужна третья группа «чудовищно», у меня рука не поднялась бы ))
@thunderal
2 жыл бұрын
можно ещё обе колонки нарисовать через svg (тегом итп) или отрендерить на канвасах, можно заранее отрендерить 2 картинки колонок на сервере и показывать 2 тега img, или оба текста отрисовать и запихнуть в шрифт, а задники блоков двумя другими символами и задавать background через color символа. изват можно придумать любой
@pepelsbey
2 жыл бұрын
Я делал колонки как компонент, чтобы туда можно было поместить любое содержимое. Иначе слишком кастомный способ получается.
@user-xb8dh9sn4b
2 жыл бұрын
Когда много лет не верстал и придумал сходу только фреймы (самая понятная идея как раньше было), таблицы и float.
@user-fs1pm5oe5s
2 жыл бұрын
Лучший! Спасибо за трансляцию опыта)
@TheLevius
2 жыл бұрын
Как говорится, каждый как хочет, так и сходит с ума по-своему. Да, это жоска!
@YarkiiYa
2 жыл бұрын
Спасибо за работу. Всегда интересно изучить что-то новое и не обычное
@o.kiryukhin
2 жыл бұрын
Класс! Недавно впервые за свою недолгую практику использовал инлайновые конструкции и блоки никак не выстраивались в ряд пока не применил font-size: 0 и word-spacing по совету со стаковерфлоу. Понимание этих правил пришло не сразу. Сейчас было приятно это вспомнить.
@andreyveda
2 жыл бұрын
Интересна тема по организации отступов между блоками и в том числе между БЭМ компонентами с помощью оберток и миксов. Где-то использую margin, где-то padding и gap. Хочется узнать как правильнее и почему так)
@pepelsbey
2 жыл бұрын
Хорошая тема, закинул в копилку идей!
@Svarnoy85
2 жыл бұрын
За видос - спасибо. Стараюсь не пропускать выпуски, для себя пару мелочей "взял на заметку" :). Таблички в e-mail до сих пор - сила, хотя и 21 век :) Особенно если рассылка на разные outlook и т.д., а ещё очень актуально, если мультиязычный портал 10+ языков. Исследование всякой "дичи" - очень актуально, иногда именно эта самая "дичь" и спасает при решении задач, правда, как в том анекдоте - и тщательно обработать напильником :)
@vovergg
2 жыл бұрын
Очень классная идея разбирать всякие тонкости в Css.
@thecatwrites9731
2 жыл бұрын
очень качественно рассказываешь!
@OlegBoris7651
2 жыл бұрын
Float и calc в одном месте, забавно :D
@_Black_Mirror_
2 жыл бұрын
футболка супер)
@KlinovAS
2 жыл бұрын
SVG очень круто для шрифта если нужно отобразить небольшой отрезок, чтоб подбирался размер (уменьшался) если блок сжимается. Подобрать формулу сложно если много зависимостей. Очень жду от разработчиков решения типа @media (max-width:720px) для блока, чтоб можно было описать поведение внутри блока. Часто опираюсь на flex и grid, но много работы как раз с мелкими блоками в которых происходит сдавливание и полный хаос.
@pepelsbey
2 жыл бұрын
Это вам нужно посмотреть видео про Container Queries, они уже в работе! kzitem.info/news/bejne/w4ZpyZmHfop-m4o
@nicktravolta1457
2 жыл бұрын
Ультимативный гайд! Спасибо.
@sashabeep
2 жыл бұрын
4:43 ах тыж блин магия вне Хогвартса с word-spacing. В «те самые времена» там всегда прицел на 4 пикселя влево был
@ngSamurai
2 жыл бұрын
Помню времена когда на такой дичи мы верстали первые сайты в 90х)
@dmitriybraginets6750
2 жыл бұрын
Это просто великолепно!
@user-xy5vm6rv5r
2 жыл бұрын
Вадим СПАСИБООООО)))
@Chetanoo
2 жыл бұрын
Оооо дааа. Спасибо, Вадим!
@pnoper
2 жыл бұрын
Есть ещё возможность сделать через display: table (table-cell, table-row, и т.д.)
@pepelsbey
2 жыл бұрын
Это очень близко к обычной таблице, но да - есть такой вариант :)
@user-gs7xn9mk7j
2 жыл бұрын
Спасибо! Очень познавательно!
@andreiivanov5277
2 жыл бұрын
О флоты, прям олдскулы свело
@garloy
2 жыл бұрын
олдскулы это когда на таблицах и фреймсетах =)
@john-weekend
2 жыл бұрын
Да верстка на флоатах это ещё довольно современный способ Амиго, я от него отказываться начал года с 2016-2017 только, когда Флексы начали стабильно работать во всех браузерах.
@cubucul
2 жыл бұрын
Можно ещё с помощью css свойства transform раскидать блоки.
@joelagrange
2 жыл бұрын
10 способ теперь мой любимый 😂
@detro1821
2 жыл бұрын
было бы интересно посмотреть эти же способы, но например с обычной ситуацией типо: текст слева и какая-то картинка справа)
@yourbadapple
2 жыл бұрын
очень интересно получился, спасибо за видео!
@kirillriman3611
2 жыл бұрын
опа про break-inside не знал спасибо!
@alexlutz9236
2 жыл бұрын
Какое же огнище
@Elisha_GG
2 жыл бұрын
А можно добавки?... Хочу больше разбора повседневных задач.
@AlexeyKhachaturyan
2 жыл бұрын
Отличное видео, Вадим крут)
@Polihut1
2 жыл бұрын
Сначала лайк, а потом уже просмотр контента
@andreyveda
2 жыл бұрын
CSS IS AWESOME! 🔥😃👍
@mexvision-3556
2 жыл бұрын
Использую флексы, в комплекте с функцией calc(), можно делать абсолютно чудесные конструкции.
@dimovich85
2 жыл бұрын
Лицо на футболке отражает суть видео)))
@SomeTimesCoding
2 жыл бұрын
Похоже следующее видео будет "Как сделать ТРИ колонки". Ибо, как минимум, display: flex и justify-content: space-between там уже не прокатят:) П. С. имею в виду кейс, когда в разметке из трёх колонок на последнем ряду останется всего две карточки.
@garloy
2 жыл бұрын
тогда добавляют пустые блоки с 0 высотой в колличестве n - 1, где n количество колонок и флекс снова работает возможно будет проблема с вертикальным gap
@egorshnel986
2 жыл бұрын
очень и очень) спасибо
@andrewyaselsky1965
2 жыл бұрын
А в чём проблема использования calc() в 2021?)
@vitalyiladnyi8576
2 жыл бұрын
Я на лопатках =)
@SamaraDjVitek
2 жыл бұрын
Спасибо за видео! Многие из вещей, которые ты показал во второй части, интересные и довольно специфичные. И вот какой вопрос: что ты думаешь про такие специфические знания, которые вряд ли когда пригодятся верстальщику, начавшему свою карьеру, когда веб уже стал таким, какой он есть сейчас? Конечно, развиваться никогда нужно всегда, и интересно знать, с какими проблемами сталкивались в старых браузерах, и как и решали. Но сейчас, похоже, далеко не всегда пригодятся знания о трюках и хаках для старенького IE (например, это связано с - из примеров в видео).
@pepelsbey
2 жыл бұрын
Думаю, такие хаки стоит знать на уровне «смотрел у одного чёрта на Ютубе, надо вспомнить», если вдруг пригодится :)
@aleksandralekseev8797
2 жыл бұрын
Я с такими мыслями пока на курсе академии учился несколько раз в видео Вадима подглядывал за нужной фичей :)
@panterr2991
2 жыл бұрын
знание нужно для понимание как оно все же работает, а не для того, чтобы применить для колонок)
@garloy
2 жыл бұрын
отличные демки, но сразу появляется вопрос: а что если у нас не 2, а 3, 4, ...n блоков которые надо вот так развести на 2 колонки. не хватает демонстрации на большем количестве элементов. ps: вариант с фреймсетом угадал. кстати вместо пустого фрейма можно было поступить как с таблицей и добавить отступы внутри "ячеек"
@pepelsbey
2 жыл бұрын
У меня не было задачи сделать надёжные компоненты для колонок, я пытался найти все способы поставить два блока рядом.
@garloy
2 жыл бұрын
@@pepelsbey аппетит приходит во время еды, также и со спортивным интересом, чем больше видел, тем больше хочется.
@zalexstudios
2 жыл бұрын
Спасибо Вадим! Кстати о email рассылках, каковы сегодняшние реалии email верстки? Вот бы небольшой обзор новых возможностей в email верстке и маленький пример! Было бы здорово!
@pepelsbey
2 жыл бұрын
К сожалению, у меня нет опыта вёрстки писем. Хотя погодите… к счастью! :)
@Junckovski
2 жыл бұрын
до сих пор все на таблицах, из-за большого количества разных клиентов это самый безопасный вариант
@alexandraweather4156
Жыл бұрын
Спасибо за такое интересное и полезное видео! Скажите, пожалуйста, а что вы думаете о фреймворках типа бутстрапа? У меня в курсе по верстке он есть, но после флексов кажется абсолютно неудобным и избыточным. А зная, что впереди ещё гриды, совсем смысл теряется Можете поделиться вашим мнением на этот счёт?
@pepelsbey
Жыл бұрын
Это просто инструмент, который может быть полезно изучить и иметь под рукой, когда это будет удобно. Но никакая это не замена флексам, гридам и всему остальному CSS.
@alexandraweather4156
Жыл бұрын
@@pepelsbey вот и я так подумала Большое спасибо за ваш ответ и за все, что вы делаете!
@user-gm5ri4pq5t
2 жыл бұрын
Интересное видео=)
@alexeyshaykov
2 жыл бұрын
если такое кто-то у меня спросит на собеседовании, можно сразу уходить))
@AlibekKulseitov
2 жыл бұрын
В инлайнах можно еще написать так width: ~48% а родителю дать text-align: justify 12 способ
@pepelsbey
2 жыл бұрын
Это не тянет на отдельный способ: всё те же инлайновые блоки, просто отступ по-другому.
@BMikel
2 жыл бұрын
в 2021 верстка должна быть адаптивной, поэтому кроме флексов и гридов все вариант отлетают. я о продакшне говорю. Если так, побаловаться на досуге, то остальное можно пробовать.
@pepelsbey
2 жыл бұрын
Если всё, что вы знаете про HTML и CSS - это флексы и гриды, то этого мало :) Уметь делать такую дичь - значит глубоко понимать все уголки вёрстки.
@AxelCopypast
2 жыл бұрын
Вадим привет, а покажи способы делать раскладку блоков как в "mansory" шаблонах. Когда уже grid-template-rows: masonry; заработает?
@calm_night
2 жыл бұрын
Начать работать в файрфоксе он может хоть завтра, но ты поди дождись, пока это дойдет до Сафари)
@Necroomsk
2 жыл бұрын
Спасибо за видео. Есть вопрос по теме: как лучше реализовать позиционирование блоков слева направо сверху вниз, как это сделано на сайте Pinterest? Несколько раз сталкивался с необходимостью так позиционировать блоки и каждый раз приходилось использовать js. Возможно есть способ сделать это на чистом css? Важный нюанс - все блоки разной рандомной высоты и их количество может быть любым (блоки будут добавляться при скролле страницы)
@Svarnoy85
2 жыл бұрын
Привет! Хм... grid-template-columns: repeat(7, 1fr); row-gap: 10px; &:nth-child(2n+1 ... 2n ... 4), ну а внутри "колонки" flex/grid. Или вообще посмотреть в сторону grid-auto-flow: column dense; тут все зависит от того как блоки у нас идут друг за другом или мы их можем на группы разбить.
@ps-pu5dd
2 жыл бұрын
требую продакшн реди солюшн для грид мансори ❤
@KombatFML
2 жыл бұрын
Вадим, кажется ты придерживаешься табов вместо пробелов, почему на видео отступы из пробелов?
@pepelsbey
2 жыл бұрын
Потому, что мир сильнее. Я объяснил в видео :)
@pilot_bbk
2 жыл бұрын
а чего в дикие способы не попало флоат лефт + марджин-лефт на ширину блока? так же делали
@pepelsbey
2 жыл бұрын
Те же флоаты, это не тянет на отдельный способ )
@VIMPdev
2 жыл бұрын
Это имеет смысл когда больше двух блоков, потому что 3 блока уже не раскидаешь налево и право.
@pilot_bbk
2 жыл бұрын
@@pepelsbey ну как вариант флоатов, который приносит кучу головняка по стыковке в разных браузерах подошло бы ну и просто ооочень часто используемый способ реализации колонок. ка уже сказал, когда их больше 2
@VIMPdev
2 жыл бұрын
Предложу еще один конченный способ разместить так контент: вставить одной картинкой)
@GrawlCore
2 жыл бұрын
И для интерактивности сделать map в картинке
@alym.aleksey
2 жыл бұрын
Выпал из веба на пару лет, вопрос такой: на гридах уже верстают, допустим, лэйаут сайта, или пока ещё не спешат?
@pepelsbey
2 жыл бұрын
Верстают конечно, см. Веб-альманах за 2020 год almanac.httparchive.org/en/2020/css#flexbox-and-grid-adoption
@user-rj6ph9zt3q
2 жыл бұрын
Вадим подскажите пожалуйста можно ли сильно не учить javascript и куча всех этих фреймворках, а сфокусироваться только на html, css и ? Столько информации что крыша едет и всей жизни не хватит чтобы все это выучить?Вы как опытный специалист дайте какой-нибудь совет? А то даже не у кого спросить
@danilx6239
2 жыл бұрын
Можно, только зарплата выше чем 70 тысяч рублей у вас гарантированно не будет. Времени конечно нужно много, чтобы все выучить, но вы учите постепенно. Начните с js, затем подключите node, webpack и git. Далее уже вам проще будет вливаться. Но учтите - js, node, webpack и гит это от 3 до 6 месяцев обучения минимум.
@user-rj6ph9zt3q
2 жыл бұрын
@@danilx6239 Спасибо большое!
@state_of_games
2 жыл бұрын
Дичь конечно несусветная с фреймами) но самые юзабельные сейчас способы с флексами и гридами на текущий момент) хотя некоторые увлекаются абсолютным позиционированием ))
@niknikagain
2 жыл бұрын
Жуткие последствия многоэтапного развития. Новые фишки добавляются, старые не отмирают в угоду обратной совместимости, это порождает монстров.
@wov2004
2 жыл бұрын
Больше дичи!
@igorkroshkin9354
2 жыл бұрын
Эх, надо было показать, что происходит при уменьшении ширины экрана... Это же самое главное!
@pepelsbey
2 жыл бұрын
Там фикс в условиях, я упростил задачу. Но в адекватных решениях везде можно сделать резину.
@igorkroshkin9354
2 жыл бұрын
@@pepelsbey так вот это и хотелось бы увидеть. В современных условиях создание "нерезиновых" таблиц НЕ ИМЕЕТ СМЫСЛА.
@NotTheLastOne
2 жыл бұрын
почему это таблицы используются редко? самое банальное использование таблицы - это таблица. не думаю, что будет хорошей идеей делать таблицу на гридах.
@pepelsbey
2 жыл бұрын
Таблицы, к счастью, сегодня используются для табличных данных. Я имел в виду, что для раскладки их больше не используют.
@Minobi
2 жыл бұрын
transform: translate - ждал этого способа в списке не совсем адекватных
@JavaScriptcher
2 жыл бұрын
С 9 примера начинается реальная дичь
@i.am.rossalex
2 жыл бұрын
Даааа... 5 неадекватных - дичь, просто жесть!
@zapiski_verstalshika
2 жыл бұрын
на обсолютах способ напомнил верстку из Вьетнама... все абсолютами, причем для мобильной и десктопной версии абсолютно отдельные стили. а графика... хоть стой хоть падай: аватарка - 50х50, сделана фоном, а изображение может быть размерами и 1000рх и гораздо больше🤦♂️
@lookeach1889
2 жыл бұрын
Чем развлекаются верстальщики на пенсии)
@pepelsbey
2 жыл бұрын
Это задача с собеседования по вёрстке, а не просто заскучавший ветеран )
@lenaryan
2 жыл бұрын
Только руки дошли до видео... Ну и дичь 😱
@jaskier_T
2 жыл бұрын
"Любимые" фреймы, как же я вас ненавижу, на прошлом курсе учили html и в основе лежали фреймы, господи, они меня преследуют.
@maiorov.m
2 жыл бұрын
из "красных" способов смог придумать только на позиционировании... остальное действительно дичь адовая!
@SsergeySav
2 жыл бұрын
Федя, дичь!!!
@yslpn
2 жыл бұрын
Как-то скучновато вышло. Как будто происходит натягивание почему ЭТО должно быть интересно.
@pepelsbey
2 жыл бұрын
Это нормально, я не могу всегда нравиться всем. В вас не попал в этом случае, а в других попал, судя по комментариям и просмотрам. У всех свои интересы, без проблем :) Вот мне - искренне интересно было закопаться.
Пікірлер: 128