Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Розробка інтерфейсу 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. Інтерфейс користувача

 






© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.