Effet Aero dans css

Question

Comment obtenir un effet de boîte de verre aérosol en utilisant css. Mon utilisateur peut définir de façon dynamique l'image de fond comme étant quelque chose qui l'intéresse. Donc, je veux une boîte de verre qui sera dynamique et pas comme ceux qui sont développés en fonction de l'arrière-plan spécifique ....

Pour être précis .. je veux atteindre ce qui est affiché dans ce lien .. sous la rubrique : Ils m'appellent M.Glass: http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/#glassbox

Mais cela doit être dynamique et devrait s'appliquer à n'importe quel arrière-plan. Et d'ailleurs, je voudrais aussi avoir un aperçu de la façon dont nous apprenons à connaître ces valeurs de couleurs appropriées pour notre objectif et créer de tels effets, même si elle est spécifique à l'arrière-plan ..? Est-ce juste de l'expérience ou sont-ils des outils ..? expliquez svp .... Je préférerais beaucoup une technique de css au ci-dessus ...

Answer 1

Ok je ne comprends pas vraiment ce que votre problème est que l'exemple que vous avez donné semble fonctionner très bien avec un arrière-plan définir dynamiquement, regardez cet exemple:

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

Code pertinent:

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

Il suffit de cliquer sur le lien voir de quoi je parle.

C'est ce que vous vouliez dire?

Bonne chance!

Answer 2

la technique serait: Faire le code CSS de glassBox dans une classe. Au lieu de div {} utiliser .glass {}, et le mettre en haut de l'image d'arrière-plan, pour cela, vous devrez copier les attributs css de la div de fond que vous voulez que les utilisateurs changent.