Анімовані вкладки на CSS3 та HTML5
Приклад різних видів переходів вкладок можна побачити тут:
Переглянути прикладЗавантажити
Можливо, вам сподобається минулий урок, де ми також створювали красиві вкладки - Красиві анімовані вкладки на CSS.
HTML частина
Ми будемо використовувати елемент з різними класами для перемикання між вкладками. А в тегу міститься назва вкладки:
Насамперед, що нам потрібно зробити, необхідно приховати інші вкладки, крім активної. Для цього виставимо властивість прозорості на нуль:
Вкладки будуть схожі на елемент, але насправді ми будемо натискати на:
Так як не потрібна нижня частина тіні для цього елемента, ми використовуємо псевдоелемент:after з порожнім значенням властивостіcontent :
Коли вкладка стає активною, вона має для цього свій стиль відображення. А також вона стає поверх інших. Робиться це за допомогою властивостіz-index :
Отже, ми приховуємо решту вкладок за допомогою виставленняopacity: 0. Ми можемо використовувати властивістьdisplay: none, т.к. воно не підтримує ефекти переходу:
Коли ми робимо вкладку активною, то виставляється значенняopacity: 1, а також великийz-index :
У цій статті ми створили вкладки на CSS3 та HTML5. Вони красиво працюватимуть у сучасних браузерах. Різні види переходів можна знайти в прикладах вище, а також завантажити вихідні дані та застосовувати.
Схожі записи
Доброго дня, підкажіть початківцю в даному прикладі .tabs input.tab-selector-1:checked
.content .content-1, що означає знак «
Здрастуйте, Артуре. Тільда означає, що будуть обрані всі елементи з класами ".content.content-1", які слідують за елементами з класами і псевдоселектором ".tabs input.tab-selector-1:checked».
Дякую Юрію, за урок і за прояснення. Я трохи на свій лад робив і замість тексту у мене форми на вкладках, спочатку така белеберда вийшла, але зараз розібрався начебто все ок.
Підкажіть будь ласка. Якщо у мене різне наповнення вкладок, як можна зробити висоту .content плаваючою. Пробував реалізувати це кількома способами, але нічого не вийшло.
Денисе, доведеться тоді трохи змінити CSS. Необхідно задавати background не для одного блоку (зараз біле тло задається для блоку з класом "content"), в якому знаходяться всі 4 вкладки, а для кожного окремо в 106-му рядку файлуstyle.css.
Як зробити пряме посилання на конкретну вкладку Наприклад, щоб людина, натиснувши на посилання, потрапила на 3 вкладки відразу? Якорі не працюють ((
Миколо, активна вкладка має атрибутchecked. Його можна задавати динамічно за допомогою jQuery, натиснувши на посилання.
Але як це реалізувати? Потрапити на вкладку з посилання. Підкажіть будь ласка
Доброго вам дня! Чи можливо якось зробити у вкладках вкладені вкладки? Пробував скопіювати в одну із вкладок код секції з вкладками, але при натисканні на будь-яку вкладених вкладок вони всі пропадають.
Доброго дня, Володимире!
Зі структурою ви все робите правильно, але ще потрібно уважно змінити стилі, тому що одна із вкладок завжди видно, а інші приховані. Ви вставили в першу вкладку код всіх вкладок, але не змінили класи, тому при натисканні на будь-яку з вкладок пропадають усі. Вам необхідно прописати нові класи для внутрішніх вкладок. Також не забудьте змінити всі класи в CSS, щоб вони не перетиналися з основними назвами класів.
Крім цих вкладок, на сайті також є такі види вкладок: