CSS рамка border, обводка outline, тени box-shadow, фильтры filter
HTML-код
- Опубликовано: 9 июл 2024
- ✏️ В этом занятии разбираем свойства рамки (border), обводки (outline), закруглений (border-radius), а также свойства теней (box-shadow) и фильтров (filter).
🔴 Timeline:
▶ 00:00 | План урока
▶ 00:18 | Рамка, свойство border
▶ 00:48 | Свойства border-top, border-right, border-bottom, border-left, border-block, border-inline
▶ 01:34 | Свойство border-width
▶ 02:40 | Свойство border-style
▶ 03:22 | Свойства border-top-style, border-right-style, border-bottom-style, border-left-style, border-block-style, border-inline-style
▶ 03:34 | Свойство border-color
▶ 04:12 | Свойства border-top-color, border-right-color, border-bottom-color, border-left-color, border-block-color, border-inline-color
▶ 04:24 | Рамка border и блочная модель
▶ 05:07 | Обводка, свойство outline
▶ 05:40 | Смещение обводки, свойство outline-offset
▶ 06:16 | Закругление, свойство border-radius
▶ 06:50 | Свойство border-radius, разные радиусы для каждого угла
▶ 07:03 | Как сделать круг с помощью border-radius
▶ 07:10 | Свойство border-radius, скругление по осям
▶ 07:23 | Генератор закруглений
▶ 07:38 | Свойство border-radius с outline
▶ 08:00 | Тени, свойство box-shadow
▶ 09:46 | Эффект скевоморфизма
▶ 09:53 | Фильтры, свойство filter
▶ 14:06 | Что дальше
📚 Полезные ссылки:
➖ Современный справочник по CSS: doka.guide/css/
➖ Справочник по фронтенду "MDN" от разработчиков Mozilla Firefox: developer.mozilla.org/ru/
➖ Генератор закруглений: 9elements.github.io/fancy-bor...
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css
Только на этом уроке заметила классные цветные обложки на видео, еще и с градиентом, в плейлисте смотрится красиво)
Превосходно, пришёл на работу, включил ютуб, посмотрел твои видео, повысил квалификацию. Спасибо 🥰
Пушка, даже и не знал что можно задавать цвет рамки через запятую и тогда с каждой стороны рамка будет разного цвета, прикольно!
Генератор классный! И то, что можно задавать тень картинке по контуру - удивило! Как всегда - масса интересностей, о которых не догадывался. Спасибо!
О Боже мой, filter: drop-shadow это же просто пушка, спасибо большое, что посвятили, Александр!😄
огонь 🔥🔥🔥
The lesson is very useful , thank you!
очень круто, спасибо за видео! про свойство фильтр не знал даже)
Обычно комментариев не пишу, но тут не удержалась... На удивление качественный контент! Доступная и интересная подача материала! Полагаю, что так мало людей смотрят курс, т.к. больше доверяют блогерам постарше. Парадокс в том, что их объяснения часто поверхностны, недостаточны для полного понимания, а Ваши - наоборот. И кроме того, такую грамотную речь трудно встретить на ютубе. Спасибо за Ваш труд! Успехов и процветания!
Спасибо за такую развернутую обратную связь! Мне очень приятно :)
Не знаю планировал ли ты где-то об этом рассказывать дальше (типо особенности блочных и inline элементов), но, наверное, стоило бы упомянуть что border "не очень хорошо" работает с inline элементами, когда содержимое их не помещается в экран.
Хм. Я в принципе не считал это проблемой, так как никогда так не делаю. Стилизация в инлайновых элементах чего-либо, кроме параметров текста, частенько приводит к непредсказуемым результатам…
Может и стоило в этом видео упомянуть эти неочевидные моменты. Спасибо за комментарий! :)
После курса по CSS сделаю несколько мастер-классов по верстке, там этот момент с бордером постараюсь проработать.
@@AleksanderLamkov Мастер-классы жду невероятно, по-любому научимся от тебя красивой семантической верстке без миллиардов div. Очень интересно будет услышать твои размышления по поводу решения той или иной проблемы, и с какими трудностями возможно столкнуться в будущем
@@svitboomer8840, поддержу. Тоже жду возможность посмотреть на работу мастера!
А в телеге только канал с анонсами или есть чат комьюнити ?
Есть чат: t.me/friendlyFrontendChat
Александр, можете сказать какая дефолтная толщина свойства border?
Привет! Зависит от браузера, но вроде все в 1px выставляют. Точнее можно глянуть в DevTools во вкладке Computed при инспектировании элемента со свойством рамки.
Спасибо!
@@AleksanderLamkov Александр, если вам вдруг интересно, то ответ medium. Нашла)))))
Осталось узнать, сколько это в пикселях :)
Часть свойств и значений выдаёт figma возникает возможно глупый вопрос - какие свойства, значения можно скопировать , измерить и взять из фигмы а какие надо додумывать самову (творческий процес )? Спасибо
Привет! В утопической ситуации творчества будет минимум, так как буквально каждый пиксель надо сверять с макетом. Но в реальности приходится унифицировать разброс отступов до единого значения, подбирать для текста цвета с альфаканалом, а не color + opacity пихать, ну и конечно же всевозможные анимации, наведения и клики по интерактивным элементам - чаще всего дизайнеры не учитывают эти моменты. Еще вспоминаю десятки состояний полей ввода - checked, disabled, readonly, invalid и так далее, плюс сочетания состояний друг с другом.
@@AleksanderLamkov Что такое альфаканал - пока не знаю. Спасибо Александро
@@AleksanderLamkov Из сказанного понял, что часть свойств надо додумывать интуитивно (догадываться)
Альфаканал - это указание прозрачности прямо в цвете, типа rgb(255 0 0 / 0.5)
0.5 - это прозрачность 50%
@@AleksanderLamkov Спасибо
Самое тупое знаете что такие хорошие видео почему не набирают лайки я не могу понять всякие туалеты оживают а хорошие и смысловые видео набирают мало лайков.
Полностью с вами согласен, но к сожалению так устроен ютуб.
Спасибо за ролик, все очень просто и понятно! У вас компьютер от hyper pc?)
Привет! Да, настольный ПК от Hyper :)