• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать выдвижную панель при помощи CSS (Функциональная выдвижная панель сайта на HTML и CSS)
Создать выдвижную панель при помощи CSS
Kosten
Дата: Понедельник, 11.06.2018, 22:46 | Сообщение 1
Администраторы
Сообщений:18250
Награды: 55


Думаю многим на сайтах встречалась функция на действительную и крутую скрытую панель, которая содержит некоторую релевантную информацию, и эта панель открывается нам, с классной анимацией, когда мы нажимаем на определенную кнопку, вообще от клика. Обычно это достигается с помощью jQuery, но здесь все будет работать на чистом стиле CSS. Но теперь, когда мы приступаем к будущему, и CSS3 становится реальностью, вот учебник о том, как создать анимированию панель слайдов, используя только CSS3.

Эта панель с раскрывающимся содержимым может использоваться для различных целей. Сегодня мы можем видеть, что есть много скрытых меню или контента, которые могут быть раскрыты нам, нависая над кнопкой или нажав на кнопку. Выдвижная панель может использоваться различными способами. Его использование зависит от требований сайта.

Его можно использовать для выпадающего окна входа в систему или для простого перечисления подписных параметров для сайта. Мы собираемся предположить сценарий, в котором мы хотим выбрать подписку для зрителей в правом верхнем углу экрана:

Это когда панель закрыта.



Это после клика она открылась.



Безусловно имеет один эффект, который отрабатывает при помощи чистого CSS, скользит вверх и вниз, где содержимое скрывается, когда идет вверх и при скольжении вниз. Причина заключается в том, что вы можете не знать высоту контента, но вы можете самостоятельно ее задать.

Приступаем к установке:

HTML

Код
<div class="ktesanqazukimted">
<input type="checkbox" id="paneltoggle" />
<label for="paneltoggle" title="Самостоятельно создать сайт"></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.ktesanqazukimted {
  position: relative;
  margin: 0;
  margin-bottom: 1em;
  }

div.ktesanqazukimted > 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.ktesanqazukimted:after {
    content: '';
    display: block;
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 10px;
    box-shadow: 0 2px 7px grey, 2px 2px 3px #235e90 inset;
    background: #132e61;
    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(29, 77, 119)), color-stop(50%,rgb(10, 42, 119)), color-stop(100%,rgba(33, 40, 53, 0.72)));
    background: -webkit-linear-gradient(top, rgb(46, 76, 136) 0%,rgb(14, 69, 117) 50%,rgba(39, 49, 62, 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(32, 53, 115) 0%,rgb(11, 68, 117) 50%,rgba(36, 39, 56, 0.72) 100%);
}

div.ktesanqazukimted input[type="checkbox"] {
    position: absolute;
    right: 49.8px;
    width: 59.7px;
    height: 39.8px;
    bottom: -32px;
    z-index: 9;
    cursor: pointer;
    opacity: 0;
}

div.ktesanqazukimted input[type="checkbox"]:checked ~ div {
    height: 217px;
    opacity: 1;
    overflow: auto;
}

div.ktesanqazukimted 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: #203761;
    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(44, 77, 119)), color-stop(50%,rgb(12, 43, 119)), color-stop(100%,rgba(26, 64, 121, 0.72)));
    background: -webkit-linear-gradient(top, rgb(41, 79, 103) 0%,rgb(32, 81, 132) 50%,rgba(40, 64, 130, 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(45, 64, 123) 0%,rgb(13, 31, 117) 50%,rgba(25, 49, 117, 0.72) 100%);
    box-shadow: 0 2px 7px #0e0e0e, 4px 4px 5px #22499a inset, 0 -2px 2px rgba(55, 102, 156, 0.7) inset, 0 4px 0 rgba(245, 241, 241, 0.7) inset;
}

div.ktesanqazukimted 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.ktesanqazukimted 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;
  }


Теперь, когда мы знаем, чего хотим, давайте планируем, как будет выглядеть архитектура xHTML всего макета. В основном нам нужны две части макета. Одна из них будет первой, которая станет нашей скрытой панелью и будет содержать варианты подписки. Вторая часть будет основной областью содержимого для всего макета.

Примечание. В этом руководстве используются некоторые продвинутые методы css3, которые еще не поддерживаются в Firefox. Чтобы получить полную версию, вы должны увидеть demo версию в реальном виде

Демонстрация
Прикрепления: 0804990.png(5.4 Kb) · 3945898.png(28.7 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать выдвижную панель при помощи CSS (Функциональная выдвижная панель сайта на HTML и CSS)
  • Страница 1 из 1
  • 1
Поиск: