В этой теме будут собраны коды которые можно использовать в процессе работы над дизайном шапки чата.
Шапка чата
Страница: 1
Сообщений 1 страница 17 из 17
Поделиться12018-02-21 14:09:48
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Поделиться22018-02-21 14:11:14
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Код для вставки картинки в шапку чата:
Код:
.chatHeader {
background-image: url(ссылка на картинку);
background-position: center center;
background-repeat:no-repeat;
}Поделиться32018-02-21 14:20:12
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Код чтобы удалить надпись-название в шапке чата:
Код:
.chatTitle {
display: none;
}Поделиться42018-02-21 14:23:52
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Растянутая шапка чата:
Код:
.chatHeader {
border-radius: 15px;
background-image: url(ссылка на картинку);
background-position: center center;
background-repeat: repeat;
border-radius: 20px;
border-right: 2px solid #fff100;
border-left: 2px solid #fff100;
border-bottom: 2px solid #fff100;
border-top: 1px solid #fff100;
}Поделиться52018-02-21 15:15:28
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Иконка с надписью в шапке чата:
Код:
.chatTitle::before { position: absolute; width:45px; height:45px; top:12px; left:12px; content:'Ваш текст'; background: url("адрес иконки") 0 0 no-repeat; background-size:40px; transition:all 0.3s ease;}.chatHeader:hover .chatTitle::before { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);}Поделиться62018-02-21 15:16:50
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Надпись в шапке чата:
Код:
.chatHeader .chatTitle:after{ width: 100%; white-space:nowrap; line-height: 15px; overflow:hidden; font-size: 10px; color: cornflower#ff0000; -webkit-animation: step 1s steps(50) infinite; animation: step 15s steps(50) infinite;}/* Анимация */@keyframes step{ 0% { width: 0;} 100% {width:100%;}}@-webkit-keyframes step{ 0% { width: 0;} 100% {width:100%;}}.chatHeader .chatTitle:after { content:"Ваш текст"; font-family:arial; font-size: 15px; text-align:justify; text-shadow:3px 3px 10px green,-3px -3px 10px blue;color: #ff0000; position: absolute; top:5%; left:100px; bottom:0; right:100px; z-index: 1; opacity: 1;}Поделиться72018-02-21 15:36:53
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Код выдвижной панели с объявлением при наведении на кнопки с правой стороны шапки чата:
Код:
.chatHeader:before {
content: "Ваше объявление";font-family: Monotype Corsiva;
font-size: 20px;
color: #00aeef;
font-weight: bold;
display: inline-block;
margin: 0 0 1em;
white-space: pre-wrap;
display: block;
background: transparent url("адрес картинки") no-repeat scroll 0 0;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 10px;
box-shadow: 0 0 0 3px #60B88D, 0 0 0 2px #ff0000, 0 0 0 4px #BFE3D1;
width: 150px;
height: 110px;
line-height: 18px;
opacity: 0;
padding: 10px 10px;
position: absolute;
right: 240px;
top: -500px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}.chatHeader:hover:before {
display: block;
background: linear-gradient;
width: 197px;
height: 220px;
border-radius: 30px 10px 5px 0;
box-shadow: 0 0 0 4px #ee1d24, 0 0 0 4px #ee1d24, 0 0 0 4px #ee1d24;
right: 255px;
top: 200%;
opacity: 2;Поделиться82018-02-21 15:40:03
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Код синих кнопок "Ник", "Чат", "Chatovod":
Код:
.chatHeader .chatTopLine {
border: 1px solid #3300DD;
border-radius: 15px;
background-color: #07A4F7;
}Поделиться92018-02-21 15:41:23
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Код скругленных кнопок чата "Общий" и кнопки привата:
Код:
.chatTabs > ul > li > a { padding: 0px 14px 0px 10px; height: 100%; text-decoration: none; border-top: 0px none !important; border-right: 0px none !important; vertical-align: middle; display: inline-block; line-height: 24px; border-radius: 10px; }Поделиться102018-02-21 22:19:16
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Код чтобы кбрать иконки в списках при нажатии на кнопки "Чат", "Ник", "Chatovod":
Код:
.msi {
display: none;
}Поделиться112018-02-24 15:46:38
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Код тектового названия чата посередине:
Код:
.chatHeaderWrapper .chatTitle {
text-align: center;
width: 100%;
}Поделиться122018-02-26 15:07:14
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Код скругленной шапки чата с фоновым рисунком и надписью:
Код:
.chatHeader {background-image:url(ссылка на надпись или другой объект),url(ссылка на фон);background-position: center, 0px;background-repeat:no-repeat;background-color: # 0000CC;font-size: 0pt;border-radius: 25px;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 20px #777 inset;}Поделиться132018-03-04 22:56:31
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Код бегущей строки чата в шапке:
Код:
.chatHeader .chatTitle:after{
width: 100%;
white-space:nowrap;
line-height: 15px;
overflow:hidden;
font-size: 10px;
color: cornflower#ff0000;/* цвет можно менять-Апостол */
-webkit-animation: step 1s steps(50) infinite;
animation: step 15s steps(50) infinite;
}
/* Анимация */
@keyframes step{
0% { width: 0;}
100% {width:100%;}
}
@-webkit-keyframes step{
0% { width: 0;}
100% {width:100%;}
}.chatHeader .chatTitle:after {
content:"Ваш текст";
font-family:arial;
font-size: 15px;
text-align:justify;
text-shadow:3px 3px 10px green,-3px -3px 10px blue;color: #ff0000;
position: absolute;
top:5%; left:100px; bottom:0; right:100px;
z-index: 1;
opacity: 1;
}Поделиться142019-04-20 17:38:41
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Диана Канюка, сообщение удалено как спам. 
Поделиться152019-04-20 17:40:00
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Мира Кубрак, сообщение удалено как спам.
Поделиться162019-04-20 17:40:34
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Дарья Выродова, сообщение удалено как спам.
Поделиться172019-04-20 17:41:06
- Администратор
- Откуда: Украина
- Зарегистрирован: 2017-06-18
- Приглашений: 15
- Сообщений: 65535
- Уважение: [+10/-0]
- Позитив: [+14/-0]
- Пол: Мужской
- Провел на форуме:
2 дня 21 час - Последний визит:
2019-06-09 22:18:03
Тамара Радионова, сообщение удалено как спам.
Страница: 1