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

рейтинг 1.0 из 5
Здесь вы можете вверх сайта задействовать, а это установить плавное появление элемента или блока при помощи 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" 

}


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



Источник: zornet.ru
  • Дата: 01.05.2018, 18:22
  • Просмотры: 54
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

Комментарии
Добавить комментарий