CSS фича #11 ➤ Подчеркивание ссылок | Links undeline before

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

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

  • @AK-it4nk
    @AK-it4nk 6 лет назад +30

    Лысый как всегда годноту запилил!

    • @postelb8046
      @postelb8046 6 лет назад +1

      Он мз браззерс?)

  • @ПятыйЭлемент-й1ф
    @ПятыйЭлемент-й1ф 6 лет назад +11

    Отличное начало с бинго бонго. Прям настроение на взлет)))))))) Урок как всегда на высочайшем уровне. Так держать.

  • @bonusdiez
    @bonusdiez 5 лет назад +3

    Красота! Пошел детей Вёрстке учить, пусть анимируют что хотят!!)) Спасибо, Артем!

  • @Vitya952
    @Vitya952 4 года назад +1

    Крутой урок! Не слушай, кому что не нравится, главное что всё понятно и интересно!

  • @yarjka6275
    @yarjka6275 4 года назад

    Боже, игрался с этими значениями полдня, чтобы всё было красиво. Нашёл твоё видео и сразу всё получилось. Постоянно у меня всё смещалось туда, куда не нужно было или же так, как не должно быть. Ты всё обьяснил, чтобы я не только понял, но и сделал сам, без видео, ибо понял это и понял ошибки ребят, которые давали инфу по подчеркиванию. Лучший!

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

    Большое спасибо! Очень понятно объясняешь материал!)

  • @dark_ff919
    @dark_ff919 2 года назад +1

    Спасибо большое

  • @RusOFslav
    @RusOFslav 6 лет назад +3

    Очень интересно тебя смотреть) Делай пожалуйста почаще эту рубрику. Очень круто !

  • @kri4evskiy
    @kri4evskiy 4 года назад

    Хорошая фича с появлением подчёркивания с одной стороны, а исчезновением в другую! Гуууууд)))
    Определённо лайк)

  • @ЕвгенийГамма-э4й
    @ЕвгенийГамма-э4й 6 лет назад

    Ждал долго. Артём. Спасибо вам большое. Долго ждали и продолжение вернулось. Спасибо так же за ссылки на удобный ресурс code-pen. Еще раз большое человеческое СПАСИБО за такой материал

  • @mister_robot01
    @mister_robot01 6 лет назад +2

    Топ, продолжай в том же духе! Дождался наконец)

  • @3dzbot
    @3dzbot 6 лет назад

    Шикарный эффект и прост в исполнении!

  • @ПростоЕвгений-е3б
    @ПростоЕвгений-е3б 6 лет назад

    Класс! Вроде реализовать ничего не стоит, а результат красивый...

  • @КАбрамян-ш4э
    @КАбрамян-ш4э 6 лет назад +7

    спасибо за урок )) кому интересно есть хороший библиотека для всяких анимации при наведении ianlunn.github.io/Hover/

  • @Yaleks91
    @Yaleks91 5 лет назад

    Коммент в поддержку рубрики)
    И ждем JS и jQuery

  • @flipper-limon
    @flipper-limon 6 лет назад +1

    элементарно и прекрасно)

  • @one-zero-dev
    @one-zero-dev 6 лет назад

    Артем, супер! Как всегда, огооонь!

  • @JavaScriptcher
    @JavaScriptcher 4 года назад

    Огонь!!!🔥🔥🔥🔥🔥

  • @tonit2237
    @tonit2237 5 лет назад

    Чётко! Прикольная фича) Лысый красава

  • @ЮрийПлисковский-щ4щ

    Отличное видео, просто и со вкусом.
    Ждём JS!

  • @JavaScriptcher
    @JavaScriptcher 2 года назад

    Пригодилось, спасибо!

  • @south_central
    @south_central 6 лет назад

    Чувак, этой теме 200 лет))) но полезно кто не умеет делать или впервые видит

    • @Glo_Academy
      @Glo_Academy  6 лет назад +2

      Я же не сказал "Эй, парни, смотрите что я только что придумал, такого еще нигде нет!"
      Я просто показал фичу. Кому-то зайдёт, кому-то нет.

  • @my-gamezone7470
    @my-gamezone7470 6 лет назад +16

    Сделал для бокового меню my-gamezone.ru
    Спасибо, Артем!!!

    • @GuiderWGM
      @GuiderWGM 6 лет назад +2

      Зачем же к "li" такой эффект применять, к "a" нужно, сейчас не очень выглядит

    • @my-gamezone7470
      @my-gamezone7470 6 лет назад

      там есть ссылки в 2-3 строки.. не думаю, что с ними красиво будет

    • @GuiderWGM
      @GuiderWGM 6 лет назад

      Сделайте только в 1ом меню

  • @happylife2345
    @happylife2345 6 лет назад

    Спасибо, за полезный контент!

  • @ДанилПостовой-е7б
    @ДанилПостовой-е7б 2 года назад

    Да пошла н"" эта подписчица ,не нравится как ты говоришь "вот эта история" , пусть не смотрит тогда
    Я уже какую неделю не отпускаю мысль о том ,чтобы написать об этом тебе ...
    Теперь спать буду спокойно наконец то
    У тебя отличный контент и подписоты будет куча !)

  • @vladimirgusev5616
    @vladimirgusev5616 5 лет назад +1

    Вот такая история )

  • @KlinovAS
    @KlinovAS 6 лет назад

    Идея прикольная, хотя не для борьбы за улучшения юзабилити, а чисто по красоте. Решил попробовать в качестве беграунда. Не добавляет отзывчивости. Убрал анимацию. Но было интересно. Спасибо что напомнил о псевдокласах. Недавно отличный чекбокс делал как в ios/android с их помощью.

  • @vazgenaleksanyan2929
    @vazgenaleksanyan2929 6 лет назад

    Спасибо Артем

  • @markbeldy
    @markbeldy 6 лет назад

    Большое спасибо за фичи,Артем. Слайдеры на чистом CSS не планируете сюда добавить?)

  • @smert-chekistam
    @smert-chekistam 3 года назад

    Вау!!

  • @ВладимирМестнник
    @ВладимирМестнник 6 лет назад

    Побольше фич пожалуйста.

  • @vli7857
    @vli7857 6 лет назад

    Интересно было бы бегущее пунктирное подчеркивание когда наводишь на ссылку

  • @michaelkamko
    @michaelkamko 11 месяцев назад

    Как быть с буквами,которые выпирают вниз? И как сделать, чтобы толщина подчеркивания была равной родному подчеркиванию?

  • @kstishko6771
    @kstishko6771 6 лет назад

    ТОП!

  • @deanArtDev
    @deanArtDev 6 лет назад

    Больше фич!!!

  • @Leather_Worker
    @Leather_Worker 6 лет назад

    Пригодится.

  • @LV-ik4rl
    @LV-ik4rl 6 лет назад

    Круто! А возможно сделать также с background? К примеру хочу такой переход в меню на сайте с фоном ) У самого не получилось так сделать

  • @awenn2015
    @awenn2015 4 года назад +1

    Жаль что нельзя замутить динамику , слева направо если ведем курсор направо и наоборд если ведем курсор налево, было бы вообще круто

  • @uzhas76064
    @uzhas76064 5 лет назад

    Кайф

  • @КириллГришин-и5л
    @КириллГришин-и5л 6 лет назад +1

    мне тут в контакте ваши курсы за 1.5к предлагали)))

  • @Vladikslavik
    @Vladikslavik 5 лет назад

    Можно и без псевдокласса запилить через паддинг и маджин боттом для тега .

  • @ivanubdw
    @ivanubdw 6 лет назад +4

    хех, так то фраза "такая история" как фишка, и так просто ее убирать - это не дело

  • @lockd0wnll178
    @lockd0wnll178 6 лет назад

    Cпасибо

  • @Dmitrii_M
    @Dmitrii_M 3 года назад

    Приветствую! А почему некоторые ссылки могут сами менять высоту (толщину линии)? 10 ссылок, а из них 8шт - 1px и 2шт - 2px.

  • @xxxan_official
    @xxxan_official 5 лет назад

    годно

  • @ottowebscripto
    @ottowebscripto 6 лет назад

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

    • @Glo_Academy
      @Glo_Academy  6 лет назад

      Уже есть: ruclips.net/p/PL3LQJkGQtzc56HquxrkwPdQt9Q1wHm21P

    • @ottowebscripto
      @ottowebscripto 6 лет назад

      Спасибо! =)

  • @my_coolheart
    @my_coolheart 6 лет назад

    лайк за Мезенцева)))

  • @Hotabich3
    @Hotabich3 6 лет назад +1

    Алабама!

  • @goldensauce9593
    @goldensauce9593 6 лет назад +10

    Жду jQuery фичи)))

    • @Glo_Academy
      @Glo_Academy  6 лет назад +2

      Скорее JavaScript фичи будут

    • @antonbodnia5788
      @antonbodnia5788 6 лет назад +1

      jQuery в 2018 году ?)))

    • @goldensauce9593
      @goldensauce9593 6 лет назад

      @@antonbodnia5788 Согласен! Буду ждать Vue JS фичи!)))

    • @antonbodnia5788
      @antonbodnia5788 6 лет назад +1

      это же был сарказм, правильно?))

  • @ramiskhizriev2077
    @ramiskhizriev2077 5 лет назад

    Нашел))) за дз щя базарить будем)

  • @aleksdobriy6941
    @aleksdobriy6941 6 лет назад +1

    Это все отлично, но как быть когда ссылки с текстом в 2 строки?)

    • @Glo_Academy
      @Glo_Academy  6 лет назад +1

      "никто на серьезных проектах так не делает" - wp-kama.ru/

    • @Glo_Academy
      @Glo_Academy  6 лет назад

      Konstantin Naumov ну судя по посещаемости сайта - это не маленькая лендосик)

  • @guentem
    @guentem 3 года назад

    А что делать, если у ссылки есть padding?

    • @michaelkamko
      @michaelkamko 11 месяцев назад

      Можно отступить на то же расстояние и все. Разве нет?

  • @ВладимирВладимир-ы8е

    а чего он из braZZers ушёл в it?или это хобби?

  • @kartofun3807
    @kartofun3807 2 года назад

    Мужчина, если ты верующий, то тебя в рай без очереди. Если нет, то за продуктами в магазине

  • @hjetwd
    @hjetwd 6 лет назад

    в чем разница между :bevore и ::bevore ?

    • @silencesir
      @silencesir 6 лет назад +2

      ::before а не ::bevore, будьте внимательны. В современных браузерах работать будут оба варианта (с одним двоеточием, и с двумя) Просто первый вариант (с одним) это устаревшее написание, из стандарта css 2.1, а с двумя-новое, общепринятое из css 3.0

  • @RaTeNLeW
    @RaTeNLeW 6 лет назад

    Сразу баг в IE фиксите)

  • @dkdragon777
    @dkdragon777 6 лет назад +1

    отличный урок! вот сайт где используется этот эффект: www.wrayward.com/#_5b7d9a642b286

  • @УлугбекИбрагимов-г1я

    Артем, ты можешь сделать и показать как сделать красивый header с изображение на весь экран, с элементами поверх него (формы, записи что из этого) и navbar'ом сверху. Не просто показать а именно как сделать это правильно.
    Буду очень благодарен если сделаешь.

  • @skr6760
    @skr6760 5 лет назад

    Что такое before?

  • @toms_ekb
    @toms_ekb 3 года назад

    *Проверка*

  • @toms_ekb
    @toms_ekb 3 года назад

    _Проверка1_

  • @gavrikov29
    @gavrikov29 6 лет назад

    codepen.io/sergey-gavrikov/pen/mKRZYz
    Не понятно только как сделать такой эффект для многострочной ссылки, вот например тут arctic.narfu.ru

  • @toms_ekb
    @toms_ekb 3 года назад

    -Проверка2-

  • @toms_ekb
    @toms_ekb 3 года назад

    *_Проверка3_*

  • @ОлегБыков-р3с
    @ОлегБыков-р3с 5 лет назад +1

    не говори "вот эту историю"

    • @Glo_Academy
      @Glo_Academy  5 лет назад +3

      Спасибо за совет, но я продолжу

    • @shahbozrazzoqov
      @shahbozrazzoqov 3 года назад +1

      @@Glo_Academy Да какая разница, что вы говорите! Главное - мы изучаем! Говорите что хотите)

  • @lush7728
    @lush7728 6 лет назад

    У меня почему-то не работает, все так же как и у вас написал..
    codepen.io/Ilya_Darik/pen/aabxRy

    • @Dima_Afanasiev
      @Dima_Afanasiev 6 лет назад

      у тебя ошибки в коде. и Id менять на клас
      с нужно

    • @Dima_Afanasiev
      @Dima_Afanasiev 6 лет назад

      body {
      font-family:sans-serif;
      }
      .link {
      margin:auto;
      width:80%;
      }
      a {
      text-decoration: none;
      position: relative;
      }
      .link a::before {
      content: '';
      left:0;
      bottom:0;
      position: absolute;
      width:0%;
      height: 2px;
      background:#000;
      transition:0.5s;
      }
      .link a:hover::before {
      width:100%;
      }

    • @Dima_Afanasiev
      @Dima_Afanasiev 6 лет назад +1

      и пиши правильно слова на еng