Новый CSS! 2024

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

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

  • @Howtogoit
    @Howtogoit  4 месяца назад +1

    Профсоюз:
    tables-pay-3ci.craft.me/5FBOJ6EJjuieDF
    Поддержка канала:
    Рос. карты через Boosty - boosty.to/it_union
    Любые карты через telegram - t.me/howToLearnIT
    Телеграм:
    t.me/howToLearnIT
    0:00 Введение
    0:04 Дискретные свойства
    5:06 Анимация вычисляемых значений
    7:19 Бесплатный профсоюз айтишников
    7:51 Motion Path
    9:35 Контейнерные стилевые запросы
    12:57 text-wrap: pretty
    13:23 Hanging punctuation
    13:56 Initial-letter
    14:10 light-dark
    15:49 Stepped value functions
    16:47 Exponential Functions
    17:10 Sign-Related Functions
    17:40 Резюме
    Ссылки:
    1. Новинки CSS и HTML! 2023
    ruclips.net/video/YFDKCAksZWw/видео.html
    2. Прошлый ролик, где рассказываю про палитру
    ruclips.net/video/Z_8s7hV7GlI/видео.html
    #css #html #frontend #javascript

  • @ilyasanders4169
    @ilyasanders4169 4 месяца назад +6

    Спасибо за то что держите в курсе

  • @IharPozirk-l8o
    @IharPozirk-l8o 2 месяца назад

    Прям всё чётко, спасибо
    Про дискретным свойства- вообще топ

  • @max_mgtow
    @max_mgtow 4 месяца назад +2

    Приветствую! Ждал твоё видео)
    Спасибо за новости 🤝👍

  • @harry_barry_li
    @harry_barry_li 2 месяца назад

    Спасибо 🙏 очень полезно ❤

  • @divside
    @divside 4 месяца назад +6

    Теперь я программирую на CSS

  • @railbatyrshin7349
    @railbatyrshin7349 4 месяца назад +3

    Спасибо большое за полезный контент

  • @dkuba
    @dkuba 4 месяца назад

    Просто пушка видео!🔥

  • @postoronny
    @postoronny Месяц назад +1

    Короче, CSS скоро превратится в гигантский "фреймворк", весящий 100500 гигатонн...

  • @awtozapchasti
    @awtozapchasti 4 месяца назад +13

    Все еще бытует мнение, что проще всего залететь в IT, через фронтенд 😂

    • @VeihShizoo
      @VeihShizoo 3 месяца назад +2

      Так оно так и есть

    • @georgevonfloydmann1797
      @georgevonfloydmann1797 3 месяца назад +2

      Объективно легче всего через фронт енд

    • @ш8л8м-ш8бб8т
      @ш8л8м-ш8бб8т 2 месяца назад

      ​@@VeihShizoo додо, вот бы браузеры везде лдиноково обрабатывали, вот бы мобилки работали хотябы предсказуемо, вот бы не было всякой другой тысячкой шелухи

    • @VeihShizoo
      @VeihShizoo 2 месяца назад

      @@ш8л8м-ш8бб8т дя, нюнюню. Я вабсцеееее в афиге как Ти вызиваес , ну я прям не магу, так слозна работат шо капес. Я как об этом задумався так сразу фсо, помираю. Это зе так слознааааа, ну я прям ни магу, в афиге сизу

  • @I_am_a_programmer
    @I_am_a_programmer 4 месяца назад

    Ура наконец-то то что нужно в css

  • @chirkov
    @chirkov 4 месяца назад +1

    Господи наконец то анимация height в аккордионах стала проще, не прошло и 100 лет

  • @phobos927
    @phobos927 3 месяца назад +2

    round (0.05rem,1px) - по мне так прекрасно сработает в случае маленьких векторных иконок. к примеру на каком-то разрешении у вас получается что 0.05rem = 0.98px, в результате браузер все это зарендерит оч криво-косо, а в случае с экранами с маленькой плотностью пикселей, это будет выглядеть мутно или некорректно мелко, а вот такая фича с округлением в теории должна исправить кривые ситуации. PS но это в теории, на практике еще не проверял.

    • @Disorrder
      @Disorrder 3 месяца назад

      Что за иконка в 1 пиксель?))

    • @phobos927
      @phobos927 3 месяца назад +1

      @@Disorrder да я образно, имел ввиду, что размер иконки не кратный одному пикселю) ну типо 13.67px? вычисляемый размер какой-нибудь при rem зависимым от vw. PS кстати я протестировал то что описывал ранее, округлять округляет, но вот всякие тонкие линии все равно шакалит) Например какая-нибудь буква "Е" или символ на нее похожий в векторе, если линии тонкие, типо 1-3 пикселя, а ширина по дефолту пикселей 10, вот начни ее ресайзить по ширине и горизонтальные линии начнет шакалить.

  • @firiasu
    @firiasu 4 месяца назад +1

    16:54 Эй, Лера!

    • @Skalebro
      @Skalebro 4 месяца назад

      Эй, Арнольд!

  • @Disorrder
    @Disorrder 3 месяца назад +1

    Я так подозреваю, что всякие математические функции чаще всего будут полезны для анимации по траекториям. Может, для отрисовки 3д через css, без js это пока очень сложно. В остальной жизни это особо и не надо.

  • @osad4enko
    @osad4enko 4 месяца назад +18

    Как выйти из айТи 😮😮😮😮

    • @braivs
      @braivs 4 месяца назад +3

      через вэбкам или закладки)

    • @Templier-
      @Templier- 3 месяца назад

      ​@@braivs😂

  • @snatvb
    @snatvb 4 месяца назад +37

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

    • @blatov
      @blatov 4 месяца назад +1

      в scss есть уже

    • @DubinArtur
      @DubinArtur 4 месяца назад

      Так условия уже есть, в ролике)

    • @astkh4381
      @astkh4381 4 месяца назад

      @@blatovдальше что? css нативный, а scss препроцессор.

    • @snatvb
      @snatvb 4 месяца назад

      @@blatov это не css :)

    • @snatvb
      @snatvb 4 месяца назад

      @@DubinArtur ну они такие, на пол шишечки)

  • @trykoo
    @trykoo 4 месяца назад

    Отлично, осталось подождать лет 20 пока это можно будет использовать в проде

    • @alexperemey6046
      @alexperemey6046 3 месяца назад

      5 лет достаточно, да и полифиллы никто не отменял.

  • @donjuanfamily1128
    @donjuanfamily1128 4 месяца назад +2

    Это сколько лет им понадобилось, чтобы добавить поддержку анимации адаптивных размеров ? 🤔

  • @realfootball338
    @realfootball338 4 месяца назад

    Твой костыль под капотом анимирлвания ngIf в Angular

  • @igorkl5167
    @igorkl5167 3 месяца назад

    CSS++

  • @BearVodkaAndValenki
    @BearVodkaAndValenki 4 месяца назад

    Спасибо! Мне, как css-программисту, было очень интересно узнать что-то революционно новое)

  • @serial1014
    @serial1014 4 месяца назад

    А есть ссылочка на оф документацию, хотелось бы самому почитать и поковыряться с этим

  • @dd95-5
    @dd95-5 3 месяца назад +1

    не "энчер", а энкор, по русски анкер(якорь)

  • @ivanzhuro
    @ivanzhuro 4 месяца назад

    ничего не понятно, но очень интересно

  • @Atractiondj
    @Atractiondj 4 месяца назад +1

    Я не согласен с мнением, что для заголовков нужно ставить balance и только на body text pretty... pretty как раз таки работает как типограф, а balance работает ок только для заголовков до 65 символов и как было упомянуто в ролике допускает сирот...

    • @senya_kolkij
      @senya_kolkij 4 месяца назад

      ёпта расскажите моему дезигнеру. проще br задисплейнанить

  • @IgorNovakus
    @IgorNovakus 3 месяца назад

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

    • @alexperemey6046
      @alexperemey6046 3 месяца назад

      Я иногда сталкиваюсь с необходимостью делать вещи под Сафари 10 и подобное, и могу сказать, что это очень хорошо, что столько ее выходит. Оно постепенно накапливается и по сравнению с тем, что было раньше, намного легче делать красивые интерфейсы становится.

  • @TipAnswer
    @TipAnswer 3 месяца назад

    Кто-то может обьяснить почему работает анимация в таком случае ?
    .content {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    padding: 5px;
    color: #1f002b;
    border: 1px solid #1f002b;
    }
    .content:not(.hidden) {
    animation-name: openingAnimation;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    }
    @keyframes openingAnimation {
    0% {
    display: none;
    opacity: 0;
    }
    100% {
    display: block;
    opacity: 100%;
    }
    }
    .content.hidden {
    animation-name: hidingAnimation;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    display: none;
    }
    @keyframes hidingAnimation {
    0% {
    opacity: 100%;
    display: block;
    }
    100% {
    opacity: 0;
    display: none;
    }
    }

    • @get-web
      @get-web 3 месяца назад

      Потому что это анимация, как раз костылями на анимациях и закрывают все, что не работает при помощи transition. И в самом видео речь о transition, при чем без повышения специфичности дополнительными селекторами.

  • @АрзуманАлиев-р2о
    @АрзуманАлиев-р2о 4 месяца назад

    Css v34

  • @senya_kolkij
    @senya_kolkij 4 месяца назад

    красиво стелишь фраерок, только юзкейсов нет, а поддержка сказанного минимальна

  • @klich3
    @klich3 3 месяца назад +1

    Короче css теперь JavaScript 😂

  • @sanja816816
    @sanja816816 4 месяца назад +1

    Зачем вообще про что либо рассказывать если нет поддержки 98%

    • @SARDARru
      @SARDARru 3 месяца назад +2

      Затем, что даже имея поддержку 80% ты можешь использовать, и код будет для тебя короче и легче чем на js писать. А у кого не работает поддержка, будет работать просто без анимации, что вообще не страшно. А для тебя все проще становится.

    • @opt11misst28
      @opt11misst28 3 месяца назад

      Пусть нормальные браузеры ставят

    • @get-web
      @get-web 3 месяца назад

      Не хочешь знать, не смотри. Тебя заставляют?

    • @alexperemey6046
      @alexperemey6046 3 месяца назад

      Ну, как минимум под такие вещи выходят полифиллы. В результате чего спокойно используешь и не паришься.

  • @musicchill7008
    @musicchill7008 4 месяца назад

    Найс канал про програмировние, последние видосы только про HTML і CSS

    • @chirkov
      @chirkov 4 месяца назад +1

      Ну дак посмотри старые видосы о JS. То, что он рассказывает о новом в HTML и CSS нет ни на одном канале в ру сегменте

    • @ВладиславБирюков-ш5э
      @ВладиславБирюков-ш5э 4 месяца назад

      это канал про frontend. Чудила ты глупая

  • @ХакерХакеров-м6и
    @ХакерХакеров-м6и 4 месяца назад

    привет css прощай js

  • @smoke2638
    @smoke2638 3 месяца назад

    🤮

  • @crypto_has_you
    @crypto_has_you 3 месяца назад

    Прети?! Что дальше? Сокиабле?

  • @javascript.frontend
    @javascript.frontend 4 месяца назад +1

    отдам свой аккунт на фулстака в goit
    ушел в изучение линукса и сетей