Выдвижная верхняя панель с помощью CSS
 | |
| Отличное решение для любого сайта, как выдвигающееся панель при клике. Где можно содержать как информацию, так и функций виде навигаций. Думаю многие встречали в сети на сайтах в самом верху кнопки, и возможно кто-то не догадывался, что это есть основная функция на сайте. Так как при клике появляется панель, а точнее красиво выезжает из-под шапки или самого верху, что красиво и современно смотрится. Можно полагать, что основном там материал размещают для тех, кто часто заходит на сайт и всегда в курсе его изменение по навигаций. Но здесь у нас будет яркий оттенок, где идет заметная полоса с обводом, под кнопку, виде стрелки. Что на официальный сайт можно выставить и на тематический блог. Безусловно существует много вариаций на такую функцию, но здесь плюс в том, что все будет работать на чистом CSS. Это полностью рабочая панель, что создана с помощью CSS3, которая при нажатии на нее показывает какой-то контент, как уже говорили, где возможно будет описание или вообще выставить видео плеер, а затем после просмотра идет функция на закрытую часть содержимого страницы. Полностью интерфейс создается только с помощью CSS, используя оригинальную комбинацию теней CSS3, где на светлом фоне очень заметно, но главное вписывается в дизайн, что касается круглых границ и контента, созданного CSS2. Здесь видим как будет по умолчанию, а точнее закрытая панель:  По клику открываем ее, где ниже предоставлено Demo, для реального просмотра:  Для начало рассмотрим одну из главных функций, это окно открытие, так как оно может быть любого размера, где все зависит от того, что будет находится в этой панели. Код div.gukisam_qytukan input[type="checkbox"]:checked ~ div { height: 247px; opacity: 1; overflow: auto; } Не нужно забывать ширину открытия, где сразу нужно обозначить, какой стиль за это отвечает. Чтобы сделать переключение в состояние отображения основы панели, здесь используем классическую технику флажка, это когда флажок показан, то идет расширение контента DIV с помощью: checked псевдо-класса и селектора. Приступаем к установке: HTML Код <div class="gukisam_qytukan"> <input type="checkbox" id="paneltoggle" /> <label for="paneltoggle" title="ZorNet.Ru: Портал Вебмастера"></label> <div class="content"> <p>Здесь может быть разнообразное описание, что скрывается в блоке, где при клике облок открывается, и аналогично можно закрыть.</p> <p> Сайт: <a href="http://zornet.ru/">ZorNet.Ru: Портал Вебмастера</a>. </p> </div> </div> CSS Код body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } div.gukisam_qytukan { position: relative; margin: 0; margin-bottom: 1em; } div.gukisam_qytukan > div { height: 9px; padding: 7px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; background: #c7eff9; position: relative; opacity: 0; -moz-transition: all 0.2s ease-in-out 0.1s; -o-transition: all 0.2s ease-in-out 0.1s; -webkit-transition: all 0.2s ease-in-out 0.1s; transition: all 0.2s ease-in-out 0.1s; } div.gukisam_qytukan:after { content: ''; display: block; bottom: 0; position: absolute; width: 100%; height: 10px; box-shadow: 0 2px 7px grey, 2px 2px 3px #902323 inset; background: #611316; background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(119, 29, 34)), color-stop(50%,rgb(119, 10, 16)), color-stop(100%,rgba(53, 33, 34, 0.72))); background: -webkit-linear-gradient(top, rgb(136, 46, 51) 0%,rgb(117, 14, 19) 50%,rgba(62, 39, 40, 0.72) 100%); background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%); background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%); background: linear-gradient(to bottom, rgb(115, 32, 37) 0%,rgb(117, 11, 17) 50%,rgba(56, 36, 37, 0.72) 100%); } div.gukisam_qytukan input[type="checkbox"] { position: absolute; right: 49.8px; width: 59.7px; height: 39.8px; bottom: -32px; z-index: 9; cursor: pointer; opacity: 0; } div.gukisam_qytukan input[type="checkbox"]:checked ~ div { height: 250px; opacity: 1; overflow: auto; } div.gukisam_qytukan label { position: absolute; right: 47px; width: 59px; height: 39px; bottom: -29px; border-bottom-left-radius: 27px; border-bottom-right-radius: 27px; cursor: pointer; z-index: 5; background: #612023; background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(119, 44, 48)), color-stop(50%,rgb(119, 12, 18)), color-stop(100%,rgba(121, 26, 27, 0.72))); background: -webkit-linear-gradient(top, rgb(103, 41, 45) 0%,rgb(132, 32, 37) 50%,rgba(130, 40, 41, 0.72) 100%); background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%); background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%); background: linear-gradient(to bottom, rgb(123, 45, 50) 0%,rgb(117, 13, 18) 50%,rgba(117, 25, 26, 0.72) 100%); box-shadow: 0 2px 7px #0e0e0e, 4px 4px 5px #9a2222 inset, 0 -2px 2px rgba(156, 55, 60, 0.7) inset, 0 4px 0 rgba(245, 235, 235, 0.7) inset; } div.gukisam_qytukan label:hover { box-shadow: 0 3px 8px black, 4.9px 4.9px 5.9px brown inset, 0 -3px 3px rgba(148, 33, 39, 0.72) inset, 0 5px 0 rgba(251, 248, 248, 0.7) inset, 0 0 15px rgba(249, 244, 244, 0.8) inset; } div.gukisam_qytukan label:after { content: ''; position: absolute; display: block; width: 0; height: 0; border: 9px solid transparent; border-color: white transparent transparent transparent; top: 21px; left: 21px; box-shadow: 0 0 10px gray inset; } Эта панель проверена на работоспособность всех функций во всех современных браузерах: IE, FF, Chrome, Safari, Opera и другие программы для выхода в сеть интернета. Также по умолчанию идет в красном оттенке, что больше всего сделано на ее заметность, и эта палитра большинству оттенков цветов подходит. Но здесь все выстроено на стилистике CSS, что самостоятельно можете изменить форму и саму палитру. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |