CSS3 #8 Единицы, переполнение и уровни элементов (Units, Overflow & z-index)

Рет қаралды 13,844

3 жыл бұрын

#YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZfaq: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

Пікірлер: 42

@HIghtowerSever 3 жыл бұрын

Классно ты объясняешь... интонация, темп, паузы... Продолжай!

@YauhenKavalchuk 3 жыл бұрын

Спасибо)

@rimavedeckiene2203 9 ай бұрын

🥳I understood. Very interesting and useful lesson💯

@YauhenKavalchuk 9 ай бұрын

Thanks for the feedback

@olehyefimenko6693 Жыл бұрын

Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!

@YauhenKavalchuk Жыл бұрын

Спасибо за поддержку

@vovathemonster Жыл бұрын

Хороший контент, спасибо

@YauhenKavalchuk Жыл бұрын

Пожалуйста

@shifronim8950 3 жыл бұрын

Для z-index гуглите в MDN контекст наложения, он же stacking context. Вкратце - родителям одинакового уровня вложенности можно явно задать z-index и дети тогда будут конкурировать только внутри родителя, ограниченные его "стеклянным потолком" - его z-index

@YauhenKavalchuk 3 жыл бұрын

👍 спасибо за конкретизацию кейса

@novikov-pavel Жыл бұрын

Для меня было сюрпризом, что z-index работает только на 1 уровне вложенности))) Уже рвал волосы на голове, не понимая почему у меня не выходит))

@missisipi9992 Жыл бұрын

Good!

@YauhenKavalchuk Жыл бұрын

Thanks

@user-dw1ts6pj1w Жыл бұрын

Супер'

@YauhenKavalchuk Жыл бұрын

👍

@liviivi Жыл бұрын

Спасибо за урок! Подскажите, в каких ситуациях невозможно применить min-hight для модального окна?

@YauhenKavalchuk Жыл бұрын

Ну например, если вы хотите сделать анимацию увеличения высоты модалки от нуля, до какого-то значения

@liviivi Жыл бұрын

@@YauhenKavalchuk спасибо!

@calavera-skull 3 жыл бұрын

Единственный вопрос, почему для задания размеров элементов и отступов обычно используют абсолютные величины? А если мы говорим об адаптивной вёрстке? Гораздо чаще встречаются %, как мне кажется. Да и rem очень многие используют. Px вообще такое себе.

@YauhenKavalchuk 3 жыл бұрын

Даже адаптивная вёрстка отталкивается от сеток, где отступы задаются пикселями, а основной размер процентами. Так что всё-таки пиксель даже для адаптивной используется чаще

@user-wq1nf7ny8m 11 ай бұрын

почему calc(100px + 200px + 1rem) будет 310? если 1rem = 16px? должно получиться 316px это просто оговорка или я что-то недопонял?)

@rimavedeckiene2203 9 ай бұрын

тоже заметила🤔🤔🤔

@kspshnik 3 жыл бұрын

1. Было бы здорово упомянуть, что 100vw _не_ учитывает полосы прокрутки, то есть если высота контента больше 100vh, то вылезет горизонтальный скролл 2. А куда ellipsis-то делся?

@YauhenKavalchuk 3 жыл бұрын

А зачем это упомянуть? Скролл появляется не в HTML документе, а в браузере. И к видимой области экрана вообще отношения не имеет. Определение для вьюпорта я озвучил очень чётко. И что вы имеете ввиду под ellipsis (это text-overflow: ellipsis;)? Если да, то это будет в теме работы с текстом.

@kspshnik 3 жыл бұрын

@@YauhenKavalchuk про ellipsis понял, слегка вперёд забежал :) А вот с тем, что "скролл появляется не в документе, а в браузере" - не согласен. Мы _всё_ делаем чтобы оно появилось в браузере. Просто эту фишку надо в голову положить внимательно, чтобы знали, иначе потом будут непонятные и необъяснимые косяки, и люди будут биться об эту стенку головой.

@bekmuraduralov2805 3 жыл бұрын

Почему доступ к остальным видосам ограничен?

@user-rg5tk3sw6v 3 жыл бұрын

Каждую неделю открывается доступ к двум видео из курса. Сделано это для того, чтобы у автора было время для работы над следующим курсом, а также для поддержания статистики просмотров. Если хочется посмотреть курс заранее, его можно приобрести за 3000 рублей. Довольно демократичная цена, если смотреть на ценники курсов у других блоггеров

@YauhenKavalchuk 3 жыл бұрын

@Пан Чи Ло, спасибо за помощь!

@Oktan241 3 жыл бұрын

а если вместо вьюпорта использовать 100% разве оно точно так же не займет всю область экрана?

@YauhenKavalchuk 3 жыл бұрын

Можете попробовать и посмотреть что будет. Как вариант, начните именно с высоты)

@Oktan241 3 жыл бұрын

@@YauhenKavalchuk высота и не работает...

@FredUA 3 жыл бұрын

тема z-index не раскрыта)) Про контекст забыл, а ведь вопрос как поднять вложенный элемент, что бы перебить z-index элементов, которые на одном уровне с родительским, возникает на первой верстке всяких там мобильных меню, модалок и т.д.

@YauhenKavalchuk 3 жыл бұрын

Согласен, можно было дать чуть глубже, но основы всё-таки разобраны

@vadim.islamov Жыл бұрын

а, какой размер руки имеешь?

@YauhenKavalchuk Жыл бұрын

Что-то я не понял вопроса

@kspshnik 3 жыл бұрын

А что, :root уже отменили? ;)

@YauhenKavalchuk 3 жыл бұрын

А при чём здесь root? Это вообще больше даже относится к псевдоклассам.

@kspshnik 3 жыл бұрын

@@YauhenKavalchuk к сказанному, что стилизация по тэгу html - _единственный_ способ повлиять на rem. Это не так, rem можно изменить ещё и определив font-size для :root ;o) (да, я знаю, что по сути это одно и тоже, и :root - это (псевдо)класс, _всегда_ "висящий" на html ;-), но формально - это два разных метода сделать одно и то же. Я например терпеть ненавижу селекторы по тэгу применять)

@missisipi9992 Жыл бұрын

@@kspshnik видимо автор дал тебе возможность самостоятельно разобраться в этом вопросе)

@arman-6172 Жыл бұрын

Мне кажется для em кривая формулировка вышла 🤔

@YauhenKavalchuk Жыл бұрын

Никто не жаловался🤷‍♂️

@arman-6172 Жыл бұрын

@@YauhenKavalchuk em - это текущий размер шрифта родителя. В два раза больше получилось т.к. указали 2em. Тож самое можно было сказать про проценты указав 200%. Или ошибаюсь?)