Спасибо, за топ контент. Очень нравиться твой подход к видосам. Заранее готовишься, заморачиваешься над обложками и т.д. Это многого стоит. Успехов и удачи!
Я нашел решение для твоего первого попапа: Cтавим в .popup display: flex как ты делал, а самому .popup__content ставим margin: auto. Обязательно должно быть overflow: auto у .popup, иначе обрежется нижняя часть.
@@h3ckphy246 там popup уплывал за верхнюю границу экрана в случае, когда высота экрана оказывалась меньше высота popup (2:49-3:26) и это, как оказалось, фиксится с помощью margin: auto. Если вдруг сможете объяснить почему - буду очень благодарна) Как я поняла, align-items: center как раз смещает блок за экран, потому что центрирует его, а как работает margin: auto в этих условиях догнать не могу) Отдаёт приоритет top и left в условиях недостатка пространства?
@@irin_Kom я сам не знаю) я просто часто использую margin с флексами и попробовал такую комбинацию) Но есть предположение. Думаю, вы правы, что при align center элемент просто центрируется так, что его центр всегда прикреплен к центру родителя. Наверное, это похоже на центрирование с position absolute (надо попробовать и сравнить). А при margin элемент просто отталкивается со всех сторон одинаково. И когда места недостаточно он не выходит за границы родителя сверху, только снизу, т.к. у нас все всегда начинает позиционироваться с левого верхнего угла. Повторяюсь, это только предположение, я не гуру верстки и так глубоко не копаю) Я бы посоветовал вам задать вопрос на habr qna или stackoverflow, если так интересно)
Привет! Дмитрий, подскажи пожалуйста зачем делается обертка на 4:38 inner, wrapper, это тоже самое что и контейнер? Где можно об этом почитать поподробнее, не пойму никак зачем делает обертки и что это вообще такое, благодарю
Привет! Можно сказать, что это типо контейнера. Обертки (контейнеры) нужно, чтобы как-то ограничить контент, отцентровать его и тд. То есть дать какие-то стили блоку, в котором уже будет контент. Сам попап, просто так реализовал, так как много способов пробовал. И где-то скролл не работал, где-то центровка. Поэтому пришлось так создавать. По-любому есть и другие решения. Главное понять, здесь нету правильного решения, есть оптимальное. Если интересно, попробуй сам реализовать попап, почитай статьи. Протестируй разные версии. В моем примере убери обертки, попробуй без них сделать и посмотри как что себя ведет
В проектах я использую сборку проекта на gulp, все файлы препроцессора sass превращаются в один минимизированный css файл. Здесь я не стал пихать все в кучу, в будущем запишу уроки верстки со сборкой. В этом курсе планирую в конце совместить все в один файл вручную, чтобы не перегружать информацией о сборке, а сделать это в отдельном курсе.
Как можно скролл изменить? Имеется ввиду внешний вид, чтобы он был уже и темного цвета у всплывающих окнах сбоку, не затрагивая основной ползунок на сайте
1. Можно подключить библиотеку, например, grsmto.github.io/simplebar/ 2. Задать стили через css, в некоторых браузерах может не работать css-tricks.com/custom-scrollbars-in-webkit/
Привет, Дмитрий, подскажи пожалуйста, как делаются меню такие, где они не как попап на по середине, а допусти в левом углы на 50% ширины, я вот не могу понять, это попап окна или что-то другое? Например, www.figma.com/file/NlvLmnC79UrdlB6B7SLQe5/OXEM.-%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-Copy?node-id=0%3A1
Привет! Да, это попапы. Нужно позиционировать контент попапа не по центру. А какому-то краю через left или right. Если нужно можно еще и transform использовать
Привет! Просто продолжай и прими, что это нормально. Через некоторые промежутки времени будешь понимать, что растешь и то что казалось сложным уже не кажется. Если ты уже побыл немного в программировании. То представь себя в самом начале пути и сейчас. Если бы ты показал, что уже умеешь сейчас себе в прошлом. То я уверен, что ты бы удивился и сказал, что это супер сложно. Вот так будет и в будущем, только с каждым разом уровень сложности будет повышаться
Попапы можо верстать и на Flexbox. Для этого просто нужно задать попапу (в видео - .popup) свойство overflow: auto; тогда тоже появляется скролл и ничего не скрывается ))
Надо попробовать, я много вариаций тестировал и всегда что-то ломалось, то на одном устройстве, то на другом. Поэтому использую такой вариант, так как не заметил что он ломается
} .mobile-menu__li{ text-align: center; } .popup-phone{ border: 3px solid #ffa650; margin-bottom: 30; } .popup-phone__item{ color: #ffa650; } У тебя отличные уроки, мне очень нравятся, жаль, что они не получают должной отдачи
Я точно не помню. Но если по логике для этого класса popup__content--centered можно задать выравнивание по центру. Если задать для класса popup__content, то для попапов, где не нужно выравнивание по центру придется добавлять класс и убирать
В чем может быть проблема, на адаптиве svg картинки видны, если же открыть сайт через browser sync на телефоне, то картинки не видны, но если же картинки вставить через тег svg а не через img, то картинки появляются?
1. Остальные изображения нормально работают? 2. Телефон поддерживает svg? 3. Путь до изображения правильный? Можно скачать любое svg изображение, чтобы убедиться, что это правильное svg, вставить и посмотреть, есть оно или нет.
@@Фронтендер-з6о Фронтендер 1) jpg, png работает все ок, только svg не отображается, svg на телефоне белого цвета, то есть сливается с фото, оно то есть есть, но почему то без цвета 2) сейчас открыл проект который делал из макета figma, этот проект на галпе, и открыл на телефоне сайт, все svg изображения работают, значит телефон поддерживает svg 3) путь верный, на компе же все окей Мб думаю проблема в том, что вы через иллюстратор вырезали, а не как я, через фотошоп сразу.
Привет, ещё возникла такая проблема, я также, как вы прописал для popup-content : height:100%, но почему то popup не увеличился по высоте на весь экран, код сравнил с вашим, все так же, в чем может быть проблема?
Опять я, чтобы скрыть блок вы используете свойство visibility и opacity, для чего нужно opacity, вроде никакой роли оно не играет? И нельзя вместо этих свойст просто написать display:none? В чем разница?
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
Таймкоды:
0:28 Разбираем popup-menu
2:48 Разбираем проблему попапов
4:28 Решение проблемы попапов
7:35 Верстаем popup-menu
9:52 Стили для popup-menu
10:35 Стили для btn-close
15:10 Стили для mobile-menu
26:20 Разбираем popup-order
26:50 Верстаем popup-order
34:50 Стили для popup-order
44:12 Верстаем popup-thanks
46:24 Верстаем popup-error
Спасибо, за топ контент. Очень нравиться твой подход к видосам. Заранее готовишься, заморачиваешься над обложками и т.д. Это многого стоит. Успехов и удачи!
Лучший, просто лучший
Я нашел решение для твоего первого попапа:
Cтавим в .popup display: flex как ты делал, а самому .popup__content ставим margin: auto.
Обязательно должно быть overflow: auto у .popup, иначе обрежется нижняя часть.
а вы не могли бы объяснить, почему margin: auto решает проблему?)
@@irin_Kom честно говоря, даже не знаю) Уже не помню, что там в видео было)
@@h3ckphy246 там popup уплывал за верхнюю границу экрана в случае, когда высота экрана оказывалась меньше высота popup (2:49-3:26) и это, как оказалось, фиксится с помощью margin: auto. Если вдруг сможете объяснить почему - буду очень благодарна) Как я поняла, align-items: center как раз смещает блок за экран, потому что центрирует его, а как работает margin: auto в этих условиях догнать не могу) Отдаёт приоритет top и left в условиях недостатка пространства?
@@irin_Kom я сам не знаю) я просто часто использую margin с флексами и попробовал такую комбинацию)
Но есть предположение. Думаю, вы правы, что при align center элемент просто центрируется так, что его центр всегда прикреплен к центру родителя. Наверное, это похоже на центрирование с position absolute (надо попробовать и сравнить).
А при margin элемент просто отталкивается со всех сторон одинаково. И когда места недостаточно он не выходит за границы родителя сверху, только снизу, т.к. у нас все всегда начинает позиционироваться с левого верхнего угла.
Повторяюсь, это только предположение, я не гуру верстки и так глубоко не копаю) Я бы посоветовал вам задать вопрос на habr qna или stackoverflow, если так интересно)
@@irin_Kom а, вы, вроде, тоже такое предположение сделали. Про top и left не сразу понял)
Привет! Дмитрий, подскажи пожалуйста зачем делается обертка на 4:38 inner, wrapper, это тоже самое что и контейнер? Где можно об этом почитать поподробнее, не пойму никак зачем делает обертки и что это вообще такое, благодарю
Привет! Можно сказать, что это типо контейнера. Обертки (контейнеры) нужно, чтобы как-то ограничить контент, отцентровать его и тд. То есть дать какие-то стили блоку, в котором уже будет контент.
Сам попап, просто так реализовал, так как много способов пробовал. И где-то скролл не работал, где-то центровка. Поэтому пришлось так создавать. По-любому есть и другие решения. Главное понять, здесь нету правильного решения, есть оптимальное.
Если интересно, попробуй сам реализовать попап, почитай статьи. Протестируй разные версии. В моем примере убери обертки, попробуй без них сделать и посмотри как что себя ведет
@@Фронтендер-з6о Благодарю)
Да, круто верстаешь!!!
Спасибо за видос
я не знал про Ctrl+D Спасибо!
Дмитрий, в конце как можно перекинуть все стили в какой нибудь препроцессор чтобы был один линк в хэде?
В проектах я использую сборку проекта на gulp, все файлы препроцессора sass превращаются в один минимизированный css файл. Здесь я не стал пихать все в кучу, в будущем запишу уроки верстки со сборкой.
В этом курсе планирую в конце совместить все в один файл вручную, чтобы не перегружать информацией о сборке, а сделать это в отдельном курсе.
👍👍👍👍👍👍👍
Как можно скролл изменить? Имеется ввиду внешний вид, чтобы он был уже и темного цвета у всплывающих окнах сбоку, не затрагивая основной ползунок на сайте
1. Можно подключить библиотеку, например, grsmto.github.io/simplebar/
2. Задать стили через css, в некоторых браузерах может не работать
css-tricks.com/custom-scrollbars-in-webkit/
@@Фронтендер-з6о Спасибо!
Привет, Дмитрий, подскажи пожалуйста, как делаются меню такие, где они не как попап на по середине, а допусти в левом углы на 50% ширины, я вот не могу понять, это попап окна или что-то другое?
Например, www.figma.com/file/NlvLmnC79UrdlB6B7SLQe5/OXEM.-%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-Copy?node-id=0%3A1
Привет!
Да, это попапы. Нужно позиционировать контент попапа не по центру. А какому-то краю через left или right. Если нужно можно еще и transform использовать
@@Фронтендер-з6о спасибо))
блин помги что делать если я когда пишу код по видео чуствую неучем как это решить?
Привет!
Просто продолжай и прими, что это нормально. Через некоторые промежутки времени будешь понимать, что растешь и то что казалось сложным уже не кажется.
Если ты уже побыл немного в программировании. То представь себя в самом начале пути и сейчас. Если бы ты показал, что уже умеешь сейчас себе в прошлом. То я уверен, что ты бы удивился и сказал, что это супер сложно.
Вот так будет и в будущем, только с каждым разом уровень сложности будет повышаться
Как ты выравниваешь css в столбик? какое сочетание клавиш в vscode
Если ты про такой момент как на 15:29, то я выделяю нужные элементы и нажимаю shift+tab, как tab только наоборот, уменьшает отступы
@@Фронтендер-з6о да, спасибо то что надо.
Попапы можо верстать и на Flexbox. Для этого просто нужно задать попапу (в видео - .popup) свойство overflow: auto; тогда тоже появляется скролл и ничего не скрывается ))
Надо попробовать, я много вариаций тестировал и всегда что-то ломалось, то на одном устройстве, то на другом. Поэтому использую такой вариант, так как не заметил что он ломается
@@Фронтендер-з6о
html
Пицца
О нас
Контакты
+380 50 123 4567
css
.popup{
position: fixed;
z-index: 10;
top: 0;
left: 0;
background: rgba(0,0,0,.7);
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
overflow: auto;
}
.popup__body{
display: flex;
min-height: 100%;
align-items:center;
justify-content: center;
padding: 30px 10px;
}
.popup__content{
background: #fff;
padding: 70px 20px;
width: 730px;
margin: 0 auto;
position: relative;
display: flex;
border-radius: 20px;
flex-direction: column;
align-items: center;
text-align: center;
}
.popup__button-close{
position: absolute;
right: 20px;
top: 20px;
}
.mobile-menu__ul{
padding: 0;
margin: 0;
list-style: none;
}
.mobile-menu__link{
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
color:#1f1f1f;
font-size: 24px;
display: block;
padding-bottom: 30px;
}
.mobile-menu__li{
text-align: center;
}
.popup-phone{
border: 3px solid #ffa650;
margin-bottom: 30;
}
.popup-phone__item{
color: #ffa650;
}
У тебя отличные уроки, мне очень нравятся, жаль, что они не получают должной отдачи
@@ohiolezhaa4154 Круто, спасибо, надо попробовать в проектах. Почему-то кажется, что я тоже пробовал это решение, наверное, где-то ошибся
а это меню включить?
28:07
Привет! ctrl+f поиск
@@Фронтендер-з6о Спасибо
А зачем вы делали popup__content--centered , я задал те же значения в popup__content и оно так же работало ? объясни пожалуйста
Я точно не помню. Но если по логике для этого класса popup__content--centered можно задать выравнивание по центру. Если задать для класса popup__content, то для попапов, где не нужно выравнивание по центру придется добавлять класс и убирать
В чем может быть проблема, на адаптиве svg картинки видны, если же открыть сайт через browser sync на телефоне, то картинки не видны, но если же картинки вставить через тег svg а не через img, то картинки появляются?
1. Остальные изображения нормально работают?
2. Телефон поддерживает svg?
3. Путь до изображения правильный?
Можно скачать любое svg изображение, чтобы убедиться, что это правильное svg, вставить и посмотреть, есть оно или нет.
@@Фронтендер-з6о Фронтендер 1) jpg, png работает все ок, только svg не отображается, svg на телефоне белого цвета, то есть сливается с фото, оно то есть есть, но почему то без цвета
2) сейчас открыл проект который делал из макета figma, этот проект на галпе, и открыл на телефоне сайт, все svg изображения работают, значит телефон поддерживает svg
3) путь верный, на компе же все окей
Мб думаю проблема в том, что вы через иллюстратор вырезали, а не как я, через фотошоп сразу.
@@КамильМиникеев-г5ъ Через фотошоп не надо svg экспоритровать. Можно открыть код этого svg и увидеть, что это не svg
Привет, ещё возникла такая проблема, я также, как вы прописал для popup-content : height:100%, но почему то popup не увеличился по высоте на весь экран, код сравнил с вашим, все так же, в чем может быть проблема?
Если же зайти через browser sync на телефоне, все окей, высота 100% срабатывает, на адаптиве на компе нет, очень странно, почему так?
Опять я, чтобы скрыть блок вы используете свойство visibility и opacity, для чего нужно opacity, вроде никакой роли оно не играет? И нельзя вместо этих свойст просто написать display:none? В чем разница?
Можно просто display: none. Отличие в том, что для opacity можно задать transition
@@Фронтендер-з6о понял, спасибо!
@@Фронтендер-з6о Для плавности появления попапа?
@@MaksssHome ага
Забросили канал? ((
Еще буду снимать курсы, но пока пауза