Aero effect in css

Question

Как получить эффект аэрозольного стекла с помощью css. Мой пользователь может динамически устанавливать фоновое изображение в чем-либо из его интересов. Поэтому я хочу, чтобы стеклянная коробка была динамичной и не похожа на те, которые были разработаны в зависимости от конкретного фона ....

Если быть точным, то я хочу достичь того, что показано в этой ссылке .. под заголовком : Меня зовут Мистер Гласс: http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/#glassbox

Но это должно быть динамичным и должно применяться к любому фону. И, кроме того, мне также хотелось бы узнать, как мы узнаем те значения цвета, которые подходят для нашей цели, и создают такие эффекты, даже если они специфичны для фона.? Это просто опыт или это какие-то инструменты ..? пожалуйста, объясните .... Я бы очень хотел использовать технику css для вышеуказанного ...

Answer 1

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

http://jsfiddle.net/GGhKg/1603/

Соответствующий код:

background: rgba(0,0,0,0.25); 
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
    -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 

Просто нажмите ссылку, чтобы узнать, о чем я говорю.

Это вы имели в виду?

Удачи вам!

Answer 2

Техника была бы: Сделайте код glassBox css в класс. Вместо div {} используйте .glass {} и поместите его поверх фонового изображения, для этого вам нужно будет скопировать атрибуты css из фонового div, который вы хотите изменить.