[exs]Панель будет выезжать с левой стороны при наведение курсора на неё,тем самым не будет мешать вам в чате, область сообщений в чате становится больше[/exs]
Код:
.chatPeopleTitle {/* выезжающая кнопочка пользователей чат, , */ position:fixed; /* положение */ top: 40px; /* отступ сверху */ left: 2px; /* отступ слева */ background:DarkRed ; /* цвет фона сколько человек в чате*/ width: 70px; /* ширина блока */ height: 8px; /* высота блока */ font: 10px Arial; /* размер и тип шрифта */ color: #fff; /* цвет текста */ text-align: center; /* выравнивание текста по центру */ padding: 3px; /* отступы от границ внутри блока */ -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; } .chatMain .chatPeople { position:center center; /* положение */ top: 10px; /* отступ сверху */ left: -190px; /* отступ слева */ background: lavender;background-image: url("ФОН ПАНЕЛИ-адрес вашей картинки"); border-image-width: 3px; border: 1px solid #ff5722;/*цвет рамки панели*/ border-image-slice: 35; border-image-repeat: stretch; box-shadow: -2px -2px -2px #B1F4F8, -4px -4px -4px #B1F4F8, -8px -8px -8px #B1F4F8, -16 -16 -16px #2F2BAD, -32 -32 -32px #2F2BAD; /* цвет фона */ color: #000; /* цвет текста */ width: 180px;auto; /* ширина блока */ height: auto; /* высота блока */ padding: 10px; /* отступы от границ внутри блока */ text-align: left; /* выравнивание текста */ /*а------п*/ -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; } .chatMain .chatPeople:hover { left: 220px; /* при наведении выдвигается на скрытые 200px + 20px отступы */ } .chatMain .chatPeople:hover { left: 0; /* отступ слева */ } .chatMain .chatMessages, .chatMain .chatPrivateMessages { width:100%; }
Теги: панели для чата,css коды для чата