Адаптивні вкладки (таби) на css3

Адаптивні вкладки (таби) на CSS3

У демонстраційному прикладі саме так я і зробив, так що глянувши на вихідні, легко розберетеся що до чого.
Структура вкладок в Html досить проста. Базовий div-контейнер, зв'язка і безпосередньо секції

. в яких приховано до пори до часу певний контент. Усе! Нічого зайвого, ніяких бібліотек js, ні додаткових файлів зображень в оформленні, зовнішній вигляд вкладок, а так само їх функціональність, формується виключно засобами CSS. Звичайно, використання нових стандартів CSS3, не гарантує стабільної роботи в усіх браузерах без винятку, але в сучасних версіях, вкладки працюють відмінно. IE-шка коректно відображає вкладки починаючи з 9-ї версії. Так що якщо вам не байдужа психіка і почуття сприйняття користувачів наполегливо сидять на старіших версіях цього «брууузера», даний спосіб створення вкладок краще не застосовувати, а скористатися стабільним рішенням із застосуванням jQuery.

# Content-tab4 / * Прибираємо текст з перемикачів * і залишаємо іконки на малих екранах * / @ media screen and (max-width: 680px) <.tabs>label .tabs> label: before > / * Змінюємо внутрішні відступи * перемикачів для малих екранів * / @media screen and (max-width: 400px) <.tabs>label >

Оформити вкладки (таби) ви можете як завгодно, все що в прикладі, це тільки приклад, моє миттєве бачення продукту, нічого більше. Значення Unicode потрібних вам шрифт-іконок, зможете дізнатися на сайті розробника, для цього просто натисніть на обрану іконку і скопіюйте виданий цифровий код, приблизно такого вигляду: \ f13b.
Зверніть увагу, коли ви зменшуєте розмір вікна браузера, вкладки автоматом підлаштовуються під поточний розмір до певного значення (в прикладі 680px), після цього значення, текстові заголовки вкладок зникають, залишаються іконки. Тим самим досягається максимальна компактність всього блоку вкладок, залишається лише правильно підібрати ці самі іконки, які підходять за змістом до представленого контенту всередині вкладок.

На цьому напевно і все. Дивіться живий приклад роботи вкладок (табів), завантажуйте вихідні, експериментуйте з параметрами, і творіть, творіть, творіть.

Третій день мучуся і хоч ти стріляй не можу зробити.

Як зробити так, щоб на рівні вкладок був свій фон, але все працювало? Не у вкладки свій фон, а саме на рівні вкладок (вміст вкладок має залишатися без фону).

Намагався обертати вкладки (заголовки) в span, div, без питань фон з'являється. Але тоді не працює саме вміст вкладок. То не перемикається, то показується все, то нічого не показується. Маячня якась.

Змініть властивість background на свій колір: наприклад background: # 000; фон вкладок стане чорний.

Справа в тому, що мені потрібен загальний фон для всіх вкладок

Приєднуйтесь до обговорення!

Блогінг, монетизація, розкрутка

Практика монетизації блогу: від розкрутки до реальних грошей

Вивчити HTML5 та CSS3 вже сьогодні

Найбільш повний і актуальний курс в форматі DVD-дисків в Рунеті

Вивчення курсу побудовано за принципом «від простого до складного» і від «теорії до практики»