Закладки з використанням тільки css

Другий напрямок показувало набагато кращий результат, за винятком роботи з браузерами сімейства WebKit, які не давали працювати разом селекторам псевдо-класу і суміжних комбінаторам. Але в Safari 5.1 і Chrome 13 помилка нарешті усунута!

І тепер можна реалізувати закладки з використанням псевдо-класу: checked. що, ймовірно, стане основним методом для вирішення даного завдання на кілька років.

Закладки з використанням тільки css

Закладки з використанням тільки css
Закладки з використанням тільки css

  1. Приховує радіо кнопку (її не потрібно показувати, нам вона потрібна тільки для стану зазначена / невідзначеними).
  2. Робимо закладки плаваючими блоками, щоб мітки вишикувалися в один рядок.
  3. Абсолютно позиціонуємо області змісту одну поверх іншої.
  4. Коли радіо кнопка має стан: checked. переставляємо відповідну область змісту наверх за допомогою властивості z-index (візуально вона буде з'являтися, приховуючи інші області змісту).

Дуже маленький код CSS, який легко масштабується на будь-яку кількість закладок (потрібно лише додати елементи div з класом tab в код HTML).

У чому користь від даного методу?

5 останніх уроків рубрики "CSS"

Невеликий ефект з інтерактивною анімацією букв.

  • Невеликий концепт кумедних підказок, які реалізовані на SVG і anime.js. Крім особливого стилю в прикладі реалізована анімація і трансформація графічних об'єктів.

  • Експеримент: анімовані SVG літери на базі бібліотеки anime.js.

  • Прикольний експеримент веб сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.

  • Експериментальний скрипт розкривається навігації.

    Хороша річ, але IE 8, як завжди псує картину.

    Накакала на IE, в топку його, чому верстальники повинні витрачати години на те що б все було коректно в це "супер браузері"

  • На жаль є ще люди які заходять через нього і їх чимало x_x

  • Річ класна! а з приводу IE, як не сумно, але людям все одно, з якого браузера вони сидять, їм важливий результат, а завдання верстальника щоб все виглядало красиво і однаково в усіх браузерах. Якщо чогось не виходить зробити для IE, то придумати підміну. Зрозуміло що IE6 вже мало хто підтримує, і сама Microsoft від підтримки відмовилася, але є IE7 і вище з яких сидять величезна купа народу. Потрібно робити сайти для людей, а не як простіше. Якщо ти не хочеш запарюватися і враховувати верстку під IE - у мене для тебе погані новини, ти вибрав не ту професію.

  • В топку всі старі версії браузерів, мотиви кросбраузерной верстки зрозумілі і шкода що немає жодної структури для підтримки у користувачів актуальних версій стандартів. Нові стандарти дають більше цікавих можливостей і їх вбиває прагнення до підтримки старих браузерів :(

    з ие сидять мало, у мене відсотків 5, і по 30 у хрому фуріфокса опери

    Закладки з використанням тільки css

    За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

    Закладки з використанням тільки css

    Закладки з використанням тільки css

    Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

    Закладки з використанням тільки css

    Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

    Закладки з використанням тільки css

    Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!