Загрузка страницы

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

Сегодня я решил показать и рассказать как сделать простые табы (вкладки) используя только HTML и CSS. В уроке показаны интересные решения включающие псевдокласс target и свойство text-overflow.

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

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle

🤟 Живи, а работай в свободное время! ©

Видео Простые табы на HTML и CSS. Как это сделать? канала Фрилансер по жизни - IT и фриланс
Показать
Комментарии отсутствуют
Введите заголовок:

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
7 марта 2020 г. 17:05:55
00:13:16
Другие видео канала
Как сделать табы на: чистом CSS / чистом JS / грязном jQuery?Как сделать табы на: чистом CSS / чистом JS / грязном jQuery?Правильное адаптивное меню бургер на HTML CSS и jQuery. Мобильное меню туториал // Как это сделать?Правильное адаптивное меню бургер на HTML CSS и jQuery. Мобильное меню туториал // Как это сделать?CSS animation и @keyframes за 12 минут. Подробный разбор CSS свойств анимации + шпаргалка.CSS animation и @keyframes за 12 минут. Подробный разбор CSS свойств анимации + шпаргалка.Как создать сайт: Структура продающего сайта / Как привлечь и удержать пользователя / Составляем УТПКак создать сайт: Структура продающего сайта / Как привлечь и удержать пользователя / Составляем УТПКак читать табы в "фингерстайл" (урок GoFingerstyle)Как читать табы в "фингерстайл" (урок GoFingerstyle)VS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучениеVS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучениеЧтение макета дизайна. Определение элементов на странице на реальных примерахЧтение макета дизайна. Определение элементов на странице на реальных примерахВерстка сайта. Весь процесс от задания до сдачи проекта. // Учимся  #ДомавместеВерстка сайта. Весь процесс от задания до сдачи проекта. // Учимся #ДомавместеМетодология БЭМ за 17 минут. Пример верстки по БЭМ методологии // Фрилансер по жизниМетодология БЭМ за 17 минут. Пример верстки по БЭМ методологии // Фрилансер по жизниВсе про CSS отступы padding и margin. Объяснение на практике за 33 минуты.Все про CSS отступы padding и margin. Объяснение на практике за 33 минуты.Учим JavaScript 36. ВкладкиУчим JavaScript 36. ВкладкиАдаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.Табы на чистом JavaScript. Native Javascript TabsТабы на чистом JavaScript. Native Javascript TabsСоздание сайта на html. Часть 1Создание сайта на html. Часть 1FLEXBOX. Примеры верстки на flex. Учимся верстать на флексах. Часть четвертая - практикаFLEXBOX. Примеры верстки на flex. Учимся верстать на флексах. Часть четвертая - практикаПрепроцессор SASS/SCSS за 38 минут. Что такое SASS, SCSS. Установка уроки обучение.Препроцессор SASS/SCSS за 38 минут. Что такое SASS, SCSS. Установка уроки обучение.Buttons With Awesome Hover Effects Using Only HTML & CSSButtons With Awesome Hover Effects Using Only HTML & CSSCSS transform. 2D и 3D трансформации translate, scale, rotate и другиеCSS transform. 2D и 3D трансформации translate, scale, rotate и другие
Яндекс.Метрика