Когда убираем z-index: -1; ничего не меняется из-за того, что у древа идут картинки по порядку как бы, и opacity: 1; увеличивает контекст следующего элемента и по этой причине в слоях картинка возвышается. Я так понял этот момент, если что поправьте.
С этими уроками верстка (это сложно назвать уже просто версткой - это фронт-энд) выходит на совершенно иной качественный уровень. Автору респект и уважуха. Подобные кейсы или вообще не выкладываются, или выкладываются за денежку. Насчет смены картинок - есть ли смысл заморочиться и оформлять анимированные переходы? Или все же слайдер в помощь?
Скажи пожалуйста, у тебя есть на гитхабе сброшенные стили ,которые ты рекомендуешь или это просто normalize.css? И по поводу картинок еще. Есть рекомендуемые стили для них,чтобы сразу в обнулении прописать? Это сойдет img {max-width: 100%, display: block, height: auto}
@@maxgraph там же можно было сгруппировать свойства opacity, z-index. Вы указали эти два свойства для двух разных элементов отдельно, можно было просто сгруппировать, чтобы не было дублирования. Просто если таких случаев будет много, то сколько лишнего кода...
Вы лучше сообщение не меняйте, могу не заметить) В идеале нужно клонировать через гит Если так не умеете - придётся качать материалы ко всем урокам, выйдя в главную папку репозитория по каналу, там есть кнопка code
Спасибо за годный контент! Может стоит пустой ul тоже удалять? Чтоб не оставлять пустых тегов. Насколько помню - это не очень хорошо с точки зрения валидатора
сталкивались с такой проблемой в vscode, когда распаковка emmet сокращения в больших sass-файлах(на 2000 строк) выполняется не молниеносно, а с задержкой в ~1сек? из-за чего работа в vscode становится просто невыносимой пришлось остаться на быстром саблайме, в котором таких проблем нету
Привет, смотрел другие ролики и там часто говорят, что работать с классами плохо, нужно добавлять слой абстракции дата атрибутами и работать с ними, но тогда почти на каждый элемент приходится вешать дата атрибуты и искать по ним элемента. Вопрос, это глупости и надо работать с классами, а атрибуты использовать как у тебя, чтобы передать какое-то значение, или все же надо вешать дата-атрибуты по типу data-type="image-switch-item" data-type="image-pagination-item" и тд но тогда все равно придется работать с классами, когда ищешь активные элементы
@@maxgraph ну а представь, что в ТЗ написано "в заголовке карточки будет от 1 до 3 строк", то что тогда? Поставить height так, что помещалось три строки и overflow hidden?
@@Roderen ну тут по ситуации) как правило меня в таких ситуациях так и просили делать - высоту, оверфлоу и в конце текста многоточие писать. Но можно и с флексом поиграть, чтобы карточки растягивались.
@@maxgraph Не понимаю, что к чему и как это работает, плагин мешает, может, потому что я новичок. Я понимаю, вы сделали и делаете большую работу для нас, я вам благодарен за это.
все круто, но эфект с фото по итогу юзлес на мобаил девайсах. на слайдер разве что переделать при определенном разрешении, ну или сразу слайдером делать) но урок интересный)
@@maxgraph пойдет, тоже начал его осваивать, правда по их демкам прошелся и заметил что некоторые не работают адекватно на МАКах. Может уже и поправили, а может у себя версию не обновляли давно на сайте. В общем время покажет, бо лень было проверять)
@@maxgraph На сайте например есть каталог карточек, но в последнем ряду карточек не 4, а 3 и вместо недостающей идёт заглушка. Встречал на нескольких сайтах, но не нашёл реализации через JS на codepen или где то ещё. Могу скинуть пример как это выглядит, если есть какая то почта для предложений по роликам
было бы круто научиться делать фильтр товаров в сайдбаре магазинов чтоб при клике на пункты фильтра (чекбокс + название пункта), на странице оставались только те товары, которые этому соответствуют вроде через дата атрибуты делается
А что за прикол про правильный порядок свойств CSS? Ты свойство меняешь местами, ибо "они не в правильном месте стоят". Где можно про это прочитать/посмотреть?
@@timofey2672 некоторые моменты, как не странно уже устарели, но а во вторых, у него там все с точки зрения такого жесткого фронта рассматривается, хотелось бы больше инфы с точки зрения удобства для верстки
Это просто полезнейших канал для верстальщика, особенно для новоиспечённого Джуна в студии. Огромнейшее спасибо. Буду на каждом видео ставить лайки
Пожалуйста))
огромное спасибо, я подписан на многие каналы по верстке но именно твой по части качества контента на первом месте, еще раз спасибо
Спасибо)
это шикарно... это правда очень классно ) спасибо за такой материал и проделанную работу!
Пожалуйста)
Крутое видео) даёшь знания в массы! Спасибо тебе)
Пожалуйста)
Отличная рубрика, Макс! Спасибо тебе
Пожалуйста)
Огненный видос🔥
Макс, спасибо!
Пожалуйста :)
Огромное спасибо за видео!!! Уже два сайта с таким эффектом делала и мучалась, теперь знаю решение !!! Поклон!)
Пожалуйста))
Топовая рубрика, продолжай в том же духе)
спасибо)
Спасибо, рубрика огонь! Keep it up!)
круто, спасибо)
Благодарю, Максим! Отличная рубрика!
Пожалуйста))
Отличная рубрика!
спасибо)
Красавчик.Лучшие в рунете!
спасибо)
Очень крутое видео! Ты лучший! Спасибо
Пожалуйста)
Когда убираем z-index: -1; ничего не меняется из-за того, что у древа идут картинки по порядку как бы, и opacity: 1; увеличивает контекст следующего элемента и по этой причине в слоях картинка возвышается. Я так понял этот момент, если что поправьте.
Спасибо! Очень интересно.
Отличный урок. Спасибо!🙂
Пожалуйста)
супер уроки у тебя
Спасибо)
С этими уроками верстка (это сложно назвать уже просто версткой - это фронт-энд) выходит на совершенно иной качественный уровень. Автору респект и уважуха. Подобные кейсы или вообще не выкладываются, или выкладываются за денежку.
Насчет смены картинок - есть ли смысл заморочиться и оформлять анимированные переходы? Или все же слайдер в помощь?
Я думаю таких переходов достаточно)
спасаете меня своим видео
Скажи пожалуйста, у тебя есть на гитхабе сброшенные стили ,которые ты рекомендуешь или это просто normalize.css?
И по поводу картинок еще. Есть рекомендуемые стили для них,чтобы сразу в обнулении прописать? Это сойдет img {max-width: 100%, display: block, height: auto}
На гитхабе нет сбросов, только нормалайз. Сбросы делаю свои
для картинок хватит max-width: 100%
а почему вы используете пиксель перфект , не обязательно ведь делать все по пикселям ну если заказчик этого не требует .
Мне так нравится)
16:50 но тут ведь дублирование кода присутствует.... Почему в видеоуроках не показывают как правильно нужно делать
А где?)
@@maxgraph там же можно было сгруппировать свойства opacity, z-index. Вы указали эти два свойства для двух разных элементов отдельно, можно было просто сгруппировать, чтобы не было дублирования. Просто если таких случаев будет много, то сколько лишнего кода...
Спасибо что делишься знаниями
Спасибо! Так хорошо объяснил. А как можно с гитхаба скачать себе стартовый шаблон?
Вы лучше сообщение не меняйте, могу не заметить)
В идеале нужно клонировать через гит
Если так не умеете - придётся качать материалы ко всем урокам, выйдя в главную папку репозитория по каналу, там есть кнопка code
Спасибо за годный контент! Может стоит пустой ul тоже удалять? Чтоб не оставлять пустых тегов. Насколько помню - это не очень хорошо с точки зрения валидатора
Валидатору все равно)
сталкивались с такой проблемой в vscode, когда распаковка emmet сокращения в больших sass-файлах(на 2000 строк) выполняется не молниеносно, а с задержкой в ~1сек?
из-за чего работа в vscode становится просто невыносимой
пришлось остаться на быстром саблайме, в котором таких проблем нету
Нет, такого не бывало
Привет, смотрел другие ролики и там часто говорят, что работать с классами плохо, нужно добавлять слой абстракции дата атрибутами и работать с ними, но тогда почти на каждый элемент приходится вешать дата атрибуты и искать по ним элемента. Вопрос, это глупости и надо работать с классами, а атрибуты использовать как у тебя, чтобы передать какое-то значение, или все же надо вешать дата-атрибуты по типу
data-type="image-switch-item"
data-type="image-pagination-item"
и тд
но тогда все равно придется работать с классами, когда ищешь активные элементы
А "почему" плохо, они не говорят?)
Не вижу никакой разницы.
@@maxgraph класс в любой момент может поменяться и придётся искать все места, где ты использовал элемент по классу.
В этом есть смысл) но ничто не мешает поменять
@@alym.aleksey а как класс может поменяться? это кому либо надо физически влезть и поменять его, по какой причине и зачем?
Хороший канал, подписался
Спасибо)
Что делать если картинка не редачиться просто выравниваеться по блоку а под рахмер блока не уменьшаеться?
Нужно больше информации, не понятно что не так)
Такое ощущение, что ты произносишь "имЕЙдж" - немного забавно звучит. :) Вообще просто "Имидж", конечно (с ударением на первый слог).
возможно) но уже привык))
а разве компоненты не на PUG делаются? нативный html разве собирается?
Кому как удобнее)
@@maxgraph не, правда: хатамаил нодой собирается? я не знал, серьёзно. А каким пакетом?
Галпом)
Gulp-fileinclude
@@maxgraph ок, попробуем)
@@maxgraph разобрался, спасибо за наводку)
Вот вы поставили отступ вниз от заголовка карточки, а вот если в одной карточке будет две строки в заголовке, а в другой три строки, то что тогда?
Не будет ничего, ограничу заголовок двумя строками.
@@maxgraph ну а представь, что в ТЗ написано "в заголовке карточки будет от 1 до 3 строк", то что тогда? Поставить height так, что помещалось три строки и overflow hidden?
@@Roderen ну тут по ситуации) как правило меня в таких ситуациях так и просили делать - высоту, оверфлоу и в конце текста многоточие писать. Но можно и с флексом поиграть, чтобы карточки растягивались.
неужели нельзя было отключать плагин Perfect Pixel ((( 14:49
Зачем? Так лучше видео как раз.
@@maxgraph Не понимаю, что к чему и как это работает, плагин мешает, может, потому что я новичок.
Я понимаю, вы сделали и делаете большую работу для нас, я вам благодарен за это.
все круто, но эфект с фото по итогу юзлес на мобаил девайсах.
на слайдер разве что переделать при определенном разрешении, ну или сразу слайдером делать)
но урок интересный)
я так и делал, включал слайдер)
@@maxgraph а какой слайдер юзаешь ?
Свайпер
@@maxgraph пойдет, тоже начал его осваивать, правда по их демкам прошелся и заметил что некоторые не работают адекватно на МАКах. Может уже и поправили, а может у себя версию не обновляли давно на сайте. В общем время покажет, бо лень было проверять)
потестирую у себя на маке, но вроде проблем не было)
иногда кажется, что некоторые свойства просто лишние, например, такие как display block у product__term и product__available
возможно)
Убери пожалуйста эту картинку ( Pixel perfect) ничего не видно, что ты там делаешь
С телефона особенно не видно
Окей, подумаю про это)
как называется программа где карточка товара
Это о чем?
Видимо figma, раз уж в описании есть ссылка на макет
Привет, если есть возможность, расскажи как сделать автоподстановку заглушки, если в ряду не хватает карточек. Спасибо
Привет, а можешь пояснить, о чем именно речь?
@@maxgraph На сайте например есть каталог карточек, но в последнем ряду карточек не 4, а 3 и вместо недостающей идёт заглушка. Встречал на нескольких сайтах, но не нашёл реализации через JS на codepen или где то ещё. Могу скинуть пример как это выглядит, если есть какая то почта для предложений по роликам
Интересно, но по факту заглушка не нужна
Напиши в телеграм или вк лучше))
@@maxgraph Написал в ВК)
Видел, попозже гляну
Вопрос а как рендорить на страницу с апи такое
Это не задача верстальщика
@@maxgraph а знать js ? и работать с local storage?
Это никак не связано с работой верстальщика
Пытаюсь переварить инфу с css карточками, чет слажна не много, про жс я молчу )
Значит стоит сперва изучить CSS хорошо)
@@maxgraph Переделать все сайты что есть на канале ? я могу
Основ у меня нет. Лучше в справочники вроде webref
было бы круто научиться делать фильтр товаров в сайдбаре магазинов
чтоб при клике на пункты фильтра (чекбокс + название пункта), на странице оставались только те товары, которые этому соответствуют
вроде через дата атрибуты делается
это выглядит как костыль, ибо делается через бэкенд все же. Но можно)
прикольно
А что за прикол про правильный порядок свойств CSS? Ты свойство меняешь местами, ибо "они не в правильном месте стоят". Где можно про это прочитать/посмотреть?
style lint называется
Видео про stylelint на канале есть)
что за тема vs code?
One Monokai
@@maxgraph Спасибо
дружище, запили ролик по webpack, будет вообще пушка
Думаю об этом :)
@@maxgraph пока почти ни у кого в русскоязычном ютубе нету по нему гайда, а после твоих уроков по галпу, я неплохо его освоил, буду ждать!
спасибо )
@@__pava8037, на ютубе полно гайдов про вебпак.. Самый годный - от Владилена Минина Webpack. Полный Курс.
@@timofey2672 некоторые моменты, как не странно уже устарели, но а во вторых, у него там все с точки зрения такого жесткого фронта рассматривается, хотелось бы больше инфы с точки зрения удобства для верстки