3475
- 1
- Автор: --------------
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css hmlt
- Демо:
На многих сайтах наверное видели с боку кнопочку на которую нажимаешь и выдвигается блок с информациейвот представляю вам код этого блока
Этот код в main.tpl
Код:
<div id="slideout">
<img src="img/23/text.png" alt="Задать вопрос" />
<div id="slideout_inner">
[Код формы вставляется здесь]
</div>
</div>
ну и стили в css
Код:
#slideout {
position: fixed;
top: 40px;
left: 0;
width: 35px;
padding: 12px 0;
text-align: center;
background: #6DAD53;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#slideout_inner {
position: fixed;
top: 40px;
left: -250px;
background: #6DAD53;
width: 200px;
padding: 25px;
height: 130px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
border-radius: 0 0 5px 0;
}
#slideout_inner textarea {
width: 190px;
height: 100px;
margin-bottom: 6px;
}
#slideout:hover {
left: 250px;
}
#slideout:hover #slideout_inner {
left: 0;
}Можешь почитать и вот эту статейку "Очень красивая анимация кнопки на CSS3"
Это тоже интересно
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
ответить