Как создать радиальный градиент вокруг навигации?

Question

Видите радиальный градиент, обтекающий центр навигации? Предположим, я сделал div, то есть навигацию. Как бы я создал градиент, который выглядит как на картинке?

Примечание: посмотрите на фон за меню.

Answer 1

Если вы говорите о более светлом коричневом свете, который стоит за навигацией, вы можете сделать это с помощью CSS3 ...: http://jsfiddle.net/Jg8ZC/

  background: #45392d;
  background-repeat: no-repeat;
  background-image: -webkit-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* New WebKit syntax */  
  background-image: -moz-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%);  /* Firefox */  
  background-image: -ms-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* IE10+ */  
  background-image: -o-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* Opera (13?) */  
  background-image: radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%; /* standard syntax */

Таким образом, он будет работать в любом современном браузере.

Answer 2

Если вы хотите сделать это с помощью CSS, вы можете использовать радиальный градиент :

background-image: -webkit-radial-gradient(contain, #bf8230 0%, #a65f00 100px);

Пример (jsFiddle).

Вышеуказанное создаст круговое свечение с радиусом 100 пикселей по центру в поле дополнения <div>.

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

(Пример был сделан только для Chrome Beta и, вероятно, потребует соответствующих заклинаний префикса поставщика и тестирования для других браузеров.)

Answer 3

Это не радиальный градиент.Похоже, это графика.

Что касается CSS, посмотрите ее http://www.the -art-of-web.com / css / radial-gradients / или в Google.Theres много ресурсов там

Вот редактор http://www.westciv.com/tools/radialgradients/index.html

Пример