J'ai ajouté une fenêtre modale avec transparence dans un site Web, et je voudrais appliquer comme flou gaussien à l'arrière-plan de la fenêtre, tout comme l'effet aero glass de Windows Vista. Est-ce possible pour moi de faire ça? et comment?Comment flouter l'image de fond sous-jacente dans la zone d'une fenêtre modale avec transparence?
Merci! William
Que diriez-vous d'un widget flash largeur dynamique/hauteur qui charge l'image, les filtres de flou, et mis l'élément contenant assez précisément dans une couche d'index z, au-dessus de la sous-couche modale et en dessous du conte modal NT. Alternativement, http://plugins.jquery.com/project/blurimage, ou http://www.nihilogic.dk/labs/imagefx/ semble également prometteur.
EDIT: En réponse à votre « commentaire flou d'image partielle »
En utilisant ce widget Flash et positionnement, oui - du haut de ma tête, vous pouvez essayer un swf double couche en taille réelle, la couche inférieure contient l'élément d'image, tout comme le calque situé au-dessus, cette couche supérieure serait complètement floue - et la couche supérieure est également masquée. Ajustez le masque au panneau que vous avez ouvert (configurez des gestionnaires onresize etc si nécessaire). Si vos panneaux sont déplaçables, effectuez le suivi de la position de votre panneau HTML par rapport à la position de la deuxième couche de la taille du panneau dans Flash, en déplaçant finalement un masque pour ne révéler que la zone floue de ce qui ressemble à une seule image.
Notez également que vous avez besoin de ExternalInterface pour que cela soit efficace, donc min. Flash player 8, qui bat les implémentations de navigateur clairsemées listées au http://www.nihilogic.dk/labs/imagefx/.
Une autre sources chose à l'esprit, ce qui pourrait seulement besoin de deux éléments <div>, les deux contenant la même image que ci-dessus, Couches superposées les unes sur les autres comme ci-dessus, et que vous manipuler CSS clip properties par rapport à la taille/position de votre panneau opaque. Si c'était un YUI Panel, vous pouvez utiliser le calque de sous-couche modale comme couche inférieure dans mon exemple Flash ci-dessus, et le panneau lui-même est enveloppé de sorte que vous pouvez éventuellement utiliser le clip CSS et le flou JS, peut-être même background-position:fixed pourrait aider ... Je serais ravi de voir certaines de vos tentatives si vous parvenez à essayer n'importe quoi - j'aimerais avoir du temps libre!
est-il possible de ne flouter qu'une partie d'une image de fond? –
Désolé, "http://www.nihilogic.dk/labs/imagefx/" était un lien brisé, son fixe maintenant. – danjah
Ok, je peux qualifier le ci-dessus ici sans Flash, et pas de Javascript pour ajouter l'effet - bien que Javascript soit évidemment utilisé pour illustrer en utilisant un exemple de YUI Panel: http://codefinger.co.nz/public/blurpanel/imagepartblur. html - Je pense que cela évite un problème de visibilité du contenu à l'intérieur du panneau - vous avez donc besoin de deux images, ou une image dupliquée et traitée (peut-être une réduction ou une coloration) avant d'être définie comme arrière-plan fixe. Si votre situation est suffisamment prévisible, vous pouvez définir le texte à l'opposé de l'arrière-plan flou avec Javascript. – danjah
Jetez un oeil
Hé, c'est cool, il n'y a pas d'effet de flou ou d'agrandissement, mais quand même très cool. Vous pouvez habiller un panneau YUI facilement (utiliser ces graphiques ou faire quelque chose avec CSS3 et le rayon de la frontière + opacité), et tirer parti de la détection des limites du document et d'autres choses. – danjah
Essayez d'utiliser fancybox ou thickbox pour afficher votre fenêtre modale. Si vous préférez Rendez possible en utilisant css –
convenu, je recommande fortement fancybox :) –
Vous ne pouvez probablement pas flouter toute la page via CSS ou JS (sauf IE avec son filtre), seules les images via la toile. Cependant, une image de fond avec un motif en "verre" plus des ombres et une opacité peut aussi convenir. De plus, il y a toujours du SVG avec des filtres, mais je suis dedans. –