Фон форума, разные версии. Или «Как сделать красиво», часть 2

[Serifa]

Отвечая камраду dron, в том числе. Вот те фоны, что я лично пробовала.

Номер первый, который в итоге я нашла самым подходящим. Он хорошо растягивается и ужимается, и выглядит на всех браузерах почти одинаково, так как тут - картинки.

Код Выделить Развернуть

/* Set a fontsize that will look the same in all browsers. */
body
{
background: #000000;
    background-image: url(../images/theme/pattern-left.jpg), url(../images/theme/pattern-right.jpg);
    background-position: left top, right top;
background-repeat: no-repeat;
   font: 83%/130% "Verdana", "Arial", "Ubuntu", "Ubuntu Beta", "Helvetica", "sans-serif";
max-width:1000px;
   margin: 0 auto;
   padding: 0px 0;
}


Сравните с:

Код Выделить Развернуть

body default
{
   background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
   font: 81%/130% "Verdana", "Arial", "Helvetica", "sans-serif", "Ubuntu", "Ubuntu Beta", "UbuntuBeta";
max-width:1000px;
   margin: 0 auto;
   padding: 15px 0;
}


Далее, по красоте, идёт номер второй - градиент полукругом. Этот фон работает только за счет цсс.
Но тут есть проблема, которую я не поняла: не могу поменять цвета! Если кто сообразит, как — пишите ваше решение, чтобы все знали! 

