Je cherche une bonne solution sur la façon de créer un Effet Vignette pour un site web . Les coins doivent être plus sombres que la couleur de fond de la page comme un gradient radial.
Jusqu'à présent, j'ai essayé différentes approches:
À propos du support du navigateur:
La solution Le gradient radial CSS3 est à mon avis la meilleure solution, mais j'ai bien peur que beaucoup d'utilisateurs ne le soutiennent pas, à cause de leurs vieux navigateurs. Et avec la solution de 4 div, j'ai des problèmes avec des liens qui ne peuvent pas être cliqués, en raison de l'image le bloquant. J'ai essayé de jouer avec l'index Z, mais cela ne fonctionne pas. J'ai donné aux divs z-index: 1 et le #Container (où tout le contenu est placé) un index Z de 10. Ne devrait-il pas fonctionner? Z-Index influence-t-il même des liens?
Alors qu'est-ce que vous pensez, serait une bonne solution? J'ai clairement besoin d'aide ici. Merci!
4 Réponses :
J'ai utilisé cette technique expliquée dans Ce blog plus tôt et cela fonctionne vraiment bien. Pas sûr de la prise en charge des vieux navigateurs.
J'ai déjà vu cela. C'est ce que j'ai essayé au début, mais il a le même problème que le contenu de la page obtenu est bloqué par l'effet. Les liens ne seront donc pas cliqués, etc. "L'astuce avec cette technique utilise simplement la bonne quantité de hauteur / largeur. Trop, et le contenu deviendra non sélectionnable à cause des DIV ayant une valeur de DIV à haute valeur z-index." Et il utilise CSS3 avec presque pas de repli. Je l'ai fait presque la même chose mais j'ai utilisé des images au lieu du code CSS3. Mais merci pour votre message cependant :)
Selon ce que vous voulez, quelque chose comme ça pourrait fonctionner; fonctionne sur mon navigateur, devrait fonctionner sur tous les navigateurs. C'est désordonné, sûr, mais vous permet de définir ceci sur HTML, vous pouvez alors avoir du corps, par exemple, avec la couleur ou l'image que vous souhaitez. le voir en action Hereee. http://jsfiddle.net/joshuamartin/tan2z/4/
J'ai utilisé quelque chose comme celui-ci pour que mon gradient de CSS3 essaie. C'était en fait la même page (colorzilla). J'ai essayé un peu plus et ça a l'air bien maintenant dans Firefox, Chrome, Opéra et même IE9. Mais il n'y a aucun moyen de changer le filtre IE? Lorsque vous changez les curseurs à ColorZilla, le filtre IE reste le même. Je voudrais rendre les bords un peu plus sombres. J'ai enlevé le dégradé IE, il est donc juste que les bords de fond + plus sombre dans IE9. Et bien sûr, aucun soutien aux navigateurs plus âgés: / Merci de la réponse.
Vous pouvez utiliser une boîte intérieure-Shadow démo: http://jsfiddle.net/acpup / p> mais cela ne fonctionne pas dans IE7 / 8. Les anciennes versions de Firefox, de chrome, de safari ou d'opéra peuvent avoir besoin de leur préfixe: -WebKit-Box-Shadow, -MoZ-Box-Shadow ou -O-Box-Shadow. P> Vous pouvez également empiler ces ombres pour Un effet plus dramatique, mais je ne sais pas si les versions plus anciennes des navigateurs soutiennent cela. P> box-shadow: inset 0 0 120px #000, inset 0 0 80px #000, inset 0 0 40px #000;
Quelle est la qualité de la méthode de gradient radial CSS3? L'Ombre Box-Shadow est-elle mieux supportée? On dirait que cela a un meilleur soutien IE9, n'est-ce pas? Devrais-je préférer une méthode sur l'autre? Merci :)
Les gradients CSS ont besoin de syntaxe différente pour chaque navigateur et sont pris en charge dans moins de navigateurs (/ versions). IE9 ne prend pas en charge les gradients radiaux, mais IE10 sera.
J'ai utilisé le filtre SVG de Colorzilla pour IE9. Pas le meilleur, mais ça marche. Je pense que votre approche est meilleure cependant. Va essayer plus tard, merci :)
Après avoir testé, je dois ajouter que cette méthode (encadré d'ombre avec flou élevé) est assez performante. Je l'ai testé dans IE, Firefox, Chrome et Opera. Tous ont eu une sorte de problème de performance, si vous allez plus haut que vous disons 150px flou. Il est très notable lors du défilement.
Au lieu de insett 0 0 100px # 000 (= noir ), utilisez insette 0 0 85px rgba (0, 0, 0, 0.4) . Ça a l'air beaucoup mieux. (h / t Chris Coyier )
@Diler est correct sur la performance. Faites attention car cela affectera les performances de défilement et les animations sur votre site. Voir AirBnB Post sur la boîte-ombre pour une analyse plus détaillée. Apparemment, le coupable est le grand rayon de flou. nerds.airbnb.com/box-shadows-are -Expensive à peinture / ...
Utilisation de CSS!
Légère variation de la réponse de Willem, comme recommandé par Johnk Whle Hat Tipping Chris COYIER : jsfiddle: http: // jsfiddle.net/charlesgoodwin/wkq2y/ Cela fonctionne très bien!