Мы не редко пользуемся окнами в стиле. Они нередко реализуются на JavaScript и даже на Flash. Я покажу как сделать можно одиночное окно на чистом CSS.
Суть в том, что мы нажимая на кнопку для первого окна, мы активируем window1, и он автоматически открывается, нажимая на window2, первое окно закрывается и открывается второе. Крестик закрывает окно благодаря отмене текущего ID.
Из минусов такого окна могу отметить отсутствие drag and drop, и работает только одно окно. Кроме того, мы не сможем туда вбить вкладки, а иначе окно закроется. Если вам нужны сложные UI, без специальных скриптов не обойтись.
Данный пример написал только для браузеров с движком webkit, однако можно легко адаптировать под все остальные браузеры.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Windows</title>
<style>
//Придаем стилей окну и прячем
.window {
width:60%;
position:fixed;
padding:20px;
box-sizing: border-box;
border: solid 1px black;
background-color: rgba(0,0,0,0.5);
left:20%;
top:20%;
color: white;
font-family: Arial;
//Прячем
opacity:0;
//Убираем события мыши
pointer-events:none;
//Анимируем
-webkit-transition-property:opacity;
-webkit-transition-duration:0.25s;
}
//Открываем окно
.window:target {
//Показываем
opacity:1;
//Активируем события мыши
pointer-events:auto;
}
//Чтобы выглядела как кнопка
.close {
position:absolute;
width:18px;
height:18px;
left:-webkit-calc(100% - 20px);
top:2px;
color: white;
text-decoration:none;
font-family:Arial;
overflow:hidden;
display:block;
background-color:darkgray;
border-radius:10px;
text-align:center;
font-size:12px;
display:block;
}
//Рисуем крестик
.close:after {
content:'x';
}
//Стандартные стили
body {
font-family: Arial, Verdana;
font-size: 12px;
background-color:rgb(240, 240, 240);
}
a {
text-decoration:none;
color:rgb(128,128,128);
}
a:hover {
color:rgb(96,96,96);
}
ol {
padding:0;
margin:0;
list-style:none;
}
</style>
</head>
<body>
<ol>
<li><a href="#window1">One Window</a><!-- Кнопка для открывания первого окна -->
<li><a href="#window2">Two Window</a><!-- Кнопка для открывания второго окна -->
</ol>
<div id="window1" class="window">
<a href="#" class="close"></a><!-- Кнопка закрытия -->
Ты открыл первое окно.
</div>
<div id="window2" class="window">
<a href="#" class="close"></a><!-- Кнопка закрытия -->
Ты открыл второе окно.
</div>
</body>
</html>
Весь секрет кроется в псевдо-элементе :target. При помощи него можно написать не только окна (как в данном примере). На нем можно написать вкладки, кликабельное меню и некоторые другие элементы UI. Эх, если бы можно было бы делать более сложные интерфейсы на чистом CSS3. Жаль что CSS3 не поддерживает множество target, мышь и т.д.
Автор: Alexei03a
