Простые табы на HTML и CSS. Как это сделать?

Сегодня я решил показать и рассказать как сделать простые табы (вкладки) используя только HTML и CSS. В уроке показаны интересные решения включающие псевдокласс target и свойство text-overflow.
🔴 Результат урока fls.guru/howtodoit/howtodoit_1...
☝️ Внимание, это примитивное решение с рядом недостатков. Используйте только там где оно достаточное.
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

Пікірлер: 319

  • @pepelac128
    @pepelac1284 жыл бұрын

    Вангую курсы JS от Евгения: Начало 1. Нафиг js - делаем всё при помощи css! Конец.

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Ахахах)) Если бы))

  • @user-bz5hl1tk1r

    @user-bz5hl1tk1r

    4 жыл бұрын

    Не, ну а если можно не извращаться и сделать проще, это ж классно. А js оставить на более сложные случаи.

  • @tyafizi

    @tyafizi

    3 жыл бұрын

    Так да. Всё что можно делать через css - желательно делать через него. Так будет более производительно

  • @elenavolkova5950
    @elenavolkova59504 жыл бұрын

    Постоянно захожу посмотреть не пропал ли ты. Так вот, не пропадай, видосики огонь

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Я тут) спасибо!

  • @fN9ne
    @fN9ne4 жыл бұрын

    Спасибо парень! Начинаю только изучать Html и Css, в связи с этим искал на разных источниках, как сделать табы. Мало того, что ничего не понятно, так и ещё и не получается по ним сделать всё качественно. Ты всё чётко и ясно объяснил, ещё раз спасибо. Продолжай выпускать контент в том же ключе!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @user-lt5is3do2d
    @user-lt5is3do2d4 жыл бұрын

    Огромное спасибо за полезную информацию и приятную манеру подачи материала. Настроение поднимаешь 😘

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо, стараюсь!

  • @ffedchik
    @ffedchik4 жыл бұрын

    Для меня, как для подписчика и зрителя контента Жеки, рубрика "Как это сделать?" - скорее звучит как "Учиться - так взахлеб".

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо! Я рад!

  • @lera6580

    @lera6580

    4 жыл бұрын

    100%))) я так сериалы не смотрела, как за Женей наблюдаю. вот все феномен не могу понять... дико круто, что еще и Автор в видео - это точно. ну и подача мега-крутая. Многое смотрю даже из того, что применяю давно и нахожу новые "ништяки") откуда Евгений взялся вдруг в этом хаосе ... надо поддерживать всем, чем можешь, вангую Евгению большие успехи.

  • @user-ej2cx5ig9d
    @user-ej2cx5ig9d4 жыл бұрын

    Всё гениальное, просто и доступно, как бы сложно, оно не было выполнено! Благодарю!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @FreelancerLifeStyle
    @FreelancerLifeStyle4 жыл бұрын

    Результат урока fls.guru/howtodoit/howtodoit_12.zip Напоминаю, это примитивное решение с рядом недостатков. Используйте только там где оно достаточное. Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle Telegram чат по верстке: t.me/flschat (teleg.run/flschat) Instagram: instagram.com/freelancer.lifestyle/ Facebook: facebook.com/freelancerlifestyle/

  • @777bujhm
    @777bujhm4 жыл бұрын

    Спасибо Женя! очень круто, ты как всегда полон крутых идей, желаю что бы твой канал развивался и распространялся как микробы))) то есть очень быстро и стремительно, очень жду от тебя JS, удачи тебе!!!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо!

  • @zmeygorynych5684
    @zmeygorynych56843 жыл бұрын

    Как всегда круто и полезно) Без всякой фигни, плюс круто тем, что обходимся более простыми средствами.

  • @user-kv5ze5qc2b
    @user-kv5ze5qc2b Жыл бұрын

    Спасибо за качественные уроки! Ты помогаешь становиться людям лучше 🙌

  • @hamzatpadiev627
    @hamzatpadiev6273 жыл бұрын

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

  • @user-ki5bm5ku7j
    @user-ki5bm5ku7j4 жыл бұрын

    Качественный контент, спасибо. Будем учиться, глядишь что получится))

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Все получится!

  • @user-ut3up9fc2n
    @user-ut3up9fc2n4 жыл бұрын

    Молодец Жека! Только начал смотреть этот видос и сразу лайк. Потому что знаю, будет информативно и понятно

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо!

  • @user-jz5cd5uu8w
    @user-jz5cd5uu8w Жыл бұрын

    Добрый день! Благодарю, Женя, за полезный функционал и понятное объяснение! Успехов, профессиональных и личностных достижений, развития каналу и новых подписчиков! 👍🤝🙂

  • @sultan_243
    @sultan_2434 жыл бұрын

    Не перестаешь удивлять, так держать Евгений)

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо!

  • @user-mi4ms5be1o
    @user-mi4ms5be1o2 жыл бұрын

    За text-overflow отдельная благодарность.

  • @Medulla_oblongata01
    @Medulla_oblongata012 жыл бұрын

    отлично и просто! смотрел в инете про эти табы, все так сложно, а у тебя бац-бац и готово! так держать!!

  • @Dmitryderzhawin
    @Dmitryderzhawin4 жыл бұрын

    Как всегда красавчик, как всегда лайк. Спасибо тебе огромное что занимаешься этим делом!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо!

  • @user-nb8ex1tq6r
    @user-nb8ex1tq6r4 жыл бұрын

    Как всегда на высоте! Отличный видос! :)

  • @kotlancer
    @kotlancer4 жыл бұрын

    Великолепно! Век живи - век учись. Огромное спасибо)

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо!

  • @pepelac128

    @pepelac128

    4 жыл бұрын

    И дураком помрешь

  • @user-sr9ic1jy5p
    @user-sr9ic1jy5p3 жыл бұрын

    В коде переместить кнопки под табы (и вынести их из контейнера nav), флексом переместить их вверх, а стиль активной кнопки таба тогда можно задавать через селектор #tab01:target~[href^=“#tab01”] {...} Тогда в мобильней версии кнопки можно вытянуть на всю длину и весь текст будет виден.

  • @denisshoemaker3880
    @denisshoemaker38803 жыл бұрын

    Как всегда просто ОГОНЬ!!!!! Спасибо!!!

  • @user-nu3iw9po7z
    @user-nu3iw9po7z3 жыл бұрын

    Большое спасибо тебе за твою работу на YouTybe!!!! Мне очень нравятся твои видео. С твоей помощью я быстро и эффективно изучаю необходимые мне азы для работы front-end разработчиком))))) Желаю тебе увеличение канала и новых идей)

  • @user-wf4np1ne2c
    @user-wf4np1ne2c4 жыл бұрын

    Спасибо ЖЕКА!! Очень актуальный и полезный урок)))

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @MegaTesei
    @MegaTesei3 жыл бұрын

    Крутяк. Здорово. Удивился тому, что можно обойтись вез ява скрипта! Лойс!

  • @stanislavafanasiev5766
    @stanislavafanasiev57663 жыл бұрын

    Это шикарно) просто и элегантно

  • @kostrik6278
    @kostrik62783 жыл бұрын

    С относительно новым тегом делать табы и разворачивать описание стало намного быстрее и проще

  • @vitaliyyasinskiy3689

    @vitaliyyasinskiy3689

    3 жыл бұрын

    интересно, никогда его не использовал

  • @romaibragimov9872
    @romaibragimov98723 жыл бұрын

    Спасибо большое за полезную информацию!

  • @user-vk1kb3xj6b
    @user-vk1kb3xj6b4 жыл бұрын

    Жека, спасибо за годноту!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @nabi8297
    @nabi82973 жыл бұрын

    Спасибо за мастер класс!!!

  • @enenotowitch628
    @enenotowitch6284 жыл бұрын

    Супер! Ждем чистый JS!) Спасибо за труды!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @fbr_xsfbr_xs2271
    @fbr_xsfbr_xs22714 жыл бұрын

    Видео бомба. Канал бомба. Просто уважение и лайк. Было бы ещё хорошо, если бы подсказки писал бы и в css

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо! Что-то придумаю

  • @user-cs5zp9rv9c
    @user-cs5zp9rv9c4 жыл бұрын

    Спасибо тебе за уроки!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @androideasycoding
    @androideasycoding3 жыл бұрын

    Очень суперовое видео. Подскажите пожалуйста а как сделать что бы табы переносились на строку ниже? Для трёх вкладок вариант отличный но если будет больше 10 вкладок то этот вариант попросту не подходит.

  • @user-ob4jp1mq9u
    @user-ob4jp1mq9u3 жыл бұрын

    Spasibo za kachestvenniy kontent)

  • @user-qb1sc3vx4e
    @user-qb1sc3vx4e2 жыл бұрын

    Супер объяснения, как раз хотел что то сделать с табами

  • @user-jo7pj2zy2l
    @user-jo7pj2zy2l4 жыл бұрын

    Как сделать сразу чтоб 1 таб был открыт, без дополнения ссылки?

  • @smert-chekistam

    @smert-chekistam

    2 жыл бұрын

    Всё же объяснили на последней минуте!

  • @ilgizreklama

    @ilgizreklama

    Жыл бұрын

    input type="radio" лучше использовать если какой то блок при переходе на страницу должна быть открыта

  • @user-sq3bk1zc6b
    @user-sq3bk1zc6b4 жыл бұрын

    Делал подобное через JavaScript, ибо не знал про такой метод. Спасибо, очень интересно!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @user-ez9cu1gi4v
    @user-ez9cu1gi4v4 жыл бұрын

    Вот опять моя капилочка знаний немного наполнилась, спасибо !!!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @alex45779
    @alex457793 жыл бұрын

    Все видео очень актуальны!

  • @user-vv7pc6rk5m
    @user-vv7pc6rk5m3 жыл бұрын

    Очень полезно и познавательно.

  • @denissycheuski6370
    @denissycheuski63704 жыл бұрын

    Спасибо, супер урок)!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @user-ns2tx6oc4q
    @user-ns2tx6oc4q3 жыл бұрын

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

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    3 жыл бұрын

    Пунтосвитчер

  • @Sergey-rn2hj
    @Sergey-rn2hj3 жыл бұрын

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

  • @playrun3077
    @playrun30774 жыл бұрын

    *Как всегда крутое видео!!! Но есть вопрос:* *Как можно заменить теги , чтобы при большом контенте не было такого, что при нажатии на псевдоэлемент :before не опускалась страница вниз к самим tabs__block'ам, а оставалась на месте для удобства использования?*

  • @auditore_1459

    @auditore_1459

    3 жыл бұрын

    к сожалению, это невозможно именно при этом способе осуществления. дело в том, что кнопки "первая вкладка" и т.д. являются ссылками, которые при нажатии отправляют нас туда, куда указывает их атрибут href. таким образом, при нажатии на эти ссылки браузер отправляет нас к самой "цели" и показывает эту цель в самом верху экрана. я очень надеюсь, что я ошибаюсь и Евгений скажет, что это очень просто исправляется. до сих пор я осуществлял все это на jQuery, что снимало указанную проблему) Евгению огромное спасибо за его труд. слежу, смотрю, наслаждаюсь и учусь тому, чего не знаю. просто, без замудренностей. шикарно, благодарю)

  • @BboyMidnigth

    @BboyMidnigth

    Жыл бұрын

    @@auditore_1459 Столкнулся с такой же проблемой. Скажи как ты через jQuery убрал эту проблему??

  • @auditore_1459

    @auditore_1459

    Жыл бұрын

    @@BboyMidnigth стоит повесить событие click() на вкладку и добавлять класс active, например, к нужной. и, соответственно, к ее контенту. на вкладку можно повесить атрибут data-target, чтобы прямо из ее данных находить требуемый контент. перед добавлением класса нужно почистить ВСЕ вкладки и ВЕСЬ контент от класса active. грубо говоря, сначала закрываем все, потом открываем нужную

  • @lunasvetdebil5979
    @lunasvetdebil5979 Жыл бұрын

    Благодарю за подробные и понятные уроки, второй раз уже спасаете личинку фронтендера

  • @brodyagaPATY
    @brodyagaPATY4 жыл бұрын

    Спасибо за урок👍🚀🚀🚀

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @user-pn2ev2je2l
    @user-pn2ev2je2l4 жыл бұрын

    Благодарю Вас за видео.

  • @user-qq1ig7jf5k
    @user-qq1ig7jf5k4 жыл бұрын

    Подписался на канал. Очень понравился стиль изложения материала, доступность, дикция ведущего, легкость подачи. И сразу возникает вопрос - Евгений, есть ли у вас видео на тему создания форм с вспомогательными формами выбора значений? Это когда, например, в форме есть два поля: "Водитель" "Номер автомобиля" При этом значения этих полей заполняются пользователем не с клавиатуры, а выбираются из списков, открывающихся в отдельном вспомогательном окне (так называемой форме выбора), как из справочника. Или хотя бы, в сторону какой технологии покопать, чтобы такое реализовать (именно с точки зрения верстки)?

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо! Такого случая еще небыло

  • @zmeygorynych5684
    @zmeygorynych56843 жыл бұрын

    Годный видос!!!)))хотелось бы еще какие-то сложные решения по табам, c чистым js, я думаю многие поддержат

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    3 жыл бұрын

    Сделаю!

  • @odduck41
    @odduck412 жыл бұрын

    А что за расширение для VScode у вас стоит, которое показывает результат работы?????

  • @user-jy9sq8un6r
    @user-jy9sq8un6r4 жыл бұрын

    Решение конечно интересное и понимаю, что вариант для наглядности сделал, но думаю при малом разрешении уместно было бы и информативные иконки с названием вкладки юзать для такого подхода, или же вообще чтобы они заменяли текст полностью). А вообще спасибо за такой информативный контент, очень крутой! Надеюсь к концу 20-го 100к подписчиков наберёшь на волне хайпа IT и фронтенда).

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо, я тоже надеюсь)

  • @MrAlexander88m

    @MrAlexander88m

    4 жыл бұрын

    Сейчас хайп в машинном обучении. Весь этот фронтенд нахрен никому не нужен будет через пару лет ибо ИИ уже умеет верстать легкие макеты. Скоро фронтенд разработчики нахрен никому не нужны будут, так что учите бакенд или что-нибудь поинтереснее.

  • @user-qq1ig7jf5k

    @user-qq1ig7jf5k

    4 жыл бұрын

    @@MrAlexander88m Понятно, что станет не нужен, но понимание того, "как это работает" еще никогда и никому не мешало в любом деле.

  • @cryfos

    @cryfos

    4 жыл бұрын

    ​@@MrAlexander88m вот только что будет при наполнении контентом крупного проекта сетевого магазина, владелец которого решил все переиначить на свой "дизайнерский вкус" при помощи не ИИ, а при помощи индийский ребят на фрилансе(естесно, чтобы съэкономить). Потом никакой ИИ не разберет что к чему там. Взять к примеру конструкторы сайтов. Сайтов наделали, а потом не знают как и что добавить и всё у них плывёт. В общем про роботов тоже говорили, что заменять людей. Однако живём и дальше.Работаем как-то.

  • @MrAlexander88m

    @MrAlexander88m

    4 жыл бұрын

    @@cryfos творчество всегда присутствует и никогда не умирает. Взять например тех же кузнецов... Но сейчас же в универах не учат кузнечному делу... Кстати, про контент. Сейчас как раз таки при помощи машинного обучения ставят ценники на товары в крупных сайтах типа Амазон. Ну а Индусы разные бывают... Вон, половина работников Гугл - Индусы...

  • @niceman5890
    @niceman58902 жыл бұрын

    Круто сделано!

  • @Oreo_Raccoon
    @Oreo_Raccoon3 жыл бұрын

    Подскажите пожалуйста как сделать смену цвета шрифта при нажатии на вкладку в табах? Пробовал псевдоклассы, hover,focus,active, но шрифт меняется только когда навожу мышь, а нужно чтобы был постоянно другого цвета пока не переключу на другую вкладку.

  • @user-gf1hf6ux7z
    @user-gf1hf6ux7z2 жыл бұрын

    Чувак, ты крут! Спасибо!

  • @ruleti5347
    @ruleti53474 жыл бұрын

    супер, классно, спасибо

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @Toxa2424
    @Toxa24244 жыл бұрын

    Спасибо за табы ) Теперь жду табы в табах )

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @user-jq6tr6rr8v
    @user-jq6tr6rr8v4 жыл бұрын

    Большое спасибо !

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @xxnxzx
    @xxnxzx3 жыл бұрын

    Спасибо огромное, очень помог

  • @Benedict_Chanal
    @Benedict_Chanal4 жыл бұрын

    Жека привет, подскажи пожалуйста как на винде сделать на панели задач много значков приложений как у тебя?

  • @safar6519
    @safar65194 жыл бұрын

    5:07 для важных переговоров

  • @lera6580
    @lera65804 жыл бұрын

    Появился как Джин из бутылки))) Привет-привет! смотрю ^^

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Привет)

  • @user-wy1qd5oi3v
    @user-wy1qd5oi3v4 жыл бұрын

    Ну наконец-то, хоть что-то нормальное на этом ютубе 😁

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо!

  • @yonjoo8258
    @yonjoo82584 жыл бұрын

    Ооохх спасибо огромное)))

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста!

  • @armenakcomp
    @armenakcomp2 жыл бұрын

    Беру себе на вооружение, спасибо! 👍

  • @gin101
    @gin1012 жыл бұрын

    Нааииисс!) спасибо, ты лучший!)

  • @shumashok
    @shumashok2 жыл бұрын

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

  • @Eduard_1407

    @Eduard_1407

    Жыл бұрын

    башку сейчас ломаю над этим)если разобрался-напиши пожалуйста по-братски)

  • @user-nl9gm1uv7g

    @user-nl9gm1uv7g

    Жыл бұрын

    @@Eduard_1407 тоже часа 3 думал, походу только через js

  • @RefuelTheRocket
    @RefuelTheRocket2 жыл бұрын

    А как можно изменить текст в медиа запросе? Например в десктопной версии было написано вторая вкладка, а на смартфоне было бы просто вторая

  • @cg_man

    @cg_man

    2 жыл бұрын

    Как вариант делаешь два элемента, пишешь вторая вкладка и вторая. для смартфона скрываешь дисплей ноне. Прописываешь медиа запрос и меняешь там дисплей наоборот

  • @aleksei-demon9814
    @aleksei-demon98143 жыл бұрын

    Благодарю!

  • @aramas36
    @aramas363 жыл бұрын

    Добрый день, подскажите пожалуйста, как убрать скачки экрана при нажатии на ссылку если контента много на странице, имею введу, что если ссылка где то посередине и при нажатии на неё, текст становится вначале экрана, происходит резкий скачек контента.

  • @milazh4271
    @milazh4271 Жыл бұрын

    Здравствуйте. Можно ли написать скрипт для табов на чистом HTML без css? Просто у меня есть личный блог, где поддерживается только html, а переходить на платный тариф не вижу смысла из-за очень низкой посещаемости.

  • @ploxer9915
    @ploxer99154 жыл бұрын

    спасибо за курс по html, с нетерпением жду js. и конечно же, "живу, а работаю в свободное время". и также вопрос : почему вы перешли на vs code?

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста. Вот будет стрим отвечу на подобные вопросы

  • @user-jc5yr6wz5i
    @user-jc5yr6wz5i4 жыл бұрын

    Класс. Ждём JS. Женя вопрос, немного о grid(ах) раскажеш? Что это такое, и с чем его едят?

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Расскажу

  • @user-zy4cy5tv7i
    @user-zy4cy5tv7i9 ай бұрын

    Огромное спасибо

  • @STELLS541
    @STELLS5413 жыл бұрын

    Оч крутой способ, спасибо тебе!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    3 жыл бұрын

    Пожалуйста!

  • @Peschanyj_Voin_V
    @Peschanyj_Voin_V3 жыл бұрын

    Спасибо за урок! А как сделать табы для catalog.section.list Битрикс?

  • @user-zx6hh8jj7l
    @user-zx6hh8jj7l4 жыл бұрын

    Привет, Евгений. Недавно начал тебя смотреть и никак не могу понять один нюанс. Для примера: есть запись .class li > ul и запись .class li ul. Чем они отличаются? И вообще какую роль выполняет елемент ">"? Спасибо за твою работу на канале!

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    > - это только первый уровень вложенности.

  • @panamaver4917
    @panamaver49174 жыл бұрын

    Обожаю эту песню в конце

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Я тоже)

  • @lera6580

    @lera6580

    4 жыл бұрын

    музыка в конце ассоциируется с чем-то вроде "да, я крутая! " ))

  • @lera6580

    @lera6580

    4 жыл бұрын

    ну, мы все здесь крутые. пока одни сходят с ума от безделья или уходят в серию роликов про коронавирус, тратят время на пыво и шоу - мы тут с Евгением мозг качаем))

  • @Rus408
    @Rus4082 жыл бұрын

    а что делать есть есть еще блок с табами на странице? как сделать так чтобы было выбрано сразу два таба?

  • @alex-troshin
    @alex-troshin3 жыл бұрын

    Евгений, внимание вопрос Вы верстаете в реальном времени через browserSync? Почему у вас при измении, допустим, отступа контент едет плавно? У меня все дерганое :C

  • @tirrex1141
    @tirrex11414 жыл бұрын

    Круто, спасибо огромное! А про выпадающие списки такой туториал будет? Или я что пропустил? Жека, мой почет и уважение! Спасибо за твой труд.

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Пожалуйста! Про выпадающее меню было уже в этом плейлисте

  • @tirrex1141

    @tirrex1141

    4 жыл бұрын

    @@FreelancerLifeStyle понял, спасибо! Извини, что отвлек.

  • @user-bp3vk3uj8h
    @user-bp3vk3uj8h4 жыл бұрын

    Жека, давай плэйлист по оптимизации: google page speed по lazy load и всякое такое

  • @valentyndubin5441
    @valentyndubin54414 жыл бұрын

    Когда на дворе постапокалипсис, самое время заварити каву, и глянуть Женины видосы🙂) Спасибо Женя, как всегда отлично и полезно🙂👍👍👍)Я сначала думал, что будеш через чекбоксы делать, интересно)

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Через чекбоксы круче, это самый самый простой вариант)

  • @kronix249
    @kronix2493 жыл бұрын

    5:59 когда прописал псевдокласс к блоку который по задумка должен появляться, но у меня не появляется. (он игнорирует display: block;)

  • @user-qt1nl8sz1m

    @user-qt1nl8sz1m

    3 жыл бұрын

    Напиши то же самое только после того как написал display none

  • @nb-cy6cw
    @nb-cy6cw4 жыл бұрын

    Сама клёвая заставка)

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо!

  • @user-dm6tu9yu3i
    @user-dm6tu9yu3i4 жыл бұрын

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

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Сделаю и по якорям

  • @user-dt7kz4yd8k
    @user-dt7kz4yd8k2 жыл бұрын

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

  • @smert-chekistam
    @smert-chekistam2 жыл бұрын

    Уписаться можно от восторга 👍👍

  • @user-eu5xm7xv6q
    @user-eu5xm7xv6q3 жыл бұрын

    Спасибо!!!

  • @sni4592
    @sni45923 жыл бұрын

    а в эти вкладки можно другие страницы сайтов вставлять?

  • @DmitriyDev
    @DmitriyDev4 жыл бұрын

    Табы работают только с текстом или можно сделать к примеру форму регистрации на 1 вкладке, на 2 вкладке форму авторизации на 3 ещё что-то

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Все что угодно

  • @variagc1232
    @variagc12324 жыл бұрын

    Женя, а можно поподробнее остановиться и заострить внимание на ::after ::before? А то что-то туплю и до конца не понимаю их свойства

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Вот тут все есть kzread.info/dash/bejne/mYGTm81qlbrPiKQ.html

  • @Redmigarichuchichello
    @Redmigarichuchichello3 жыл бұрын

    Вопрос! После клика на любую из вкладок, у меня меняется таб, но страница прокручивается и таб оказывается в самом верху экрана, как исправить?

  • @gigahach
    @gigahach2 жыл бұрын

    а почему бы не покрасить вкладки непрямую? .vkladka:focus { background-color: color; } ?

  • @lasusitatv2799
    @lasusitatv27994 жыл бұрын

    Я сохранил код предыдущего видео табы и сегодня использовал на странице товара Жека спасибо большое

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Супер!

  • @TarasKasiukhnych
    @TarasKasiukhnych Жыл бұрын

    Дякую за корисні відео!

  • @user-sk2mr9ts6u
    @user-sk2mr9ts6u3 жыл бұрын

    Можно ли открыть ссылку через псевдокласс :cheked или он только для Input действует?

  • @user-jo2rh1mn5x

    @user-jo2rh1mn5x

    3 жыл бұрын

    Нет, только для инпутов. Но, табы на инпутах лучше делать (если без джс).

  • @fsoky
    @fsoky4 жыл бұрын

    Воу, круто. Не подскажешь плагин на Sublime Text. У тебя цвет в кубе подсвечивается. Заранее спасибо. Удачи

  • @sharyar_t

    @sharyar_t

    4 жыл бұрын

    Это редактор VS Code

  • @fsoky

    @fsoky

    4 жыл бұрын

    @@sharyar_t Разве? Ну ладно. Спасибо)

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Это vs code но можно и на sublime kzread.info/dash/bejne/qouctsiYn5ucfMo.html

  • @aleksandrsrudkevics6384
    @aleksandrsrudkevics63844 жыл бұрын

    Супер.😃

  • @FreelancerLifeStyle

    @FreelancerLifeStyle

    4 жыл бұрын

    Спасибо!

  • @user-uu8rt4tf7l
    @user-uu8rt4tf7l2 жыл бұрын

    Привет. Как добиться фейд эффектка ? Пример есть у бУтсрапа

Келесі