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

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

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

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

источник

2011-11-05 Yep

Похоже, внутренний эффект тени/тлеющего мне ... – animuson

Я знаю, как создайте его в Photoshop, если это то, что вы говорите. – Yep

@Yep - Взгляните на: http://www.colorzilla.com/gradient-editor/ –

Если говорить о более светлом коричневом свечении, что находится позади навигации вы можете сделать это с помощью 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 */

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

источник

2011-11-05 21:04:48 meo

Да, это то, что я ищу. Единственная проблема - получить это за навигацией, вместо того, чтобы быть сосредоточенной на странице. – Yep

@Yep: вы можете использовать 'ul.nav: before {position: absoulte; верх: 0; left: 0; ширина: 100%; высота: 300 пикселей; z-index: -1; background: theGradients} ' – meo

Я изучу его, но это определенно то, что я пытался сделать. Благодаря! – Yep

Это не радиальный градиент. Это кажется графикой.

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

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

Example

источник

2011-11-05 20:48:32 HerrSerker

Я знаю, что это графика. Используя некоторый CSS, я мог бы легко экспортировать это из Photoshop и установить его как фон. Однако этого я не хочу. Я хочу использовать '-webkit-radial-gradient' (или подобное) для создания этого эффекта, когда центр расположен прямо в середине навигационного div. – Yep

Примечание. По какой-то причине он не работает в FF7, но отлично работает в Chrome (последний). –

Если вы хотите сделать это с помощью CSS, вы можете использовать radial gradient:

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

Example (jsFiddle).

Вышеуказанное будет создавать круговое свечение с радиусом 100px с центром в ящике <div>.

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

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

источник

2011-11-05 21:05:28 millimoose

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

ответ

Смежные вопросы