De grands blocs avec des dégradés CSS3

Question

Existe-t-il un moyen de mettre en œuvre de grands blocs performants avec des gradients radiaux CSS3 ? Comme sur ce site web. http://www.medora.ca/wp-content/themes/medora/images/bgNoise4.jpg (3200x1600)

Canvas - bloque JS pendant la génération de l'image et crée un délai d'attente.

CSS3 - FF 13 était trop surchargé avec un grand gradient (3200x1600), quand ce gradient a été ajouté, même une simple transition CSS3 pour une balise était très lente.

SVG - trop peu d'expérience, pas trop testé, image de qualité inférieure à CSS3

VML - pour IE, je n'ai aucune expérience

J'ai mentionné que pour Chrome l'ajout d'un bloc aussi grand avec un gradient CSS3 radial, avait de bonnes performances.

Connaissez-vous une technologie de désactivation pour CSS3 ou canvas, pour faire un gradient radial sans lignes radiales visibles ?

J'apprécierais que vous puissiez fournir des exemples de liens.

Merci !

Answer 1

C'est ce que j'ai trouvé. Je ne l'ai pas encore essayé sur un bloc massif, mais sur celui-ci, je ne vois pas de lignes radiales visibles :

HTML :

<div id="gradient_div"></div>

CSS :

#gradient_div {
  margin: 0 auto;
  border-radius: 20px;
  width: 500px;
  height: 500px;    
  background-color:rgba(171, 171, 171, 0.1);
  background-image: -moz-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -webkit-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -o-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -ms-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
}

Voici une version de JSFiddle avec laquelle vous pouvez vous amuser : http://jsfiddle.net/Hz8ME/