Переход направление вверх и вниз на CSS


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

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

Теперь, когда панель слайда скрыта, наша задача, включить событие зависания на кнопке подписки, чтобы раскрывающийся div показывался вверху страницы. Вы могли бы спросить, почему мы установили ссылку подписки на выдвижную панель и выталкивали ее в основной контейнер, а не размещали в основном контейнере. Когда вы наводите курсор на кнопку подписки, выпадающий div появляется. Но весь процесс происходит без эффекта анимации. Единственное, что требуется сейчас, это оживить все это с помощью CSS3.

Проверяя, здесь немного изменил, добавил обвот и палитру цвете:

Чистый CSS слайд с функцией вверх и вниз

HTML

Эффект действительно требует только одного элемента, поэтому мы будем придерживаться этого: 

Код
<div style="height: 185px; width: 185px; border: 2px solid #b5b3b3;">  
  <div class="detukolas" id="slider">  
  <p>Бла-бла-бла-бла-бла ....</p>  
  </div>  
  </div>  

  <button onclick="document.getElementById('slider').classList.toggle('closed');">Переключатель</button>


CSS
Код
.detukolas {  
  overflow-y: hidden;  
  max-height: 185px;  
  -webkit-transition-property: all;  
  -webkit-transition-duration: .5s;  
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);  
  -moz-transition-property: all;  
  -moz-transition-duration: .5s;  
  -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);  
  -ms-transition-property: all;  
  -ms-transition-duration: .5s;  
  -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);  
  transition-property: all;  
  transition-duration: .5s;  
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);  
  background: #273e80;  
  height: 185px;  
  width: 180px;  
  color: #f9efef;  
  padding: 0px 0px 0px 5px;  
}  

  .detukolas.closed {  
  max-height: 0;  
  }  

input[type='submit'], button, .button, .pagination a, .actions a, .green-button, #comment-form input[type='submit'] {  
  background: #f9f9f9;  
  display: inline-block;  
  padding: 5px 12px;  
  border: 1px solid #eee;  
  margin: 0 9px 0 0;  
  text-decoration: none;  
  cursor: pointer;  
  color: #07a;  
  margin-bottom: 10px;  
}


Прежде чем попасть в трюк, давайте определим несколько очевидных свойств.

Здесь самостоятельно выставляем ширину и высоту, так как элемент не фиксирован по высоте, что в этом случае у вас есть два варианта.


Комментариев 0
Привет, оставишь комментарий?
Имя:*
E-Mail:


Поиск по сайту
Пожертвование
Мы принимаем WebMoney

R807857153548
Z417987712394
B281910665473