Aero-Effekt in css

Question

Wie bekomme ich Aero-Glas-Box-Effekt mit CSS. Mein Benutzer kann das Hintergrundbild dynamisch festlegen, um etwas von seinem Interesse zu sein. Also ich möchte eine Glas-Box, die dynamisch sein wird und nicht wie diejenigen, die je nach dem spezifischen Hintergrund entwickelt werden ....

Um genau zu sein .. Ich möchte erreichen, was in diesem Link angezeigt .. unter der Überschrift : Sie nennen mich Mr.Glass: http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/#glassbox

Aber das muss dynamisch sein und sollte für jeden Hintergrund gelten. Und außerdem möchte ich auch einen Einblick bekommen, wie wir diese Farbwerte kennen lernen, die für unseren Zweck geeignet sind, und solche Effekte erzeugen, selbst wenn es spezifisch für den Hintergrund ist ..? Ist es nur Erfahrung oder sind sie irgendwelche Werkzeuge ..? bitte erläutern .... Ich würde sehr gerne eine css-Technik zu den oben genannten ...

Answer 1

Ok ich nicht wirklich verstehen, was das Problem ist, dass das Beispiel, das Sie scheint gab mit einem Hintergrund zu funktionieren dynamisch festgelegt, schauen Sie sich dieses Beispiel:

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

Relevante Code:

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); 

Klicken Sie einfach auf den Link, um zu sehen, worüber ich rede.

Haben Sie das gemeint?

Viel Glück!

Answer 2

die Technik wäre: Machen Sie die Glas-Box CSS-Code in eine Klasse. Anstelle von div {} benutze .glass {}, und lege es über das Hintergrundbild, dazu musst du die css-Attribute aus dem Hintergrund-div kopieren, das die Benutzer ändern sollen.