CSS полезные свойства: clip-path, perspective, filter, line-clamp

Поделиться
HTML-код
  • Опубликовано: 10 дек 2024

Комментарии • 33

  • @semka-tesemka
    @semka-tesemka 24 дня назад +1

    Видео и подача понравилась. Спокойно и ясно. Спасибо

  • @styxrus
    @styxrus 11 месяцев назад +1

    Спасибо! line-clamp просто спас. Не нужно задавать фиксированную ширину, как при подходе с white-space: nowrap; text-overflow: ellipsis;

  • @Anatoli-bq1pe
    @Anatoli-bq1pe 5 месяцев назад +1

    Благодарю за классное видео!

    • @PurpleSchool
      @PurpleSchool  5 месяцев назад

      @@Anatoli-bq1pe пожалуйста!

  • @роматарасов-о8л
    @роматарасов-о8л Год назад +1

    хорошое видео
    особенно полезен line-clamp

  • @lvivduncan
    @lvivduncan Год назад +3

    9:48 transition

    • @EvgeniyGetman-t3u
      @EvgeniyGetman-t3u Год назад

      Нужно было уточнить, что вместо transition автор написал transform

  • @pep421
    @pep421 Год назад +1

    Супер, спасибо за вашу работу.

  • @KaynJS
    @KaynJS Год назад +2

    Офигенно, спасибо!

  • @HIghtowerSever
    @HIghtowerSever Год назад +1

    Спасибо. Круто!

  • @fergussawyer
    @fergussawyer Год назад +1

    Спасибо за твой труд!

    • @PurpleSchool
      @PurpleSchool  Год назад +1

      Рад, что вам полезно

  • @gorbulevsv
    @gorbulevsv Год назад +1

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

  • @АнтонИванов-т4р3г
    @АнтонИванов-т4р3г 8 месяцев назад +1

    Тема clip-path развернута не до конца. Если коротко, можно создать сколь угодно сложный контур в svg, а потом через clip-path обрезать по нему блоки. Но тут есть три важных условия:
    1) svg контур должен находиться в разметке и иметь соответствующий атрибут для обрезки через css.
    2) Этот svg элемент должен быть отрендерен (т.е. скрыть через display:none его нельзя)
    3) Если вы хотите, чтобы при изменении размера блока, контур подстраивался под его размеры, растягиваясь и сжимаясь - вам нужно использовать относительную систему координат SVG, для этого в интернете конвертеры есть

    • @PurpleSchool
      @PurpleSchool  8 месяцев назад

      Спасибо за дополнение

  • @MrBenedig
    @MrBenedig Год назад +1

    Спасибо! clip-path сейчас понадобится

  • @Gluhonemou
    @Gluhonemou Год назад +1

    Как при одном hover задать разные стили для разных элементов ?
    Например я хочу что-бы когда я наводил на карту товара, карта приближалась, а весь фон, позади карты, был в эффекте blur.
    Этого можно добиться на чистом css?
    Заранее спасибо за ответ :)

    • @PurpleSchool
      @PurpleSchool  Год назад

      Конечно, для этого можно использовать выбор по условию, если наведён, у меня есть видео про is и where: ruclips.net/video/TSbSgcATt28/видео.htmlsi=uExLTVLbhfeLeY3A

  • @artembrovko4901
    @artembrovko4901 Год назад

    Добрый день, подскажите пожалуйста будет ли ваш курс по Kubernetes на Udemy?

    • @PurpleSchool
      @PurpleSchool  Год назад

      Пока не планирую. Можно купить на моем сайте оплатив любой картой

  • @daniil2704
    @daniil2704 Месяц назад

    Последнее свойство забавно, что его поддерживают все и уже давно, хром и сафари с 2010 года, а лиса с 2019, но при этом до сих пор зачем то этот префикс 🥲

    • @daniil2704
      @daniil2704 Месяц назад

      Оказывается его таки стандартизировали и вероятно будет работать без -webkit-. Вот открывок из MDN:
      Примечание. Это свойство изначально было реализовано в WebKit и имеет некоторые проблемы, например зависимость от двух других устаревших свойств. Он был стандартизирован в модуле CSS Overflow уровня 4 для поддержки устаревших версий. Модуль CSS Overflow уровня 4 также определяет свойство line-clamp, которое предназначено для замены этого свойства и предотвращения его проблем. Однако все браузеры, поддерживающие line-clamp, также будут поддерживать -webkit-line-clamp по соображениям совместимости.

  • @LeviofanD
    @LeviofanD Год назад

    В фильтр не трансформ а транзишн)

  • @David-Freeman
    @David-Freeman Год назад +1

    "сегодня ... я буду работать в VSCode" Браво. Перестали выглядеть умником🙂

    • @PurpleSchool
      @PurpleSchool  Год назад +2

      Для курсов и видео для новичков я всегда использую VSCode, а для реальной работы Nvim