Трюк с использованием скрытой радио кнопки или чекбокса, селектора псевдо класса :checked и комбинатора смежных элементов (~) открывает доступ к реализации различных эффектов на чистом CSS.
Попробуем сделать сворачивающееся выскакивающее окно. Его можно использовать для кнопок/ссылок, чтобы вывести HTML содержание подсказки по нажатию.
Структура HTML
Нам нужен чекбокс для реализации функционала включения/выключения (он будет скрыт). Затем метка с атрибутом for соответствующим атрибуту id элементу ввода. Таким образом, мы сможем нажимать ее для переключения чекбокса.
Метка содержит в себе набор элементов span. Элемент span .box является контейнером для HTML содержания выскакивающего окна. В него можно размещать любые строчные элементы. Попытки поместить элементы div и заголовки приводили к тому, что некоторые браузеры выводили их содержание вне выскакивающего окна. Размещение элемента .box вне метки также возможно, так как с помощью селектора ~ будет доступен метод его скрытия/вывода. Но, размещая элемент .box внутри метки, можно сделать его позиционирование относительным к метке, как и следует для выскакивающего окна.
<input type="checkbox" id="popup" class="popUpControl">
<label for="popup">
Нажми меня!
<span class="box">
Содержание выскакивающего окна
</span>
</label>
Основная часть CSS
Нашей целью является абсолютное позиционирование элемента .box по отношению к метке, так что он будет выскакивать, привязанный к ней. По умолчанию элемент будет скрыт за счет полной прозрачности. Также мы добавим изменение масштаба до нуля, наклон и трансформации. А когда он выводится при нажатии на чекбокс, мы будем изменять масштаб обратно и делать его видимым.
.box {
position: absolute;
left: 0;
top: 100%;
z-index: 100;
/* Предотвращаем мерцание в Safari 5.1 */
-webkit-backface-visibility: hidden;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
width: 260px;
padding: 20px;
opacity: 0;
-webkit-transform: scale(0) skew(50deg);
-moz-transform: scale(0) skew(50deg);
-ms-transform: scale(0) skew(50deg);
-o-transform: scale(0) skew(50deg);
-webkit-transform-origin: 0px -30px;
-moz-transform-origin: 0px -30px;
-ms-transform-origin: 0px -30px;
-o-transform-origin: 0px -30px;
-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
-moz-transition: -moz-transform ease-out .35s, opacity ease-out .4s;
-ms-transition: -ms-transform ease-out .35s, opacity ease-out .4s;
-o-transition: -o-transform ease-out .35s, opacity ease-out .4s;
}
.popUpControl {
display: none;
}
.popUpControl:checked ~ label > .box {
opacity: 1;
-webkit-transform: scale(1) skew(0deg);
-moz-transform: scale(1) skew(0deg);
-ms-transform: scale(1) skew(0deg);
-o-transform: scale(1) skew(0deg);
}
Здесь содержится самая важная часть кода CSS, реальный пример будет содержать еще несколько правил для задания стилей. Смотрите исходники, прилагающиеся к уроку.
Изменяем текст кнопки
Идея не является жизненно необходимой, но добавляет шарм. Текст кнопки будет изменяться, когда открыто выскакивающее окно. Скрываем текст внутри кнопки, когда она имеет состояние :checked и вставляем новый текст:
<input type="checkbox">
<label>
<span>Текст кнопки</span>
</label>
[type=checkbox]:checked ~ label span {
display: none;
}
[type=checkbox]:checked ~ label:before {
content: "Текст в отмеченном состоянии";
}
Все прекрасно, но... JavaScript лучше
Не смотря на то, что решение задачи возможно реализовать на чистом CSS, лучше всего использовать JavaScript для таких случаев. Что нужно будет сделать в коде JavaScript:
Переключить классы "open" и "closed" для элемента .box (это лучше, чем использовать чекбокс).
Изменить текст без использования генерированного содержания CSS.
Но для всех остальных аспектов решения следует оставить использование CSS. Стили, переходы и трансформации принадлежат области стилей, а не функционала.