Выезжающая панелька на CSS3
В основном все используют для выезжающей панели код jQuery, но мы будем использовать только HTML и только CSS3. И так, начнем. Так будет выглядеть HTML код: [HTML]<div class="web-deva"> <img src="Feed.png" alt="Отправить отзыв" width="64" /> <div class="web-deva_vnutr"> >> Здесь ваша информация << </div> </div>[/HTML] Теперь перейдем к CSS: [CSS].web-deva { background: #fd9f13; /* фон кнопки */ position: fixed; top: 20%; /* отступ от верха */ left: 0; width: 65px; /* ширина кнопки */ padding: 12px 0; text-align: center; color: #ffffff; -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; } .web-deva_vnutr { position: fixed; top: 20%; left: -400px; background: #fd9f13; /* фон панельки */ width: 370px; /* ширина панельки */ height: 110px; /* высота панельки */ padding: 15px; -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; } .web-deva:hover { left: 400px; } .web-deva:hover .web-deva_vnutr { left: 0; }[/CSS] Вы можете изменить цвет под свой сайт, а также изменить ширину и высоту панельки. Всего доброго!
|
Категория: 
Опубликовал: 
Используемый код:
Web-сайт автора: 
Автор: |
СКАЧАТЬ
Размер файла: 5.2 Kb
Посмотреть |
Комменты
|
14.10.2014 12:24 Вторник | №3
О! Спасибо! А подскажите, как сделать чтобы оно само выезжало при загрузке страницы?
|
|
26.02.2014 16:40 Среда | №1
А можно сделать что бы эта панель была поверх контента??? а так полезная штука)))
|
|
|
03.03.2014 22:08 Понедельник | №2
Почитайте о z-index. Если не получится, пишите на наш форум с подробным описанием проблемы.
|
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация ]
[ Регистрация ]
