UI-компоненты №17. Создание карточек с прижатием кнопки внизу

  Рет қаралды 9,189

MaxGraph - cайты как страсть

MaxGraph - cайты как страсть

Жыл бұрын

Привет!
В этой части ui-компонентов я покажу, как сделать карточки, которые будут увеличиваться от контента в пределах одной строки, а если текста мало - кнопка прижмется книзу во всех карточках.
github.com/maxdenaro/maxgraph... - готовая верстка на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
Для заказа верстки обращайтесь в телеграм @maxdenaro
#ityoutubersru #ui_компоненты #верстка

Пікірлер: 72
@BMikel
@BMikel Жыл бұрын
Работаю стажером фронтендером. Этот канал для меня как шпаргалка. Если что-то непонятно - сразу иду на maxgraph. Только качественный контент, ничего лишнего. Смотрю, запоминаю - потом сразу применяю на своих проектах. Учусь у профессионалов.
@maxgraph
@maxgraph Жыл бұрын
Круто))
@blackcelebration3588
@blackcelebration3588 Жыл бұрын
Я делаю иначе. Берется высота кнопки, сколько-то пикселей, делается паддинг снизу у контейнера с контентом внутри карточки, равный высоте кнопки, и далее абсолютным позиционированием прилепляем кнопку через left 0 и bottom 0 к нижней части этого контейнера. И вуаля, все кнопки в карточках на одном уровне, независимо от количества текста в описании. Но предложенный способ тоже оч нравится, спасибо, Макс.
@maxgraph
@maxgraph Жыл бұрын
А если высота кнопки изменится - будет проблема) нормальный вариант, но не лучший
@user-bg3hu1oz4y
@user-bg3hu1oz4y Жыл бұрын
Предложенный способ правильный. Абсолютами надо поменьше баловаться
@XZxexe
@XZxexe Жыл бұрын
Спасибо. Ходим видеть ваше видео чаще.
@user-uu4qr1xk8d
@user-uu4qr1xk8d Жыл бұрын
Максим, спасибо за ваш труд. Все понятно и очень круто! Очень рада, что я нашла ваш канал.
@a.k.9386
@a.k.9386 Жыл бұрын
Как всегда просто и понятно! Спасибо большое!
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@timishurekeev6182
@timishurekeev6182 9 ай бұрын
Спасибо большое Максим, очень помогло. Ломал голову в процессе обучения. Теперь разобрался.
@user-zo6rp1xn8i
@user-zo6rp1xn8i 11 ай бұрын
Максим, огромная Вам благодарность за труды😊😊😊
@maxgraph
@maxgraph 11 ай бұрын
Пожалуйста))
@smidvard
@smidvard Жыл бұрын
Как долго я искал как это сделать ! Спасибо тебе и твоему труду! )😉😉
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@user-ms7bn6cd2d
@user-ms7bn6cd2d Жыл бұрын
Спасибо за полезное видео . Я долго бился 🥵 с такой задачей, чтобы получить нужный результат.
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@alexandrgusletsov2567
@alexandrgusletsov2567 11 ай бұрын
Максим , спасибо , на вашем канале можно стать мидлом после просмотра всех видео
@maxgraph
@maxgraph 11 ай бұрын
Спасибо))
@user-rk2ir9ov6f
@user-rk2ir9ov6f Жыл бұрын
Реально спасибо, опыт есть , даже при просмотре видео даже проговаривал что блин это же понятно, но все же один момент из этого вынес, видео очень годное, еще раз спасибо))
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@user-hc7wq9om9i
@user-hc7wq9om9i Жыл бұрын
Спасибо Вам большое! 👍
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@annastaroverova4647
@annastaroverova4647 Жыл бұрын
Блин, Макс, ты мой stackoverflow чес слово😄 спасибо!
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@jackyiakovenko
@jackyiakovenko Жыл бұрын
😎 ща свои карточки переделаю 😂👌
@user-lm9ee1gn5p
@user-lm9ee1gn5p Жыл бұрын
Спасибо, очень полезно 👍
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@виртуоз_ру
@виртуоз_ру Жыл бұрын
Класс!
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@user-kh7fv5rn1g
@user-kh7fv5rn1g Жыл бұрын
спасибо, интересное решение! можно попросить сделать ролик как адаптировать видео html5 в попапе.
@maxgraph
@maxgraph Жыл бұрын
Да просто задать по 100% высоты и ширины, и object fit
@replixshop6903
@replixshop6903 Жыл бұрын
display: flex; flex-direction: column; и тексту, который перед кнопкой flex: 1 1 auto;
@kenzie-
@kenzie- Жыл бұрын
Было информативно. Макс, ваши видео интересные и полезные!
@maxgraph
@maxgraph Жыл бұрын
Здорово))
@MarkoTH000
@MarkoTH000 Жыл бұрын
Спасибо за контент, топ! Один вопрос, потенциальные карточки на втором ряду будут растягиватся на туже высоту как и самая большая с первого ряда даже если в них самих контента меньше? Спасибо!
@maxgraph
@maxgraph Жыл бұрын
Привет, в каждом ряду свое растяжение
@RaNimerr
@RaNimerr 4 ай бұрын
Как сделать 5 карточек в одной линии горизонтально, и 4 линии на другой строке, чтобы они прилегали в началу?
@user-vw2ms6rz4j
@user-vw2ms6rz4j Жыл бұрын
Привет. Спасибо большое за подачу материала. Начал пару месяцев тому всего. Немного не в тему, но подскажи, плиз - когда будет натяжка по тому марафону строительного сайта? Честно - взял твои странички за основу, написал сайт на три странички для вывода новостей одной организации (они сами хотят постить типа блоги), начал смотреть видео о той же Winter CMS (ранее она, вроде как, была October CMS), и почти совсем не понятны некоторые моменты. Ясно, что нужен какой-то либо бэк, либо база. И не совсем понятно - как первые три новости будут отображаться на главной (из них последняя крупнее), а остальные скрываться в список. Ну и по поводу хостинга - есть хостинг, но немного не понял - заливать на хостинг нужно после натяжки или до? А то там только WP да пару таких типа Joomla. И, я так понял (или не понял), что ставить какие-то другие CMS они не хотят. Хотя сам хостинг неплохой. Заранее большое спасибо. P.S. Начитался про всякие фреймворки. Тебе отдельный респект, что пишешь просто на чистом HTML, CSS, JS. Тоже так хочу научиться..
@maxgraph
@maxgraph Жыл бұрын
Запись этого материала я веду уже с месяц-два, но очень медленно (мало времени). Как доделаю - все будет) На хостинг нужно после натяжки заливать. То что предлагает хостинг - неважно, можно заливать самому что хочется
@alexandrgusletsov2567
@alexandrgusletsov2567 11 ай бұрын
card__item flex-grow: 1 card display: flex flex-direction : column card__btn margin-top: auto card__item card height 100% 🎉
@PirBogov
@PirBogov Жыл бұрын
Здравствуйте! Как сделать растущую карточку при добавлении текста, если ее высота сдерживается гридом и еще по пиксель перфекту все должно быть четко?
@PirBogov
@PirBogov Жыл бұрын
Так же интересует тот случай, когда ul class='cards' сделан через дисплей грид, а не флекс. Как прижать кнопку к низу
@igormajrov8444
@igormajrov8444 Жыл бұрын
Подскажите, была уже натяжка на Winter CMS адаптивного сайта "CreateX"? Чет не нахожу в видосах.
@maxgraph
@maxgraph Жыл бұрын
Ещё нет, пишу
@the-tata
@the-tata Жыл бұрын
"..и в чем основная ошибка тех, кто делает эту часть...они просто берут и делают. Давайте тоже сделаем эту часть"(с) )))
@kapitankrolick
@kapitankrolick Жыл бұрын
а календарь является ui-компонентом?🙃 очень интересно было бы посмотреть на создание кастомного календаря с выбором диапазона дат, текущей датой и т.д. без всяких библиотек и фреймворков. только js, только хардкор😎
@user-eo6ex8ds8q
@user-eo6ex8ds8q Жыл бұрын
Здравствуйте, а подскажите как быть если эти карточки должны быть слайдерами? Я пыталась внутри swiper wraper сделать список, а slide обернуть вместо div сделать li, но тогда слайдер перестал работать. Подскажите как быть?
@maxgraph
@maxgraph Жыл бұрын
Здравствуйте, Карточки должны быть внутри свайпер слайда
@ibex_team
@ibex_team Жыл бұрын
Есть какие то особенности работы этого метода в свайпере? Просто у слайдов по умолчанию высота 100%, но в девтулс, если дать видимость границам слайдов, то у слайда с меньшим контентом (хоть и высота 100%) высота меньше других. И flex grow и margin auto не дают эффекта
@maxgraph
@maxgraph Жыл бұрын
Там нужно убирать высоту авто у свайпер слайда
@user-zj3ty6cu1b
@user-zj3ty6cu1b Жыл бұрын
а если заголовок в одной из карточек" извергающий вулкан будет в 2 строки?
@maxgraph
@maxgraph Жыл бұрын
Это нормально, будет чуть ниже Но все от дизайна уже зависит
@user-xt1ns1br7o
@user-xt1ns1br7o Жыл бұрын
А как быть если у тебя и заголовок может быть больше или ниже текста есть еще один блок и тоже разноразмерный?)
@vouqreels8114
@vouqreels8114 Жыл бұрын
Идеология такая же)
@user-xt1ns1br7o
@user-xt1ns1br7o Жыл бұрын
@@vouqreels8114 Только идеология, на практике это работает в редких случаях, в моей практике такие простые карточки, да и макеты в целом не встречаются
@maxgraph
@maxgraph Жыл бұрын
За годы работы не видел супер сложных карточек) Примерно такие всегда и были. Но когда был момент, как описываешь ты - делали ограничение по высоте, и все что идет далее - обрезали, и добавляли многоточие (это желание заказчика).
@user-xt1ns1br7o
@user-xt1ns1br7o Жыл бұрын
@@maxgraph У меня в основном тяжелые дизайны, поэтому для меня это не обычно)
@BMikel
@BMikel Жыл бұрын
А ведь было бы лучше задать карточке не margin-right, а flex-gap. Тогда бы верстка более "резиновая была". И ширину не фиксированную 350пкс а в процентах, что ли. В плане адаптива ведь лучше? И если уже более профессионально верстать, то неплохо бы задать card__title text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; Чтобы если слишком длинное название было то автоматически срезалось
@maxgraph
@maxgraph Жыл бұрын
Поддержка flex gap очень плохая А метод с многоточием не кроссбраузерный, да и не было такой задачи
@lwickboxl
@lwickboxl Жыл бұрын
а если заголовок карточки будет больше, чем одна строка?
@maxgraph
@maxgraph Жыл бұрын
Зависит от требования заказчика. Можно обрезать лишнее, например
@lwickboxl
@lwickboxl Жыл бұрын
@@maxgraph понял, спасибо за ответ, приятно
@internationaluser86
@internationaluser86 Жыл бұрын
Лучше img не в div обернуть, а в figure
@maxgraph
@maxgraph Жыл бұрын
Зачем?
@internationaluser86
@internationaluser86 Жыл бұрын
@@maxgraph по той же причине, что вы оборачиваете в article
@maxgraph
@maxgraph Жыл бұрын
Какой же причине? Давайте разбираться, даже интересно что вы скажете
@internationaluser86
@internationaluser86 Жыл бұрын
@@maxgraph семантически правильнее
@maxgraph
@maxgraph Жыл бұрын
Почему? Что это значит? За что вообще отвечает figure и зачем он тут?
@Freedom-77
@Freedom-77 Жыл бұрын
здравствуйте. этот пример простой, пытаюсь в свайпере сделать карточки с адаптивными изображениями через picture, текст который под картинкой внизу почемуто оказывается закрыт картинкой ,то есть позади картинки, приходится паддингами сверху опустить текст
@maxgraph
@maxgraph Жыл бұрын
Структура не очень ясна
@Freedom-77
@Freedom-77 Жыл бұрын
@@maxgraph спасибо , Максим! разобрался, но не совсем, во-первых : .cards__item .card{height:100%;} у меня не работает, a работает : .cards__item . card{ min-height: 700px;} во-вторых: при добавлении большего контента в описание другие не тянутся , высота ни авто ни в процентах не спасает, может какую-ниюудь другую вложенность элементов в css использовать? спасибо)
UI-компоненты №18. Мобильное меню с определением секции
30:22
MaxGraph - cайты как страсть
Рет қаралды 3 М.
37 ошибок верстальщиков. Не делай так!
44:50
MaxGraph - cайты как страсть
Рет қаралды 56 М.
1 or 2?🐄
00:12
Kan Andrey
Рет қаралды 58 МЛН
Вечный ДВИГАТЕЛЬ!⚙️ #shorts
00:27
Гараж 54
Рет қаралды 14 МЛН
HOW DID HE WIN? 😱
00:33
Topper Guild
Рет қаралды 46 МЛН
UI-компоненты №15. Кнопка "показать еще"
10:54
MaxGraph - cайты как страсть
Рет қаралды 12 М.
UI-компоненты №13. Валидация и отправка формы на почту в 2022
27:59
MaxGraph - cайты как страсть
Рет қаралды 19 М.
Используем Template в JavaScript для клонирования элементов
15:00
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 18 М.
Семантика, семантическая верстка
1:38:06
От 0 до 1
Рет қаралды 49 М.
1 or 2?🐄
00:12
Kan Andrey
Рет қаралды 58 МЛН