Пример с комментариями кода

Пример с комментариями кода

Статьи автора Olga мне очень нравятся лаконичностью и полнотой освещения темы. Всё же нашелся дяденька, который пошел дальше, в его примерах(к сожалению — переводных, молодцы всё-таки «проклятые буржуины») можно не только подсмотреть реализацию многих интересных преобразований HTML без JavaScript опираясь лишь на возможности CSS. Разумеется, тут ни для кого нет новой полезной информации. Я хотел бы попросить [Olga] и всех — кто помогает новичкам вникать в тайны CSS делать в своих публикациях с демонстрацией кода такие вот комментарии:

 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-Language" content="ru" />
        <title>Пример слайдера, управляемого только с помощью CSS3</title>
    </head>



    <style type="text/css">

        /* ==================== ОТВЛЕЧЁННОЕ: сброс стилей ==================== */



        * {
            border: 0 solid;                       /* украшательство */
            margin: 0;                             /* украшательство */
            padding: 0;                            /* украшательство */
            outline: 0;                            /* украшательство */
            -moz-box-sizing: border-box;           /* украшательство */
            -webkit-box-sizing: border-box;        /* украшательство */
            box-sizing: border-box;                /* украшательство */
        }



        body {
            background: #eee;                      /* украшательство */
            font-family: Verdana, Tahoma, Arial;   /* украшательство */
            font-size: 10pt;                       /* украшательство */
            padding: 15px;                         /* украшательство */
            text-align: center;                    /* украшательство */
            overflow: scroll;                      /* украшательство */
        }



        a {
            color: #c00;                           /* украшательство */
            font-weight: bold;                     /* украшательство */
            text-decoration: underline;            /* украшательство */
        }

        a:hover {
            text-decoration: none;                 /* украшательство */
        }



        /* ==================== КОНТЕНТ: левая выпадающая панель ==================== */



        #left {
            position: absolute;                    /* панель будем позиционировать                      */
            right: 50%;                            /* двигаем на центр и оталкивается справа налево     */
            margin-right: 240px;                   /* отодвигаем влево за слайдер (половина его ширины) */
            overflow: hidden;                      /* выступающие части контента отсекаем               */

            background: #ddd;                      /* украшательство */
            border: #ccc 1px solid;                /* украшательство */
            border-right: none;                    /* украшательство */
            margin-top: 15px;                      /* украшательство */
            width: 25px;                           /* украшательство */
            min-height: 250px;                     /* украшательство */
            text-align: left;                      /* украшательство */
        }

            #left > div {
                display: none;                     /* контент панели изначально скрыт */

                margin-top: 25px;                  /* украшательство */
                padding: 15px;                     /* украшательство */
            }



        /* ==================== КОНТЕНТ: правая выпадающая панель ==================== */



        #right {
            position: absolute;                    /* панель будем позиционировать                       */
            left: 50%;                             /* двигаем на центр и оталкивается слева направо      */
            margin-left: 240px;                    /* отодвигаем вправо за слайдер (половина его ширины) */
            overflow: hidden;                      /* выступающие части контента отсекаем                */

            background: #ddd;                      /* украшательство */
            border: #ccc 1px solid;                /* украшательство */
            border-left: none;                     /* украшательство */
            margin-top: 15px;                      /* украшательство */
            width: 25px;                           /* украшательство */
            min-height: 250px;                     /* украшательство */
            text-align: left;                      /* украшательство */
        }

            #right > div {
                display: none;                     /* контент панели изначально скрыт */

                margin-top: 25px;                  /* украшательство */
                padding: 15px;                     /* украшательство */
            }



        /* ==================== КОНТЕНТ: слайдер ==================== */



        #slider {
            width: 480px;                          /* ширина слайда + боковые отступы личных украшательств */

            background: #ddd;                      /* украшательство */
            border: #fff 10px solid;               /* украшательство */
            margin: 15px auto;                     /* украшательство */
            padding: 15px;                         /* украшательство */
            text-align: left;                      /* украшательство */
        }



            /* контейнер набора слайдов */

            #slider .elements {
                height: 240px;                     /* высота слайда (если низ не должен плавать)   */
                overflow: hidden;                  /* отсекаем выступившее за край                 */
                position: relative;                /* слайды позиционируем относительно контейнера */

                background: #fff;                  /* украшательство */
                margin: 15px 0;                    /* украшательство */
            }



            /* контейнер отдельного слайда */

            #slider .element {
                display: none;                     /* слайды изначально не видны                */
                height: 100%;                      /* слайды размером на всю клиентскую область */
                width: 100%;                       /* слайды размером на всю клиентскую область */
                position: absolute;                /* слайды размещены один над другим          */

                padding: 15px;                     /* украшательство */
            }



        /* ==================== КОНТЕНТ: сами слайды ==================== */



        #slider .SlideBox1 {
            background: #f88;                      /* украшательство */
        }

        #slider .SlideBox2 {
            background: #6cf;                      /* украшательство */
        }

        #slider .SlideBox3 {
            background: #8f8;                      /* украшательство */
        }

        #slider .SlideBox4 {
            background: #fc6;                      /* украшательство */
        }



        /* ==================== КОНТЕНТ: строка состояния слайдера ==================== */



        #slider .status {
            background: #bbb;                      /* украшательство */
            color: #444;                           /* украшательство */
            font-size: 8pt;                        /* украшательство */
            line-height: 20px;                     /* украшательство */
            margin-bottom: 15px;                   /* украшательство */
            padding: 0 10px;                       /* украшательство */
        }

            #slider .status span {
                color: #c4c;                       /* украшательство */
                padding-right: 10px;               /* украшательство */
            }



        /* ==================== КОНТЕНТ: спойлер под слайдером ==================== */



        #slider .more {
            display: none;                         /* контент спойлера изначально скрыт */

            background: #eee;                      /* украшательство */
            border: #bbb 1px solid;                /* украшательство */
            margin-top: 15px;                      /* украшательство */
            padding: 15px;                         /* украшательство */
        }



        /* ==================== КОНТЕНТ: уведомления по событию ==================== */



        .cases {
            display: none;                         /* изначально скрыты */
        }

        .cases.visible {
            display: block;                        /* такие изначально видны */
        }

        .cases.visible.inline {                    /* возможно для каких-нибудь частей текста */
            display: inline;
        }



        /* раскрасим текст уведомлений */

        .NonSelected {
            color: #080;                           /* украшательство */
            line-height: 20px;                     /* украшательство */
        }



        /* ==================== НАВИГАТОРЫ: теневые флажки ==================== */



        input[name^="shadow-"] {
            display: none;                         /* вообще не показываем */
        }



        /* ==================== НАВИГАТОРЫ: флажок ==================== */



        .checkbox {
            cursor: pointer;                       /* украшательство */
        }



        /* ==================== ОБРАБОТКИ ОБЩИЕ: события флажка ==================== */



        /* его общие события не отслеживаем */



        /* ==================== НАВИГАТОРЫ: тумблер ==================== */



        .switch {
            position: absolute;                    /* будем позиционировать как и панель                       */
            right: 50%;                            /* двигаем на центр                                         */
            margin-right: 240px;                   /* отодвигаем влево за слайдер (половина его ширины)        */
            z-index: 1;                            /* чтобы оказался над панелью                               */
            display: block;                        /* чтобы не терялась позиция от скрытия неблочных элементов */

            cursor: pointer;                       /* украшательство */
            margin-top: 15px;                      /* украшательство */
        }

        .switch:after {
            content: '←';                          /* украшательство */
            background: #bbb;                      /* украшательство */
            display: inline-block;                 /* украшательство */
            font-size: 12pt;                       /* украшательство */
            font-weight: bold;                     /* украшательство */
            text-align: center;                    /* украшательство */
            line-height: 25px;                     /* украшательство */
            height: 25px;                          /* украшательство */
            width: 25px;                           /* украшательство */
        }

        .switch:hover:after {
            background: #8ff;                      /* украшательство */
        }



            /* корректируем для правой панели */

            .switch.RightKey1 {
                right: none;
                left: 50%;
                margin-right: 0;
                margin-left: 240px;
            }

            .switch.RightKey1:after {
                content: '→';                      /* украшательство */
            }



        /* ==================== ОБРАБОТКИ ОБЩИЕ: события тумблера ==================== */



        /* включен */

        input[name^="shadow-"]:checked + .switch:after {
            content: '→';                          /* украшательство */
        }



        /* включен (для правой панели) */

        input[name^="shadow-"]:checked + .switch.RightKey1:after {
            content: '←';                          /* украшательство */
        }



        /* ==================== НАВИГАТОРЫ: переключатель ==================== */



        .toggle {
            cursor: pointer;                       /* украшательство */
        }

        .toggle:after {
            content: 'развернуть спойлер';         /* украшательство */
            cursor: pointer;                       /* украшательство */
            color: #08f;                           /* украшательство */
            font-size: 8pt;                        /* украшательство */
            text-decoration: underline;            /* украшательство */
        }

        .toggle:hover:after {
            text-decoration: none;                 /* украшательство */
        }



        /* ==================== ОБРАБОТКИ ОБЩИЕ: события переключателя ==================== */



        /* включен */

        input[name^="shadow-"]:checked + .toggle:after {
            content: 'свернуть';                   /* украшательство */
        }



        /* ==================== НАВИГАТОРЫ: кнопка ==================== */



        .button {
            cursor: pointer;                       /* украшательство */
            background: #ccc;                      /* украшательство */
            display: inline-block;                 /* украшательство */
            text-align: center;                    /* украшательство */
            margin: 0 5px 15px 5px;                /* украшательство */
            line-height: 30px;                     /* украшательство */
            height: 30px;                          /* украшательство */
            width: 80px;                           /* украшательство */
        }



        /* ==================== ОБРАБОТКИ ОБЩИЕ: события кнопки ==================== */



        /* курсор над кнопкой */

        .button:hover {
            background: #8ff;                      /* украшательство */
        }



        /* кнопка выбрана */

        input[name^="shadow-"]:checked + .button {
            background: #f8f;                      /* украшательство */
        }



        /* ==================== ОБРАБОТКИ ЧАСТНЫЕ: события флажка 1 ==================== */



        /* флажок помечен - скрываем связанные с ним уведомления */

        input[name="function1"]:checked ~ .cases.visible.NonAutoDisplay,
        input[name="function1"]:checked ~ .cases .cases.visible.NonAutoDisplay,
        input[name="function1"]:checked ~ #slider .cases.visible.NonAutoDisplay,
        input[name="function1"]:checked ~ .cases.visible.inline.NonAutoDisplay,
        input[name="function1"]:checked ~ .cases .cases.visible.inline.NonAutoDisplay,
        input[name="function1"]:checked ~ #slider .cases.visible.inline.NonAutoDisplay {
            display: none !important;
        }

            /* и вдруг есть уведомление для противоположного состояния - надо показать */

            input[name="function1"]:checked ~ .cases.inline.NonAutoDisplay,
            input[name="function1"]:checked ~ .cases .cases.inline.NonAutoDisplay,
            input[name="function1"]:checked ~ #slider .cases.inline.NonAutoDisplay {
                display: inline !important;
            }
            input[name="function1"]:checked ~ .cases.NonAutoDisplay,
            input[name="function1"]:checked ~ .cases .cases.NonAutoDisplay,
            input[name="function1"]:checked ~ #slider .cases.NonAutoDisplay {
                display: block;
            }



        /* ==================== ОБРАБОТКИ ЧАСТНЫЕ: события слайдера ==================== */



        /* курсор над кнопкой слайда - показываем её слайд (если флажок не включен) */

        input[name="function1"]:not(:checked) ~ .SlideKey1:hover ~ #slider .elements .SlideBox1,
        input[name="function1"]:not(:checked) ~ .SlideKey2:hover ~ #slider .elements .SlideBox2,
        input[name="function1"]:not(:checked) ~ .SlideKey3:hover ~ #slider .elements .SlideBox3,
        input[name="function1"]:not(:checked) ~ .SlideKey4:hover ~ #slider .elements .SlideBox4 {
            display: block !important;                       /* гарантируем не перекрытие другим событием */
        }

            /* и скрываем возможно выбранный слайд (ведь в z-index он может оказаться выше) */

            input[name="function1"]:not(:checked) ~ .SlideKey1:hover ~ #slider .element,
            input[name="function1"]:not(:checked) ~ .SlideKey2:hover ~ #slider .element,
            input[name="function1"]:not(:checked) ~ .SlideKey3:hover ~ #slider .element,
            input[name="function1"]:not(:checked) ~ .SlideKey4:hover ~ #slider .element {
                display: none !important;                    /* гарантируем не перекрытие другим событием */
            }



        /* кнопка слайда выбрана - показываем её слайд */

        input[name^="shadow-"]:checked + .SlideKey1 ~ #slider .SlideBox1,
        input[name^="shadow-"]:checked + .SlideKey2 ~ #slider .SlideBox2,
        input[name^="shadow-"]:checked + .SlideKey3 ~ #slider .SlideBox3,
        input[name^="shadow-"]:checked + .SlideKey4 ~ #slider .SlideBox4 {
            display: block;
        }

            /* и скрываем связанное с этим уведомление */

            input[name="shadow-slide"]:checked ~ .cases.visible.NonSelected,
            input[name="shadow-slide"]:checked ~ .cases .cases.visible.NonSelected,
            input[name="shadow-slide"]:checked ~ #slider .cases.visible.NonSelected,
            input[name="shadow-slide"]:checked ~ .cases.visible.inline.NonSelected,
            input[name="shadow-slide"]:checked ~ .cases .cases.visible.inline.NonSelected,
            input[name="shadow-slide"]:checked ~ #slider .cases.visible.inline.NonSelected {
                display: none !important;
            }

            /* и вдруг есть уведомление для противоположного состояния - надо показать */

            input[name="shadow-slide"]:checked ~ .cases.inline.NonSelected,
            input[name="shadow-slide"]:checked ~ .cases .cases.inline.NonSelected,
            input[name="shadow-slide"]:checked ~ #slider .cases.inline.NonSelected {
                display: inline !important;
            }
            input[name="shadow-slide"]:checked ~ .cases.NonSelected,
            input[name="shadow-slide"]:checked ~ .cases .cases.NonSelected,
            input[name="shadow-slide"]:checked ~ #slider .cases.NonSelected {
                display: block;
            }



        /* ==================== ОБРАБОТКИ ЧАСТНЫЕ: события спойлера 1 ==================== */



        /* спойлер раскрыт - показываем контент спойлера */

        input[name^="shadow-"]:checked + .SpoilerKey1 ~ .SpoilerBox1 {
            display: block !important;
        }



        /* ==================== ОБРАБОТКИ ЧАСТНЫЕ: события спойлера 2 ==================== */



        /* спойлер раскрыт - показываем контент спойлера */

        input[name^="shadow-"]:checked + .SpoilerKey2 ~ .SpoilerBox2 {
            display: block !important;
        }



        /* ==================== ОБРАБОТКИ ЧАСТНЫЕ: события левой панели ==================== */



        /* панель раскрыта - выдвигаем */

        input[name^="shadow-"]:checked + .LeftKey1 ~ .LeftBox1 {
            width: 100px !important;
        }

            /* и сдвигаем левее тумблер панели */

            input[name^="shadow-"]:checked + .LeftKey1 {
                margin-right: 315px !important;
            }

            /* и показываем контент панели */

            input[name^="shadow-"]:checked + .LeftKey1 ~ .LeftBox1 > div {
                display: block !important;
            }



        /* ==================== ОБРАБОТКИ ЧАСТНЫЕ: события правой панели ==================== */



        /* панель раскрыта - выдвигаем */

        input[name^="shadow-"]:checked + .RightKey1 ~ .RightBox1 {
            width: 100px !important;
        }

            /* и сдвигаем правее тумблер панели */

            input[name^="shadow-"]:checked + .RightKey1 {
                margin-left: 315px !important;
            }

            /* и показываем контент панели */

            input[name^="shadow-"]:checked + .RightKey1 ~ .RightBox1 > div {
                display: block !important;
            }



        /* ==================== ОТВЛЕЧЁННОЕ: подвал ==================== */



        #powered {
            background: #bbb;
            color: #444;
            font-size: 8pt;
            margin: 30px 0 0 0;
            padding: 0 15px;
            line-height: 18pt;
            text-align: left;
        }

            #powered > a {
                color: #04f;
                text-decoration: none;
                white-space: nowrap;
                margin: 0 10px;
            }
            #powered > a:hover {
                text-decoration: underline;
            }

            #powered > #counters {
                height: 1px;
                width: 1px;
                overflow: hidden;
                opacity: 0.01;
            }
                #powered > #counters * {
                    opacity: 0.01;
                }
    </style>



    <body>



        <!-- флажок 1 -->

        <input id="shadow-func1" name="function1" type="checkbox" />
        <label class="checkbox Function1" for="shadow-func1" title="Также вносит изменения в строку состояния и текст уведомления под кнопками слайдов">
            отключить показ слайдов по наведению курсора
        </label>
        <br /><br />



        <!-- кнопки выбора слайдов -->

        <input id="shadow-slide1" name="shadow-slide" type="radio" />
        <label class="button SlideKey1" for="shadow-slide1">
            слайд 1
        </label>

        <input id="shadow-slide2" name="shadow-slide" type="radio" />
        <label class="button SlideKey2" for="shadow-slide2">
            слайд 2
        </label>

        <input id="shadow-slide3" name="shadow-slide" type="radio" />
        <label class="button SlideKey3" for="shadow-slide3">
            слайд 3
        </label>

        <input id="shadow-slide4" name="shadow-slide" type="radio" />
        <label class="button SlideKey4" for="shadow-slide4">
            слайд 4
        </label>



        <!-- уведомление по событию "Выбран / не выбран слайд" -->

        <div class="cases visible NonSelected">
            <b> Кликните </b>

            <!-- уведомление по событию "Показ по клику" -->

            <u class="cases visible inline NonAutoDisplay" title="эта часть будет исчезать / появляться при переключении флажка">или наведите курсор</u>

            на кнопку нужного слайда,

            <br />
            причём это уведомление исчезнет, как только
            нажмёте кнопку,

            <br />
            а ниже появится ссылка, чтобы обновить страницу
            заново.
        </div>



        <!-- тумблер левой панели -->

        <input id="shadow-left1" name="shadow-left1" type="checkbox" />
        <label class="switch LeftKey1" for="shadow-left1" title="Развернуть / свернуть панель"></label>



        <!-- левая выпадающая панель -->

        <div id="left" class="LeftBox1">
            <div>
                здесь некий контент <b>для левой</b> панели
            </div>
        </div>



        <!-- тумблер правой панели -->

        <input id="shadow-right1" name="shadow-right1" type="checkbox" />
        <label class="switch RightKey1" for="shadow-right1" title="Развернуть / свернуть панель"></label>



        <!-- правая выпадающая панель -->

        <div id="right" class="RightBox1">
            <div>
                здесь некий контент <b>для правой</b> панели
            </div>
        </div>



        <!-- слайдер -->

        <div id="slider">
            Пример слайдера, управляемого с помощью CSS3



            <!-- сами слайды -->

            <div class="elements">

                <div class="element SlideBox1">
                    СЛАЙД 1<br/><br />

                    или например <b>список товаров</b>, если бы
                    это был модуль оформления заказа<br/><br /><br />

                    <a href="http://demo.imperacms.ru/cart?theme=IdealGift" target="_blank">здесь пример</a>
                    работы такого модуля, только на JavaScript
                </div>



                <div class="element SlideBox2">
                    СЛАЙД 2<br/><br />

                    или например <b>ввод адреса доставки</b>, если бы
                    это был модуль оформления заказа<br/><br /><br />

                    <a href="http://demo.imperacms.ru/cart?theme=IdealGift" target="_blank">здесь пример</a>
                    работы такого модуля, только на JavaScript
                </div>



                <div class="element SlideBox3">
                    СЛАЙД 3<br/><br />

                    или например <b>выбор способа оплаты</b>, если бы
                    это был модуль оформления заказа<br/><br /><br />

                    <a href="http://demo.imperacms.ru/cart?theme=IdealGift" target="_blank">здесь пример</a>
                    работы такого модуля, только на JavaScript
                </div>



                <div class="element SlideBox4">
                    СЛАЙД 4<br/><br />

                    или например <b>завершение заказа</b>, если бы
                    это был модуль оформления заказа<br/><br /><br />

                    <a href="http://demo.imperacms.ru/cart/?theme=IdealGift" target="_blank">
                        здесь пример
                    </a> работы такого модуля, только на JavaScript
                </div>

            </div>



            <!-- строка состояния -->

            <div class="status">

                       <!-- уведомление по событию "Выбран / не выбран слайд" -->

                слайд: <span class="cases visible inline NonSelected">не выбран</span>
                       <span class="cases inline NonSelected">выбран</span>

                                 <!-- уведомление по событию "Показ по клику" -->

                просмотр других: <span class="cases visible inline NonAutoDisplay">по наводке</span>
                                 <span class="cases inline NonAutoDisplay">по клику</span>
            </div>



            <!-- уведомление по событию "Выбран / не выбран слайд" -->

            <span class="cases inline NonSelected">
                <a href="index.html">Открыть страницу заново</a>,
                чтобы ещё раз посмотреть смену уведомлений, связанных
                с событием "Выбор слайда".<br /><br />
            </span>



            <b>Обратите внимание</b>, что: &nbsp;



            <!-- переключатель спойлера 1 -->

            <input id="shadow-spoiler1" name="shadow-spoiler1" type="checkbox" />
            <label class="toggle SpoilerKey1" for="shadow-spoiler1"></label>
            <br />



            <!-- контент спойлера 1 -->

            <div class="more SpoilerBox1">
                - кнопки просмотра находятся вне DOM-ветки слайдера;<br /><br />

                - нажатая кнопка остаётся подсвеченной;<br /><br />

                - ненажатые кнопки демонстрируют свой слайд на время
                подвода курсора и возвращают показ прежнего выбранного
                слайда, если кнопку так и не нажали;<br /><br />

                - данная функция отключается / включается флажком,
                размещенным над кнопками;<br /><br />

                - слайдер удерживает показ выбранного слайда даже после
                отвода курсора от нажатой кнопки;<br /><br />

                - строка состояния отображает текущие настройки;<br /><br />

                - работоспособные спойлеры;<br /><br />

                - выпадающие панели по бокам слайдера, а тумблеры панелей
                меняют свой вид (стрелки влево-вправо) согласно текущему
                состоянию панели.
            </div>



            <!-- текст после спойлера -->

            <br />
            Вся эта логика работает <b>без использования JavaScript</b>,
            на одном лишь CSS3! С появлением CSS4 можно будет
            реализовать ещё больше при меньших ограничениях и упростить
            html-код.<br /><br />

            Анимация смены слайдов и переключения уведомлений
            использована простейшая - показать / скрыть. В данном
            примере это не существенно. Но в принципе могла быть
            и более красивее, причём опять же средствами CSS
            (скажем нечто в духе
            <a href="http://daneden.me/animate/" target="_blank" rel="nofollow">animate.css</a>).
            <br /><br />



            <b>Недостатки</b>, "навязанные" CSS3: &nbsp;



            <!-- переключатель спойлера 2 -->

            <input id="shadow-spoiler2" name="shadow-spoiler2" type="checkbox" />
            <label class="toggle SpoilerKey2" for="shadow-spoiler2"></label>
            <br />



            <!-- контент спойлера 2 -->

            <div class="more SpoilerBox2">
                - особенности обобщенного родственного селектора (~) вынуждают
                располагать управляющий элемент в html-разметке ранее
                управляемой части контента;<br /><br />

                - те же особенности селектора не дают размещать управляющий
                элемент в глубине другой DOM-ветки, чтобы он не имел прямого
                соседства с DOM-веткой управляемого контента;<br /><br />

                - отсутствие селектора прямого родителя вынуждает
                выносить теневой флажок перед кнопкой в html-разметке
                и добавлять во флажок и кнопку лишние атрибуты, только
                чтобы указать их связанность, а также порождает лишние
                конструкции в стилях;<br /><br />

                - проблема разрозненности теневого флажка и кнопки может
                быть решена и в CSS3 за счёт отказа от кнопки и превращения
                флажка в неё (более точно, кнопку подменит псевдо элемент
                :before или :after), однако не все браузеры поддерживают
                такое превращение, чтобы не примешивать туда свою "отсебятину".
            </div>
        </div>



        <!-- подвал -->

    </body> -->
</html>
Оценить:|
  
Комментировать
Раздел: Обучение    
Просмотров: 724

Оставить комментарий