Код Выделить Развернуть

  background: hsla(0, 95%, 95%, 1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: radial-gradient(top, circle cover,hsla(0, 95%, 35%, . 0%,hsla(187, 60%, 10%, 1) 80%);
background-image: -webkit-radial-gradient(top, circle cover,hsla(0, 95%, 35%, . 0%,hsla(187, 60%, 10%, 1) 80%);
background-image: -moz-radial-gradient(top, circle cover,hsla(0, 95%, 35%, . 0%,hsla(187, 60%, 10%, 1) 80%);
background-image: -ms-radial-gradient(top, circle cover,hsla(0, 95%, 35%, . 0%,hsla(187, 60%, 10%, 1) 80%);
background-image: -o-radial-gradient(top, circle cover,hsla(0, 95%, 35%, . 0%,hsla(187, 60%, 10%, 1) 80%);


Далее, номер три, тоже градиент в цсс, из двух цветов, плавно переходящих одни в другой. Оригинально. И тут всё настраивается.

Код Выделить Развернуть

/* Set a fontsize that will look the same in all browsers. */
body
{
  background: #BFCCDA;
  background-repeat: no-repeat;
  background-attachment: fixed;
background: -webkit-linear-gradient(90deg, #fff 10%, #BFCCDA 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #fff 10%, #BFCCDA 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #fff 10%, #BFCCDA 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #fff 10%, #BFCCDA 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #fff 10%, #BFCCDA 90%); /* W3C */
   font: 81%/130% "Verdana", "Arial", "Helvetica", "sans-serif", "Ubuntu", "Ubuntu Beta", "UbuntuBeta";
max-width:1000px;
   margin: 0 auto;
   padding: 15px 0;
}


Номер четыре, тоже градиент, цсс, но количество цветов - неограничено, делайте, как хотите:

Код Выделить Развернуть

/* Set a fontsize that will look the same in all browsers. */
body
{
background-image: -webkit-linear-gradient(0, #5D95DF, #21216A, #000, #000, #000, #000, #000, #21216A, #5D95DF);
background-image: -moz-linear-gradient(0, #5D95DF, #21216A, #000, #000, #000, #000, #000, #21216A, #5D95DF);
background-image: -khtm-linear-gradient(0, #5D95DF, #21216A, #000, #000, #000, #000, #000, #21216A, #5D95DF);
font: 83%/130% "Verdana", "Arial", "Ubuntu", "Ubuntu Beta", "Helvetica", "sans-serif";
max-width:1000px;
   margin: 0 auto;
   padding: 15px 0;
}

[Yarik]

Маленькое ИМХО,как по мне лучше

Код (Найти) Выделить Развернуть

max-width:1000px;

Код (Заменить) Выделить Развернуть

max-width:100%;

[Serifa]

Маленькое ИМХО,как по мне лучше

Хм, это сугубо мои настройки, вы их просто убирайте. У меня исторически сложилось, что у форума жёстко задана максимальная ширина.

Ты лучше придумай, как полукруглый градиент другими цветами сделать?

[Yarik]

А так ? background-image: radial-gradient
(#ff0000, #ffff00)

[ALINA]

Serifa левый и правый паттерны актуальны если форум узкий .Вот как  у тебя. Мне так кажется .А если форум, к примеру, 98 % ,то проще просто кинуть задний фон .Все равно очень узкая полоска видна по бокам .

[Yarik]

Мне бы ссылочку,со стрелочкой на этот полукруглый градиент,чтобы это дело в файрбаге посмотреть...

[Serifa]

Мне бы ссылочку,со стрелочкой на этот полукруглый градиент,чтобы это дело в файрбаге посмотреть...

давно бы поставил да протестировал сам
я потеряла ссылку на сайт, где этот градиент увидела, жаль... сейчас все ссылки перетряхнула, найти не могу.

[iaroslav]

На тему градиентов... есть же куча онлайн генераторов, которые совершенно нахаляву вам ну совсем любой сгенерируют. Включая радиальный.
При чём в более приемлемом формате со стандартными rgb цветами.
Вот, например: http://www.colorzilla.com/gradient-editor/

[Serifa]

ну вот, пополнение в копилку опыта а не было бы этой темы, когда бы ты еще пришел и рассказал про градиенты?

[ALINA]

ну вот, пополнение в копилку опыта

да классный онлайн сервис .

[Yarik]

давно бы поставил да протестировал сам

Так я уже написал как -

Код (Выделить) Выделить Развернуть

background-image:-moz-linear-gradient(#2e8994,#080080);
background-image:-webkit-linear-gradient(#2e8994,#080080)
Цвета ставь свои,я их от фонаря набрал 

[Serifa]

Так я уже написал как -

Код (Выделить) Выделить Развернуть

background-image:-moz-linear-gradient(#2e8994,#080080);
background-image:-webkit-linear-gradient(#2e8994,#080080)
Цвета ставь свои,я их от фонаря набрал 

Я пробовала заменять цвета, но форум от этого косячит! Сам бы попробовал, чтобы убедиться.

[Yarik]

Не,мне они не нужны....

[ALINA]

Serifa я на тестовом на дефолтной теме  генерировала на том сервисе радиальный градиент .Интересный эффект получился . Хостинг тупит на тестовом .Хотела скрин снять .

[Serifa]

Serifa я на тестовом на дефолтной теме  генерировала на том сервисе радиальный градиент .Интересный эффект получился . Хостинг тупит на тестовом .Хотела скрин снять .

Кстати, скрин будет?

А вот еще симпатичные фоны чисто с помощью цсс. Тут вам и квадратики, и шарики, и даже сложные элементы:
http://codepen.io/tari/pen/MwOXWb

На лишние символы внимания не обращайте, ориентируйтесь на background

Код Выделить Развернуть

&--1 {
    $color: #E04158;
    background-color: #fff;
    background-image:
      linear-gradient(0deg, transparent 50%, rgba($color,0.6) 50%),
      linear-gradient(90deg, transparent 50%, rgba($color,0.6) 50%);
    background-size: 30px 30px;
  }
 
  &--2 {
    $color1: #386AD8;
    $color2: #E3506A;
    background-image:
      repeating-linear-gradient(45deg, transparent 10px, transparent 19px, $color1 20px, $color1 29px, transparent 30px, transparent 39px, $color2 40px, $color2 49px);
  }
 
  &--3 {
    $color: #72A9EB;
    background-image:
      radial-gradient(circle at 25% 25%, $color 10%, transparent 15%),
      radial-gradient(circle at 75% 75%, $color 10%, transparent 15%);
    background-size: 30px 30px;
  }

  &--4 {
    $color: #222;
    background-image:
      linear-gradient(45deg, $color 25%, transparent 26%, transparent 74%, $color 75%),
      linear-gradient(-45deg, $color 25%, transparent 26%, transparent 74%, $color 75%);
    background-size: 30px 30px;
  }

  &--5 {
    $color: #C57B30;
    background-image:
      linear-gradient(45deg, transparent 19%, $color 20%, $color 30%, transparent 31%),
      linear-gradient(-45deg, transparent 19%, $color 20%, $color 30%, transparent 31%),
      linear-gradient(-135deg, transparent 19%, $color 20%, $color 30%, transparent 31%);
    background-size: 30px 30px;
  }

&--6 {
    $color: #A4D931;
$color1: #359AB4;
    background-image:
      repeating-radial-gradient(circle at 25% 25%, transparent 19%, $color 20%, $color 34%, transparent 35%);
background-size: 90px 90px;
  }
   
  &--7 {
    $color: #522;
    background-color: #d33;
    background-image:
      linear-gradient(45deg, transparent 0%, rgba(0,0,0,0.1) 100%);
    background-size: 30px 30px;
  }
 
&--8 {
    $color: #fff;
    background-color: #B34BE0;
    background-image:
      radial-gradient(circle at 15% 85%, transparent 25%, $color 26%, $color 39%, transparent 40%),
      radial-gradient(circle at 85% 15%, transparent 25%, $color 26%, $color 39%, transparent 40%);
    background-size: 30px 30px;
  }

  &--9 {
    $color: #fff;
    background-color: #6A45CD;
    background-image:
      radial-gradient(circle at 25% 25%, $color 25%, transparent 21%),
      radial-gradient(circle at 75% 25%, $color 25%, transparent 21%),
      radial-gradient(circle at 25% 75%, $color 25%, transparent 21%),
      radial-gradient(circle at 75% 75%, $color 25%, transparent 21%);
    background-size: 50px 50px;
  }
 
  &--10 {
    $color: #5ACA38;
    background-image:
      repeating-radial-gradient(circle at 50% 50%, $color 50%, transparent 55%);
    background-size: 30px 30px;
  }

  &--11 {
    $color: #E56B22;
    background-image:
      repeating-radial-gradient(circle at 50% 50%, transparent 25%, $color 26%, $color 33%, transparent 34%);
    background-size: 30px 30px;
  }

  &--12 {
    $color1: #FC237D;
    $color2: lighten($color1,20%);
    background-color: #222;
    background-image:
      linear-gradient(45deg, transparent 19%, $color1 20%, $color1 30%, transparent 31%),
      linear-gradient(-45deg, transparent 19%, $color1 20%, $color1 30%, transparent 31%),
      linear-gradient(45deg, transparent 29%, $color2 30%, $color2 40%, transparent 41%),
      linear-gradient(-45deg, transparent 29%, $color2 30%, $color2 40%, transparent 41%);
    background-size: 35px 35px;
  }
}