Ваша БЕСПЛАТНАЯ рекламма 

(✿◠‿◠)Форум общения, советы дизайнерам(ง ͠° ͟ل͜ ͡°)ง

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Низ чата

Сообщений 1 страница 12 из 12

1

В этой теме собраны коды для дизайна нижней части чата.

0

2

Код фона снизу чата:

Код:
.chatFooter {background-image:url("адрес фона");background-position:left center;
-webkit-background-size: 100%;-o-background-size: 100%;-moz-background-size: 100%;-ms-background-size: 100%;-khtml-background-size: 100%;background-size: 100%;background-repeat:no-repeat;}

Код скругления низа чата и вставки фона:

Код:
.chatFooter { border-radius: 25px; background-image: url(ссылка на фон); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; box-shadow: 0 0 1px #777, 0 0 2px #777, 0 0 3px #777, 0 0 4px #777, 0 0 5px #777, 0 0 6px #777, 0 0 7px #777, 0 0 10px #777 inset;}
.chatPeople .chatPeopleTitle {margin:4px 0 4px 8px;font-family: Monotype Corsiva;font-style: normal;font-size: 9pt;}

0

3

Код кнопки "Отправить" синим цветом (можно менять):

Код:
.chatSendButton {
background-color:#14c4fa;
}

0

4

Код кнопки статуса (функции кнопки):

Код:
.chatUserAway[title="Не беспокоить"] .chatUserWrapper {
opacity: 2;position: absolute;
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}.chatUserAway[title="Отошел"], .chatPeople ul.chatPeopleList li[title="Отошел"].hover {
display: none;.chatUserAway[title="Отошел"] .chatUserWrapper
display: none;}

0

5

Код кнопки статуса (вид, смена цвета при нажатии):

Код:
.chatSendButton:active {
    background-color: #43a047; /* Цвет фона */
}.chatSendExitPanel select {
    background-color: #00ffff; /* Цвет фона */
    border-radius: 22px; /* Закругление */
    border: 2px solid rgba(190, 180, 190, 0.4); /* Граница (кайма) */
}
/* Кнопка отправки сообщения при наведении */
.chatSendExitPanel select:hover {
    background-color: #81c784; /* Цвет фона */
    transition: .3s; /* Плавность смени цвета фона */
}
/* Кнопка отправки сообщения при нажатии */
.chatSendExitPanel select:active {
    background-color: #43a047; /* Цвет фона */
}

Код кнопки "Отправить" (такой же стиль):

Код:
.chatSendButton {
    background-color: #00ffff; /* Цвет фона */
    border-radius: 22px; /* Закругление */
    border: 2px solid rgba(190, 180, 190, 0.4); /* Граница (кайма) */
}
/* Кнопка отправки сообщения при наведении */
.chatSendButton:hover {
    background-color: #81c784; /* Цвет фона */
    transition: .3s; /* Плавность смени цвета фона */
}

0

6

Код красной строки для ввода:

Код:
.chatSendText.chatInputText {
/* Строка ввода текста в чат */
     background-color: #efcfdf;
     font-size: 14pt;
     height: 20px;
     color: #0000f0;
     border-radius: 10px;
}

0

7

Код подсвеченной кнопки включения звука:

Код:
.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel a.muted { background-image: url("http://tri-svesdy.ru/images/sait/knopki/hot-kr.png"); color: #00CC00; font-weight: bold; padding: 0px 5px 0px 21px; border-radius: 2px; box-shadow: 0 0 2px #B1F4F8, 0 0 4px #B1F4F8, 0 0 8px #B1F4F8, 0 0 16px #2F2BAD, 0 0 32px #2F2BAD; }

.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel a { background: transparent url("http://tri-svesdy.ru/images/sait/knopki/hot.png") no-repeat scroll 0 0; float: right; font-size: 8pt; color: #FF0000; font-weight: bold; font-weight: normal; height: 16px; padding: 0px 5px 0px 21px; text-decoration: none; border-radius: 2px; box-shadow: 0 0 2px #B1F4F8, 0 0 4px #B1F4F8, 0 0 8px #B1F4F8, 0 0 16px #2F2BAD, 0 0 32px #2F2BAD; }

input.chatNickname { border-radius: 10px; }

0

8

Иконка раздела "смайлы":

Код:
.chatSendLinksPanel a.chatLinkSmiles {
  background: transparent url(адрес иконки 18 на 18) no-repeat 0 0 / 16px 16px;
}

Иконка раздела "медиа":

Код:
.chatSendLinksPanel .chatLinkImage {
  background: transparent url(адрес иконки 18 на 18) 0 0 no-repeat;
}

Иконка раздела "мой профиль":

Код:
.chatSendLinksPanel .chatLinkProfile {
  background: transparent url(адрес иконки 18 на 18) 0 0 no-repeat;
}

Иконка раздела "счет"

Код:
.chatSendLinksPanel .chatLinkGold {
  background: transparent url(адрес иконки 18 на 18) 0 0 no-repeat;
}

Иконка раздела "Vip"

Код:
.chatSendLinksPanel .chatLinkVip {
  background: transparent url(адрес иконки 18 на 18) 0 0 no-repeat;
}

Иконка раздела "еще"

Код:
.chatLinkMore {
    padding-left: 21px;
    background: transparent url("адрес иконки 18 на 18") no-repeat 0 0;
}

Иконка раздела "модер":

Код:
.chatLinkModerate {
    padding-left: 21px;
    background: transparent url("адрес иконки 18 на 18") no-repeat 0 0;
}

0

9

Код чтобы увеличить окно смайлов:

Код:
.smilesBox {
    background-color: rgba(255, 255, 255, 100);
    position: absolute;
    left: 0;
    top: 0;
    width: 600px;
    height: 250px;
    overflow: auto;
    z-index: 100;
}

Код чтобы увеличить окно смайлов и сменить цвет фона окна:

Код:
.smilesBox {
    background-color: rgba(70, 212, 224, 0.93);
    position: absolute;
    left: 0;
    top: 0;
    width: 900px;
    height: 250px;
    overflow: auto;
    z-index: 100;
}

Код скругления окна смайлов:

Код:
.smilesBox { position: absolute; left: 0px; top: 0px; width: 75%; height: 250px; overflow: auto; z-index: 98; }

Код для добавления фона в окне смайлов:

Код:
.smilesBox,.hover { background-image:url(ссылка на фон); background-position: center center; background-repeat:no-repeat; background-size: 100% 100%; padding:5px 0px 0px 10px; border: 1px solid #; border-radius:60px 60px 10px 10px; box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #c79900, 0 0 5px #ffe799, 0 0 6px #ffe799, 0 0 7px #ffe799, 0 0 10px #ffe799;  }

Код окна смайлов с розовыми вкладками (разделами) и интервалами между смайлами:

Код:
.smilesBox {
    position: fixed;
    background: rgb(255, 255, 255);
    margin: 1px -3px;
    width: 332px !important;
}
.smilesBox p {
    background: rgba(255, 0, 94, 0.88);
    padding: 5px;
    color: #fff;
}
.smilesBox img {
    background-color: #fff;
    padding: 5px;
}
.smilesBox a:hover img {
    background-color: #e0f2f1;
}
.smilesBox {
    width:75%;
}

0

10

Код бегущей строки:

Код:
.chatFooter .chatFooterWrapper:after { content:"Ваш текст"; font-family:ariai; font-size: 20px; color:#240935; letter-spacing: 1px; position: absolute; top:70%; left:0; bottom:0; right:0px; z-index: 0; -webkit-animation: l1_animation 35s linear infinite; -moz-animation: l1_animation 20s linear infinite; } @-webkit-keyframes l1_animation { 0%{left:100%;} 100%{left:-100%;} } @-moz-keyframes l1_animation { 0%{left:100%;} 100%{left:-100%;} } div { border-radius: 00px; }

0

11

Код надписи снизу чата:

Код:
.chatFooter:after { content: "Ваш текст"; position: absolute; left: 0; right: 0; bottom: 0; text-align: center; border-radius: 25px; }

0

12

Прямоугольная (прозрачная) кнопка с картинкой

Код:
#join-chat-button {
    color: rgba(f7941d);
    background: url(ссылка на Вашу картинку) no-repeat center;
}

0



Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC