Вопрос:
У меня есть div с эффектом виньетки.
<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, поскольку мне нужно, чтобы оно было белым.
Лучший ответ:
Вы можете использовать фон с 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/
Ответ №1
Я не совсем уверен, что вы после, но, играя, я получил это:
box-shadow:inset 0px 3px 20px 10px #FFF; background-color: #CE1A1A;
Ответ №2
Попробуйте этот винтажный эффект Demo
Just give background color to the box and you will get cool vintage effect.
#box{ background:#FFE4E4; }
Ответ №3
ОБНОВЛЕННЫЙ ОТВЕТ:
демонстрация
Изменения 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 того, как он был красным.
