CSS3 #8 Единицы, переполнение и уровни элементов (Units, Overflow & z-index)
HTML-код
- Опубликовано: 16 дек 2020
- #YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
Классно ты объясняешь... интонация, темп, паузы... Продолжай!
Спасибо)
Good!
Thanks
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
Спасибо за поддержку
🥳I understood. Very interesting and useful lesson💯
Thanks for the feedback
Для z-index гуглите в MDN контекст наложения, он же stacking context. Вкратце - родителям одинакового уровня вложенности можно явно задать z-index и дети тогда будут конкурировать только внутри родителя, ограниченные его "стеклянным потолком" - его z-index
👍 спасибо за конкретизацию кейса
Для меня было сюрпризом, что z-index работает только на 1 уровне вложенности)))
Уже рвал волосы на голове, не понимая почему у меня не выходит))
Хороший контент, спасибо
Пожалуйста
Супер'
👍
Спасибо за урок! Подскажите, в каких ситуациях невозможно применить min-hight для модального окна?
Ну например, если вы хотите сделать анимацию увеличения высоты модалки от нуля, до какого-то значения
@@YauhenKavalchuk спасибо!
Единственный вопрос, почему для задания размеров элементов и отступов обычно используют абсолютные величины? А если мы говорим об адаптивной вёрстке? Гораздо чаще встречаются %, как мне кажется. Да и rem очень многие используют. Px вообще такое себе.
Даже адаптивная вёрстка отталкивается от сеток, где отступы задаются пикселями, а основной размер процентами. Так что всё-таки пиксель даже для адаптивной используется чаще
1. Было бы здорово упомянуть, что 100vw _не_ учитывает полосы прокрутки, то есть если высота контента больше 100vh, то вылезет горизонтальный скролл
2. А куда ellipsis-то делся?
А зачем это упомянуть? Скролл появляется не в HTML документе, а в браузере. И к видимой области экрана вообще отношения не имеет. Определение для вьюпорта я озвучил очень чётко. И что вы имеете ввиду под ellipsis (это text-overflow: ellipsis;)? Если да, то это будет в теме работы с текстом.
@@YauhenKavalchuk про ellipsis понял, слегка вперёд забежал :)
А вот с тем, что "скролл появляется не в документе, а в браузере" - не согласен. Мы _всё_ делаем чтобы оно появилось в браузере.
Просто эту фишку надо в голову положить внимательно, чтобы знали, иначе потом будут непонятные и необъяснимые косяки, и люди будут биться об эту стенку головой.
почему calc(100px + 200px + 1rem) будет 310? если 1rem = 16px? должно получиться 316px
это просто оговорка или я что-то недопонял?)
тоже заметила🤔🤔🤔
тема z-index не раскрыта)) Про контекст забыл, а ведь вопрос как поднять вложенный элемент, что бы перебить z-index элементов, которые на одном уровне с родительским, возникает на первой верстке всяких там мобильных меню, модалок и т.д.
Согласен, можно было дать чуть глубже, но основы всё-таки разобраны
Почему доступ к остальным видосам ограничен?
Каждую неделю открывается доступ к двум видео из курса. Сделано это для того, чтобы у автора было время для работы над следующим курсом, а также для поддержания статистики просмотров. Если хочется посмотреть курс заранее, его можно приобрести за 3000 рублей. Довольно демократичная цена, если смотреть на ценники курсов у других блоггеров
@Пан Чи Ло, спасибо за помощь!
а если вместо вьюпорта использовать 100% разве оно точно так же не займет всю область экрана?
Можете попробовать и посмотреть что будет. Как вариант, начните именно с высоты)
@@YauhenKavalchuk высота и не работает...
а, какой размер руки имеешь?
Что-то я не понял вопроса
А что, :root уже отменили? ;)
А при чём здесь root? Это вообще больше даже относится к псевдоклассам.
@@YauhenKavalchuk к сказанному, что стилизация по тэгу html - _единственный_ способ повлиять на rem. Это не так, rem можно изменить ещё и определив font-size для :root ;o)
(да, я знаю, что по сути это одно и тоже, и :root - это (псевдо)класс, _всегда_ "висящий" на html ;-), но формально - это два разных метода сделать одно и то же. Я например терпеть ненавижу селекторы по тэгу применять)
@@kspshnik видимо автор дал тебе возможность самостоятельно разобраться в этом вопросе)
Мне кажется для em кривая формулировка вышла 🤔
Никто не жаловался🤷♂️
@@YauhenKavalchuk em - это текущий размер шрифта родителя. В два раза больше получилось т.к. указали 2em. Тож самое можно было сказать про проценты указав 200%. Или ошибаюсь?)