ZorNet.Ru — сайт для вебмастера » HTML и CSS » Плавное открытие и скрытие элемента на CSS

Плавное открытие и скрытие элемента на CSS

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

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

Расмотрим как будет смотрется после установки материала.

Это по умолчанию, где видна кнопка и ниже идет заголовок.

Плавное открытие и скрытие блока div средствами

Здесь уже после нажатие на кнопку, где видим заголовок и небольшое описание.

Открыть или скрыть div при нажатии на кнопку

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

HTML

Код

<input type="checkbox" name="toggle" id="sapimeglan_zornet" />
<label for="sapimeglan_zornet"></label>
<div class="gukolpestud">
  <h1>ZorNet.Ru</h1>
  <h2>На сайте найдете информацию по созданию сайта</h2>
</div>
<div class="lirdsanugsa"><h1>Вашему вниманию большая подборка HTML и CSS.</h1>
<h2>Привет, здесь вы можете разместить, то что посчитаете нужным. Это скрипты и стили, что отлично подойдет для красивого и оригинального оформление интернет ресурса или блога.</h2>
</div>

CSS

Код

* {
  margin:0;
  padding:0;
  font-family:"Helvetica Neue", Helvetica, Sans-serif;
  word-spacing:-2px;
}

h1 {
  font-size:29px;
  font-weight:bold;
  color:#2f2e2e;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight:normal;
  font-size:18px;
  color:#867e7e;
  padding:3px 0;
}

.lirdsanugsa {
background:#181818;
color:#FFF;
position: absolute;
top: -249px;
left: 0;
width: 100%;
height: 249px;
padding: 18px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;

}

.lirdsanugsa h1 {
  color:#f9f4f4;
}

#sapimeglan_zornet {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#sapimeglan_zornet + label {
  position: absolute;
  cursor: pointer;
  padding: 10px;
  background: #266eae;
  width: 100px;
  border-radius: 53px;
  padding: 7px 9px;
  color: #fdf9f9;
  line-height: 19px;
  font-size: 12px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  margin: 19px 48px;
  transition: all 500ms ease;
}
#sapimeglan_zornet + label:after {
  content:"Open"
}

.gukolpestud {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#sapimeglan_zornet:checked ~ .lirdsanugsa {
  top: 0;
}

#sapimeglan_zornet:checked ~ .gukolpestud {
  margin-top: 250px;
}

#sapimeglan_zornet:checked + label {
  background: #089e30;
}

#sapimeglan_zornet:checked + label:after {
  content:"Close"
}

На этом все, также можно мосмотреть результат работы открытия и скрытия элемента.

Демонстрация

30 Апреля 2018 Просмотров: 8318 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0