Очень круто обьясняешь, действительно я смотрел много туторов на ютубе но у тебя огромный талант (настолько доходчиво и без воды первый раз вижу). Рад что такие люди как ты существуют, мне есть кому ровнятся)
Александр, вы молодец! Так коротко эту тему мало кто освещал. Твоим контентом удобно пользовать как справочником, если что-то подзабыл. Все грамотно структурировано. Таймлайн супер идея. Минимум времени, максимум пользы)👍
Одновременно и простая, и сложная тема. Спасибо за раскрытие. Особенно за рекомендации с z-идексом. Всё не мог понять - зачем там 500, если до этого есть числа :)
в css есть свойство Isolation со значением isolate - оно изолирует слой и правила z-index начинают работать по другому. К примеру можно изолировать слой, добавить к нему абсолютный ::before с высоким z-index, который будет перекрывать только фон родителя, но не его текст (обычно абсолютный ::before с высоким z-index перекрывает всё, как у Александра в примере 9:58)
@@AleksanderLamkov пример из реальной практики - был слайдер, html код которого менять было нельзя (старый код) - каждый слайд содержал фоновую картинку через background-image + текст, менять можно было только css =))) задача - потушить яркость картинки, что бы текст был читаемым и наложить градиент в цвет сайта... соответственно у родительского блока с фоновой картинкой задавался isolation: isolate; добавлялся ::before c z-index: -1; что бы он подлез под текст и его не трогал + mix-bland-mod потушить яркость фоновой картинки + через background-image добавлялся градиент с эффектом устаревания через svg шум (noise grainy gradient css - вроде как называется, не помню уже) а текст сверх всего этого ужаса оставался девственно чистым белым... вот это был изврат, так изврат =)))
Вот на данный момент как раз с вопросом позиционирования есть некоторые проблемы) Уже который день пытаюсь сделать верхнее меню для сайта, но что-то идёт не так) Надо эту тему подробнее изучить и попрактиковаться, чтобы уже точно понимать что и как работает. Спасибо за урок!)
Опечатался. Спасибо, что заметил! Для получения значения z-index между тултипом и меню, нужно в формуле calc использовать переменные layer-tooltip и layer-menu.
Возник вопрос с разделом "Свойство position, значение absolute", 2:41. В этом примере box-3 позиционируется относительно body или box-2 с свойством relative? Почему при отключении свойств top и left box-3 прижимается не к левому-верхнему углу всей страницы, а сразу после box-2?
Привет! Элемент box-3 в данном примере позиционируется относительно body. Если отключить top и left, то по умолчанию для этих свойств будут работать значения auto и фактически элемент останется на своем изначальном месте.
Я кажется понял идею. Он будет позиционироваться относительно родительского элемента с свойством relative, но если убрать у position: absolute значение top и left, как в примере, он просто будет занимать "визуально" свое место в потоке документа. Просто я думал, что position: absolute без указания top и left просто позиционирует его в левый-верхний угол всего документа
Подскажи пожалуйста, допустим у родителя задний фон картинка и position: relative; а как только включаю его ребенку position: absolute; то задний фон картинки просто изчезает
Если внутри relative позиционированного элемента внезапно всё содержимое становится absolute позиционированным, то этот relative элемент фактически становится равным по размерам 0х0 пикселей и поэтому ничего и не видно. Как вариант - добавить размеры этому элементы или же лучше вовсе не допускать таких ситуаций.
Идёт ли обычно вместе с фигмой текстовое описание, например: хедер должен быть "липким", кнопка или ссылка, страница по ссылке должна открываться в новом оке и т.д.? описание ньюансов. Как обычно это делаеться?
Иногда это описывается прямо в фигме в виде дополнительных поясняющих блоков, иногда дизайнеры оставляют комментарии прямо в макете, иногда поведение описывается в ТЗ, то есть в каком-то документе, а иногда знания передаются из уст в уста, в зависимости от серьезности проекта :)
Пока не стоит на этом заострять внимание. Перед тем, как показывать эту систему с переменными, я предупредил, что эта информация для более опытных специалистов. Я обязательно расскажу о :root и CSS-переменных в одном из следующих видео. Но если кратко, то селектор :root {} То же самое, что и селектор html {} Просто селектор к корневому и самому главному элементу страницы. Там задают такие глобальные параметры, как CSS-переменные.
Очень круто обьясняешь, действительно я смотрел много туторов на ютубе но у тебя огромный талант (настолько доходчиво и без воды первый раз вижу). Рад что такие люди как ты существуют, мне есть кому ровнятся)
Александр, вы молодец! Так коротко эту тему мало кто освещал. Твоим контентом удобно пользовать как справочником, если что-то подзабыл. Все грамотно структурировано. Таймлайн супер идея. Минимум времени, максимум пользы)👍
Спасибо тебе Саша! Здоровья тебе и счастья!
Одновременно и простая, и сложная тема. Спасибо за раскрытие. Особенно за рекомендации с z-идексом. Всё не мог понять - зачем там 500, если до этого есть числа :)
в css есть свойство Isolation со значением isolate - оно изолирует слой и правила z-index начинают работать по другому. К примеру можно изолировать слой, добавить к нему абсолютный ::before с высоким z-index, который будет перекрывать только фон родителя, но не его текст (обычно абсолютный ::before с высоким z-index перекрывает всё, как у Александра в примере 9:58)
Спасибо за комментарий! Да, действительно, так оно и будет. Правда в реальной практике такое не приходилось использовать…
@@AleksanderLamkov пример из реальной практики - был слайдер, html код которого менять было нельзя (старый код) - каждый слайд содержал фоновую картинку через background-image + текст, менять можно было только css =))) задача - потушить яркость картинки, что бы текст был читаемым и наложить градиент в цвет сайта... соответственно у родительского блока с фоновой картинкой задавался isolation: isolate; добавлялся ::before c z-index: -1; что бы он подлез под текст и его не трогал + mix-bland-mod потушить яркость фоновой картинки + через background-image добавлялся градиент с эффектом устаревания через svg шум (noise grainy gradient css - вроде как называется, не помню уже) а текст сверх всего этого ужаса оставался девственно чистым белым... вот это был изврат, так изврат =)))
Спасибо огромное
Хороший курс как подсказка уже разбирающимся, но не с нуля.
Люблю ваши ролики, очень помогают.
Пушка. Лайк, продолжай в том же духе
Спасибо, очень помог ваше урок!
было интересно посмотреть) спасибо!
Будем ждать после курса js, курс по фреймворку react js, а так же гитхаб для начинающих 😉
Вот на данный момент как раз с вопросом позиционирования есть некоторые проблемы) Уже который день пытаюсь сделать верхнее меню для сайта, но что-то идёт не так) Надо эту тему подробнее изучить и попрактиковаться, чтобы уже точно понимать что и как работает.
Спасибо за урок!)
Спасибо!
Как из пулемета обожаю таких учителей, не понятно какую задачу перед собой ставят выпуская такое видео
Это критика или похвала?)
@@AleksanderLamkov тоже в диссонансе error)))
Тут тема понятнее чем в других,так что автор объясняет тему который выбрал что не понятно?
Формула calc 15:37 точно правильная? Выйдет z-index: 250;, что является между menu и modal, а не tooltip и menu.
Опечатался. Спасибо, что заметил! Для получения значения z-index между тултипом и меню, нужно в формуле calc использовать переменные layer-tooltip и layer-menu.
Возник вопрос с разделом "Свойство position, значение absolute", 2:41. В этом примере box-3 позиционируется относительно body или box-2 с свойством relative? Почему при отключении свойств top и left box-3 прижимается не к левому-верхнему углу всей страницы, а сразу после box-2?
Привет!
Элемент box-3 в данном примере позиционируется относительно body.
Если отключить top и left, то по умолчанию для этих свойств будут работать значения auto и фактически элемент останется на своем изначальном месте.
Я кажется понял идею. Он будет позиционироваться относительно родительского элемента с свойством relative, но если убрать у position: absolute значение top и left, как в примере, он просто будет занимать "визуально" свое место в потоке документа. Просто я думал, что position: absolute без указания top и left просто позиционирует его в левый-верхний угол всего документа
планируешь ли делать курс react очень бы хотелось
Пока не планирую. Сначала по JS курс нужно закончить. Все мои ближайшие планы только об этом.
sticky так же не работает если у родительского элемента любой вложенности установлено overflow:hidden
Коли очікувати флекси?
Привет! Буквально в ближайшую неделю :)
@@AleksanderLamkov чекаю з нетерпінням 🫡
Подскажи пожалуйста, допустим у родителя задний фон картинка и position: relative; а как только включаю его ребенку position: absolute; то задний фон картинки просто изчезает
Если внутри relative позиционированного элемента внезапно всё содержимое становится absolute позиционированным, то этот relative элемент фактически становится равным по размерам 0х0 пикселей и поэтому ничего и не видно. Как вариант - добавить размеры этому элементы или же лучше вовсе не допускать таких ситуаций.
Идёт ли обычно вместе с фигмой текстовое описание, например: хедер должен быть "липким", кнопка или ссылка, страница по ссылке должна открываться в новом оке и т.д.? описание ньюансов. Как обычно это делаеться?
Иногда это описывается прямо в фигме в виде дополнительных поясняющих блоков, иногда дизайнеры оставляют комментарии прямо в макете, иногда поведение описывается в ТЗ, то есть в каком-то документе, а иногда знания передаются из уст в уста, в зависимости от серьезности проекта :)
@@AleksanderLamkov Подозреваю , что это слабое место - вызывающее разницу в трактовках. Спасибо
Про :root не понял, что с ним делать и как
Пока не стоит на этом заострять внимание. Перед тем, как показывать эту систему с переменными, я предупредил, что эта информация для более опытных специалистов.
Я обязательно расскажу о :root и CSS-переменных в одном из следующих видео.
Но если кратко, то селектор
:root {}
То же самое, что и селектор
html {}
Просто селектор к корневому и самому главному элементу страницы. Там задают такие глобальные параметры, как CSS-переменные.
Очень длинное видео. Придумал усложненные, запутанные примеры