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

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 พ.ย. 2024

ความคิดเห็น • 39

  • @smotritelyoutube
    @smotritelyoutube ปีที่แล้ว +10

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

  • @Павел-у5р5б
    @Павел-у5р5б 3 หลายเดือนก่อน +5

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

  • @svitboomer8840
    @svitboomer8840 ปีที่แล้ว +10

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

  • @w0rsttttt
    @w0rsttttt 10 หลายเดือนก่อน +4

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

  • @alexb.2616
    @alexb.2616 ปีที่แล้ว +2

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

  • @ДиляраЗубарева-й1о
    @ДиляраЗубарева-й1о 3 หลายเดือนก่อน +3

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

  • @АлинаДобрынина-с4р
    @АлинаДобрынина-с4р 8 หลายเดือนก่อน +2

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

    • @AleksanderLamkov
      @AleksanderLamkov  8 หลายเดือนก่อน +1

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

  • @slamedesign
    @slamedesign หลายเดือนก่อน +1

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

  • @Ксюша-з4и
    @Ксюша-з4и 4 หลายเดือนก่อน +2

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

  • @colodatwin3102
    @colodatwin3102 ปีที่แล้ว +3

    The lesson is very useful , thank you!

  • @LAMit
    @LAMit 2 หลายเดือนก่อน +1

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

  • @Ivanfwit
    @Ivanfwit ปีที่แล้ว +1

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

  • @alenache1
    @alenache1 ปีที่แล้ว +3

    огонь 🔥🔥🔥

  • @idcwhrejustfar
    @idcwhrejustfar 2 หลายเดือนก่อน +1

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

  • @svitboomer8840
    @svitboomer8840 ปีที่แล้ว +1

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

    • @AleksanderLamkov
      @AleksanderLamkov  ปีที่แล้ว +4

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

    • @svitboomer8840
      @svitboomer8840 ปีที่แล้ว +6

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

    • @alexb.2616
      @alexb.2616 ปีที่แล้ว

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

  • @tatelf
    @tatelf 8 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  8 หลายเดือนก่อน

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

    • @tatelf
      @tatelf 8 หลายเดือนก่อน

      Спасибо!

    • @tatelf
      @tatelf 8 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  8 หลายเดือนก่อน +1

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

  • @slamedesign
    @slamedesign หลายเดือนก่อน

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

  • @ПрограммаКомпьютер
    @ПрограммаКомпьютер 8 หลายเดือนก่อน +1

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

    • @MrEnderman_YT
      @MrEnderman_YT 8 หลายเดือนก่อน

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

  • @hyperpocket.
    @hyperpocket. หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  หลายเดือนก่อน +1

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

  • @evgeniy3370
    @evgeniy3370 5 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  5 หลายเดือนก่อน +1

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

  • @ВиталийДавыдов-э4г
    @ВиталийДавыдов-э4г 8 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  8 หลายเดือนก่อน +1

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

    • @ВиталийДавыдов-э4г
      @ВиталийДавыдов-э4г 8 หลายเดือนก่อน

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

    • @ВиталийДавыдов-э4г
      @ВиталийДавыдов-э4г 8 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  8 หลายเดือนก่อน +1

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

    • @ВиталийДавыдов-э4г
      @ВиталийДавыдов-э4г 8 หลายเดือนก่อน

      @@AleksanderLamkov Спасибо

  • @MrEnderman_YT
    @MrEnderman_YT 8 หลายเดือนก่อน

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

    • @AleksanderLamkov
      @AleksanderLamkov  8 หลายเดือนก่อน +1

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