![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Розробка інтерфейсу web-додатку чата коледжа
Інтерфейс чату реалізований наступним кодом: /* Mainchatcontainer */ #chatContainer{ width: 510px; margin: 100px auto; position: relative; } /* Верхня панель */ #chatTopBar{ height: 40px; background: url('../img/solid_gray.jpg') repeat-x #d0d0d0; border: 1px solid #fff; margin-bottom: 15px; position: relative; color: #777; text-shadow: 1px 1px 0 #FFFFFF; } #chatTopBar.name{ position: absolute; top: 10px; left: 40px; } #chatTopBarimg{ left: 9px; position: absolute; top: 8px; } /* Чат */ #chatLineHolder{ height: 360px; width: 350px; margin-bottom: 20px; } .chat{ background: url('../img/chat_line_bg.jpg') repeat-x #d5d5d5; min-height: 24px; padding: 6px; border: 1px solid #FFFFFF; padding: 8px 6px 4px 37px; position: relative; margin: 0 10px 10px 0; } .chat: last-child{ margin-bottom: 0; } .chatspan{ color: #777777; text-shadow: 1px 1px 0 #FFFFFF; font-size: 12px; } .chat.text{ color: #444444; display: inline-block; font-size: 15px; overflow: hidden; vertical-align: top; width: 190px; } .chat.gravatar{ background: url('https://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536? size=23') no-repeat; left: 7px; position: absolute; top: 7px; } .chatimg{ display: block; visibility: hidden; } .chat.time{ position: absolute; right: 10px; top: 12px; font-size: 11px; } .chat.author{ margin-right: 6px; font-size: 11px; } /* Область користувача */ #chatUsers{ background-color: #202020; border: 1px solid #111111; height: 360px; position: absolute; right: 0; top: 56px; width: 150px; } #chatUsers.user{ background: url('https://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536? size=30') no-repeat 1px 1px #444444; border: 1px solid #111111; float: left; height: 32px; margin: 10px 0 0 10px; width: 32px; } #chatUsers.userimg{ border: 1px solid #444444; display: block; visibility: hidden; } /* Нижня панель */ #chatBottomBar{ background: url('../img/solid_gray.jpg') repeat-x #d0d0d0; position: relative; padding: 10px; border: 1px solid #fff; } #chatBottomBar.tip{ position: absolute; width: 0; height: 0; border: 10px solidtransparent; border-bottom-color: #eeeeee; top: -20px; left: 20px; } #chatContainerinput{ background: url('../img/input_bg.jpg') repeat-x #dcdcdc; height: 26px; font: 13px/26px Calibri, Arial, sans-serif; color: #777; border: 1px solid; border-color: #c1c1c1 #eee #eee #c1c1c1; text-shadow: 1px 1px 0 #E4E4E4; padding: 0 5px; margin-right: 5px; width: 185px; outline: none; } #submitForm{ display: none; } input#chatText{ /* Текстове поле чата */ width: 385px; } /* Зміна стилів по замовчуванню для jScrollPane */ .jspVerticalBar{ background: none; width: 20px; } .jspTrack{ background-color: #202020; border: 1px solid #111111; width: 3px; right: -10px; } .jspDrag { background: url('../img/slider.png') no-repeat; width: 20px; left: -9px; height: 20px! important; margin-top: -5px; } .jspDrag: hover{ background-position: leftbottom; } /* Додаткові стилі */ a.logoutButton{ background-color: #bbb; border: 1px solid #eee! important; color: #FFFFFF! important; font-size: 12px; padding: 5px 9px; position: absolute; right: 10px; text-shadow: 1px 1px 0 #888; top: 7px; -moz-box-shadow: 0 0 7px #888 inset; -webkit-box-shadow: 0 0 7px #888 inset; box-shadow: 0 0 7px #888 inset; } a.logoutButton: hover{ text-shadow: 1px 1px 0 #888; -moz-box-shadow: 0 0 7px #666 inset; -webkit-box-shadow: 0 0 7px #666 inset; box-shadow: 0 0 7px #666 inset; } #chatContainer.blueButton{ background: url('../img/button_blue.png') no-repeat; border: none! important; color: #516D7F! important; display: inline-block; font-size: 13px; height: 29px; text-align: center; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); width: 75px; margin: 0; cursor: pointer; } #chatContainer.blueButton: hover{ background-position: leftbottom; } p.noChats, #chatUsers.count{ clear: both; font-size: 12px; padding: 10px; text-align: center; text-shadow: 1px 1px 0 #111111; } #chatUsers.count{ font-size: 11px; } .rounded{ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #chatErrorMessage{ width: 100%; top: 0; left: 0; position: fixed; background-color: #ab0909; border-bottom: 1px solid #d32a2a; font-size: 23px; padding: 16px; text-align: center; color: #fff; text-shadow: 1px 1px 0 #940f0f; } Рис.4.2.1. Інтерфейс користувача
|