Архив Айгуст —
архив помогалки Августа
«Никто не вечен… В отличие от знаний»
Внимание!
  Материалы на данном сайте представляют собой архивную копию форума «Айгуст - помогалка Августа» на момент октября 2019 года с целью сохранения знаний. Все права на материалы принадлежат их авторам. Материалы представлены в открытый доступ в ознакомительных целях, запрещено их коммерческое использование без согласования с авторами. Администрация сайта не несёт ответственности за содержание материалов, в том числе за наличие вредоносных закладок в коде, используйте любой предоставленный код на свой страх и риск. Рекомендуется проверять любые файлы вручную и перезаливать на собственный хостинг, дабы избежать возможной модификации или исчезновения в будущем.

CSS фон для чата

Jaguar
Админ
Сообщений: 1505
01.02.2013 04:27:17
CSS фон для чата
Если хотите вставить в анкету, раздел Люди, килку или ещё куда css фон, то вставте эту часть кода в то место, где хотите видеть данный фон:
Код:
<link rel="stylesheet" type="text/css" href="http://rx.at.ua/chat-file/js_code/css_fon_star.css" />

Выглядит это так: http://rx.at.ua/chat-file/demo_code/cssfon_nax.html
Если не хотите подгружать css файл с моего сайта, то установить этот код в тот раздел, где желаете видеть фон.
Код:
<style>
body {
background-color: black;
/* Webkit */
background-image:
-webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
/* Firefox */
background-image:
-moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
-moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
-moz-radial-gradient(circle, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
-moz-radial-gradient(circle, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
/* Background images size */
background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
/* Background images position*/
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}

body {
background-color: black;
/* Firefox */
background-image:
-moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
-moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
-moz-radial-gradient(ellipse, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
-moz-radial-gradient(ellipse, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
/* Webkit */
background-image:
-webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
/* Background Attributes */
background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
/* Animation */
animation-name: movement;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/* Firefox */
-moz-animation-name: movement;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
/* Webkit */
-webkit-animation-name: movement;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-moz-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-webkit-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
</style>
С помощью редактирования RGB, цвет звёзд можно изменить.
[изображение]
#30325
Jaguar
Админ
Сообщений: 1505
01.02.2013 04:37:39
Re: CSS фон для чата
Вот ещё один CSS фон. Если хотите поставить его, то действуйте по первому примеру выше.
Посмотреть: http://rx.at.ua/chat-file/demo_code/cssfon2_nax.html
Код:
<link rel="stylesheet" type="text/css" href="http://rx.at.ua/chat-file/js_code/css_fon_sneg.css" />

Или этот код, если не хотите подгружать css.
Код:
<style>
body{
background-color:black;

/* Firefox */
background-image:
-moz-radial-gradient(circle, #FFFFFF, transparent 20px),
-moz-radial-gradient(circle, #FFFFFF, transparent 10px),
-moz-radial-gradient(circle, rgba(255,255,255,.9), transparent 20px),
-moz-radial-gradient(circle, rgba(255,255,255,.4), transparent 10px);

/* Webkit */
background-image:
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 20, from(white), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 10, from(white), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 20, from(rgba(255,255,255,.9)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 10, from(rgba(255,255,255,.4)), to(transparent));

/* Background Attributes */
background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;

/* Animation */
animation-name: movement;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;

/* Firefox */
-moz-animation-name: movement;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;

/* Webkit */
-webkit-animation-name: movement;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 550px, -320px 410px, -120px 540px, -150px 350px;
}
}
@-moz-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 550px, -320px 410px, -120px 540px, -150px 350px;
}
}
@-webkit-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 550px, -320px 410px, -120px 540px, -150px 350px;
}
}
</style>
[изображение]
#30326

Другие темы раздела