Пишем окна на чистом CSS

в 11:34, , рубрики: css, метки:

Мы не редко пользуемся окнами в стиле. Они нередко реализуются на 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

Поделиться

* - обязательные к заполнению поля