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

[@Kino_moment_official]

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

[@smotritelyoutube]

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

[@svitboomer8840]

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

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

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

[@alexb.2616]

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

[@w0rsttttt]

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

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

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

[@colodatwin3102]

The lesson is very useful , thank you!

[@alenache1]

огонь 🔥🔥🔥

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

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

[@AleksanderLamkov]

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

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

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

[@Ivanfwit]

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

[@slamedesign]

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

[@LAMit]

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

[@idcwhrejustfar]

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

[@LEO-cu1fn]

Лучший просто максимальный профессионализм работы главное чтобы как другие не забросил поверь у тебя очень активная аудитория мы поддерживаем тебя и твои уроки я уже нескольким знакомом посоветовал твои видео все смотрят всем нравится надеюсь дальше будут подобного рода уроки про PYTHON JS JAVA C# и да сделай пж видео обучение с нуля по питону очень хочется научиться

[@AleksanderLamkov]

По другим направлениям не будет. Я только фронтендом занимаюсь :)

[@LEO-cu1fn]

@@AleksanderLamkov и ОТЛИЧНО ЗНАЕШЬ СВОЮ РАБОТУ некоторые теги или значение я вообще не знал а с твоими уроками теперь использую их так что спасибо 👌❤️

[@svitboomer8840]

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

[@AleksanderLamkov]

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

[@svitboomer8840]

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

[@alexb.2616]

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

[@Kino_moment_official]

Здравствуйте, можете помочь? не могу понять свойство border-box и его значение

[@AleksanderLamkov]

Привет! Эту статью читал уже? doka.guide/css/box-sizing/

[@Kino_moment_official]

@@AleksanderLamkov извините, нет, уже прочитал и понял, но сложно запомнить

[@evgeniy3370]

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

[@AleksanderLamkov]

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

[@hyperpocket.]

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

[@AleksanderLamkov]

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

[@tatelf]

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

[@AleksanderLamkov]

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

[@tatelf]

Спасибо!

[@tatelf]

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

[@AleksanderLamkov]

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

[@slamedesign]

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

[@ВиталийДавыдов-э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 Спасибо

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

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

[@Mai-z3f]

а почему так дизлайков много?

[@AleksanderLamkov]

Целых 0 шт?)

[@Mai-z3f]

@@AleksanderLamkov у меня разшырение стоиткоторое их вертает пишет 943

[@AleksanderLamkov]

Что-то не то с твоим расширением. На этом видео 457 лайков и 0 дизлайков.

[@Mai-z3f]

@@AleksanderLamkov что лутьше pnpm либо yarn?

[@AleksanderLamkov]

Сложно сказать. Мы на работе буквально недели две назад с Yarn на Pnpm перешли из-за его плоской структуры в node_modules. Пока кажется всё лучше. Быстрее устанавливаются зависимости и потенциально меньше конфликтов должно быть. Но у нас специфичный кейс - нужно было ускорить CI / CD. Для большинства разработчиков подойдет хоть классический npm, хоть yarn, да хоть bun 🙃