Cообщество пользователей SMF

Отвечая камраду 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;
}

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

max-width:1000px;
max-width:100%;

Цитата: Yarik от 07 апреля 2015, 11:59:08
Маленькое ИМХО,как по мне лучше

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

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

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

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

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

Цитата: Yarik от 07 апреля 2015, 13:06:32
Мне бы ссылочку,со стрелочкой на этот полукруглый градиент,чтобы это дело в файрбаге посмотреть...

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

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

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

Цитата: Serifa от 08 апреля 2015, 12:45:53ну вот, пополнение в копилку опыта

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

Цитата: Serifa от 07 апреля 2015, 19:20:37
давно бы поставил да протестировал сам

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

Цитата: Yarik от 08 апреля 2015, 18:00:26
Так я уже написал как -

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

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

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

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

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

Цитата: ALINA от 08 апреля 2015, 19:52:11Serifa я на тестовом на дефолтной теме  генерировала на том сервисе радиальный градиент .Интересный эффект получился . Хостинг тупит на тестовом .Хотела скрин снять .

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

А вот еще симпатичные фоны чисто с помощью цсс. Тут вам и квадратики, и шарики, и даже сложные элементы:
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;
  }
}