Css наизнанку виньетка/эффект свечения

У меня есть div с эффектом виньетки.Css наизнанку виньетка/эффект свечения

<div id="box" class="glow"></div> 

#box 
{  
padding:10px; 
border:solid 1px #ddd; 
    width:100px; 
    height:400px; 
    position:relative; 
} 

.glow:after 
{ 
    -webkit-box-shadow:inset 0px 0px 70px #CE1A1A; 
    -moz-box-shadow:inset 0px 0px 70px #CE1A1A; 
    box-shadow:inset 0px 0px 70px #CE1A1A; 

    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    content: ""; 
}

Вот jsfiddle: http://jsfiddle.net/bEFha/

Но то, что я на самом деле после того, как это свечение изнутри. Такой красный в центре и белый по бокам. Эффект, который я пытаюсь достичь, как будто есть источник красного света, светящийся из-под div.

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

Любая помощь приветствуется.

UPDATE: Если возможно, я бы не хотел изменять свойство фона #box, поскольку мне нужно, чтобы оно было белым.

источник

2014-02-21 Prabhu

Как это? http://jsfiddle.net/bEFha/2/ –

Спасибо. Есть ли способ сделать это без изменения #box? На самом деле это должно быть белым. Я обновлю свой вопрос – Prabhu

Есть ли необходимость в #box быть белым? – Prasanth

Вы можете использовать radial-gradient фон.
См: https://developer.mozilla.org/de/docs/Web/CSS/radial-gradient

Вот очень простой пример, вы можете настроить: http://jsfiddle.net/bEFha/5/

background-image: radial-gradient(farthest-corner at center center, #CE1A1A 0%, #ffffff 100%);

Я также считаю, этот визуальный редактор очень полезный http://www.visualcsstools.com/

источник

2014-02-21 06:30:24

Wow спасибо за обмен редактором. О jsfiddle, в точности о том, что мне нужно, но о чем идет речь? Не может ли это быть цвет фона? – Prabhu

Это просто резерв, для браузеров, которые не поддерживают градиенты (созданные визуальным редактором).Конечно, может быть цвет фона, который я бы предпочел тоже :) –

ОБНОВЛЕНО ОТВЕТ:

Demo

CSS Изменения

#box:after{ 
    content:""; 
    background: #CE1A1A; 
    opacity:0.5; 
} 
.glow:after { 
    -webkit-box-shadow:inset 0px 0px 120px #fff; 
    -moz-box-shadow:inset 0px 0px 120px #fff; 
    box-shadow:inset 0px 0px 120px #fff; 
    }

Ваш #box по-прежнему белый, но я добавил #box:after, чтобы сделать его красным.

Demo with Image

источник

2014-02-21 06:21:36

Я не совсем уверен, что ваш после, но, играя вокруг, я получил это:

box-shadow:inset 0px 3px 20px 10px #FFF; 
background-color: #CE1A1A;

Fiddle Here

источник

2014-02-21 06:34:09

Это действительно работает и прост, спасибо. – Prabhu

Попробуйте этот эффект винтажной Demo

Just give background color to the box and you will get cool vintage effect.

#box{ background:#FFE4E4; }

источник

2014-02-21 06:54:03

Css наизнанку виньетка/эффект свечения

ответ

Demo

Demo with Image

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