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

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

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

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



Шапка чата

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

1

В этой теме будут собраны коды которые можно использовать в процессе работы над дизайном шапки чата.

0

2

Код для вставки картинки в шапку чата:

Код:
.chatHeader {
   background-image: url(ссылка на картинку);
   background-position: center center;
   background-repeat:no-repeat;
}

0

3

Код чтобы удалить надпись-название в шапке чата:

Код:
.chatTitle {
display: none;
}

0

4

Растянутая шапка чата:

Код:
.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;	
}

0

5

Иконка с надписью в шапке чата:

Код:
.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);}

0

6

Надпись в шапке чата:

Код:
.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;}

0

7

Код выдвижной панели с объявлением при наведении на кнопки с правой стороны шапки чата:

Код:
.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;

0

8

Код синих кнопок "Ник", "Чат", "Chatovod":

Код:
.chatHeader .chatTopLine {
    border: 1px solid #3300DD;
    border-radius: 15px;
    background-color: #07A4F7;
}

0

9

Код скругленных кнопок чата "Общий" и кнопки привата:

Код:
.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; }

0

10

Код чтобы кбрать иконки в списках при нажатии на кнопки "Чат", "Ник", "Chatovod":

Код:
.msi {
  display: none;
}

0

11

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

Код:
.chatHeaderWrapper .chatTitle {
    text-align: center;
    width: 100%;
}

0

12

Код скругленной шапки чата с фоновым рисунком и надписью:

Код:
.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;}

0

13

Код бегущей строки чата в шапке:

Код:
.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;
}

0



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