9. CSS рамка border, обводка outline, тени box-shadow, фильтры filter

[@smotritelyoutube]

Пушка, даже и не знал что можно задавать цвет рамки через запятую и тогда с каждой стороны рамка будет разного цвета, прикольно!

[@svitboomer8840]

Превосходно, пришёл на работу, включил ютуб, посмотрел твои видео, повысил квалификацию. Спасибо 🥰

[@Павел-у5р5б]

Поразительно, сколько человек вкладывает сил и труда для БЕСплатного образования начинающего верстальщика. Просто кладезь полезной информации. Даже на платных курсах так подробно не предоставляли информацию. Успехов автору и большое спасибо👍

[@w0rsttttt]

О Боже мой, filter: drop-shadow это же просто пушка, спасибо большое, что посвятили, Александр!😄

[@alexb.2616]

Генератор классный! И то, что можно задавать тень картинке по контуру - удивило! Как всегда - масса интересностей, о которых не догадывался. Спасибо!

[@ДиляраЗубарева-й1о]

с каждым уроком все интереснее становится изучать css. на платных курсах было не так увлекательно. Спасибо большое, Александр!

[@LAMit]

Отличное видео! Box-shadow запомнился на лету)

[@slamedesign]

емаё, ты мне щас так сильно глаза раскрыл с outline - offset, лучший!

[@alenache1]

огонь 🔥🔥🔥

[@Ксюша-з4и]

Только на этом уроке заметила классные цветные обложки на видео, еще и с градиентом, в плейлисте смотрится красиво)

[@colodatwin3102]

The lesson is very useful , thank you!

[@АлинаДобрынина-с4р]

Обычно комментариев не пишу, но тут не удержалась... На удивление качественный контент! Доступная и интересная подача материала! Полагаю, что так мало людей смотрят курс, т.к. больше доверяют блогерам постарше. Парадокс в том, что их объяснения часто поверхностны, недостаточны для полного понимания, а Ваши - наоборот. И кроме того, такую грамотную речь трудно встретить на ютубе. Спасибо за Ваш труд! Успехов и процветания!

[@AleksanderLamkov]

Спасибо за такую развернутую обратную связь! Мне очень приятно :)

[@Ivanfwit]

очень круто, спасибо за видео! про свойство фильтр не знал даже)

[@idcwhrejustfar]

очень круто делаешь, удачи тебе

[@svitboomer8840]

Не знаю планировал ли ты где-то об этом рассказывать дальше (типо особенности блочных и inline элементов), но, наверное, стоило бы упомянуть что border "не очень хорошо" работает с inline элементами, когда содержимое их не помещается в экран.

[@AleksanderLamkov]

Хм. Я в принципе не считал это проблемой, так как никогда так не делаю. Стилизация в инлайновых элементах чего-либо, кроме параметров текста, частенько приводит к непредсказуемым результатам… Может и стоило в этом видео упомянуть эти неочевидные моменты. Спасибо за комментарий! :) После курса по CSS сделаю несколько мастер-классов по верстке, там этот момент с бордером постараюсь проработать.

[@svitboomer8840]

@@AleksanderLamkov Мастер-классы жду невероятно, по-любому научимся от тебя красивой семантической верстке без миллиардов div. Очень интересно будет услышать твои размышления по поводу решения той или иной проблемы, и с какими трудностями возможно столкнуться в будущем

[@alexb.2616]

@@svitboomer8840, поддержу. Тоже жду возможность посмотреть на работу мастера!

[@hyperpocket.]

Если filter: opacity(); производительнее чем opacity, то можно использовать только его?

[@AleksanderLamkov]

Нет. Используй то, что тебе удобно. Разница в перформансе ничтожна. Я использую opacity, т. к. банально проще синтаксис.

[@slamedesign]

В чем разница между filter: opacity(0) и opacity: 0 ? (UPD: а, всё, после паузы начал слушать дальше и услышал)

[@evgeniy3370]

А в телеге только канал с анонсами или есть чат комьюнити ?

[@AleksanderLamkov]

Есть чат: t.me/friendlyFrontendChat

[@tatelf]

Александр, можете сказать какая дефолтная толщина свойства border?

[@AleksanderLamkov]

Привет! Зависит от браузера, но вроде все в 1px выставляют. Точнее можно глянуть в DevTools во вкладке Computed при инспектировании элемента со свойством рамки.

[@tatelf]

Спасибо!

[@tatelf]

@@AleksanderLamkov Александр, если вам вдруг интересно, то ответ medium. Нашла)))))

[@AleksanderLamkov]

Осталось узнать, сколько это в пикселях :)

[@ПрограммаКомпьютер]

Самое тупое знаете что такие хорошие видео почему не набирают лайки я не могу понять всякие туалеты оживают а хорошие и смысловые видео набирают мало лайков.

[@MrEnderman_YT]

Полностью с вами согласен, но к сожалению так устроен ютуб.

[@ВиталийДавыдов-э4г]

Часть свойств и значений выдаёт figma возникает возможно глупый вопрос - какие свойства, значения можно скопировать , измерить и взять из фигмы а какие надо додумывать самову (творческий процес )? Спасибо

[@AleksanderLamkov]

Привет! В утопической ситуации творчества будет минимум, так как буквально каждый пиксель надо сверять с макетом. Но в реальности приходится унифицировать разброс отступов до единого значения, подбирать для текста цвета с альфаканалом, а не color + opacity пихать, ну и конечно же всевозможные анимации, наведения и клики по интерактивным элементам - чаще всего дизайнеры не учитывают эти моменты. Еще вспоминаю десятки состояний полей ввода - checked, disabled, readonly, invalid и так далее, плюс сочетания состояний друг с другом.

[@ВиталийДавыдов-э4г]

@@AleksanderLamkov Что такое альфаканал - пока не знаю. Спасибо Александро

[@ВиталийДавыдов-э4г]

@@AleksanderLamkov Из сказанного понял, что часть свойств надо додумывать интуитивно (догадываться)

[@AleksanderLamkov]

Альфаканал - это указание прозрачности прямо в цвете, типа rgb(255 0 0 / 0.5) 0.5 - это прозрачность 50%

[@ВиталийДавыдов-э4г]

@@AleksanderLamkov Спасибо

[@MrEnderman_YT]

Спасибо за ролик, все очень просто и понятно! У вас компьютер от hyper pc?)

[@AleksanderLamkov]

Привет! Да, настольный ПК от Hyper :)