Je concevant un site web depuis longtemps simplement en utilisant des images pour les gradients, pour les petits gradients, cela semble fonctionner correctement et ne pas ajouter beaucoup de temps de chargement, mais en ce moment avec tant de fragmentation avec de nouveaux CSS (webkit / moz / o / khtml, et sans parler, c'est-à-dire 6,7,8,9)
Ainsi, pour qu'un seul gradient universel il va être beaucoup de CSS.
avec des sites qui deviendront besoin d'une tonne de gradients que j'utilise moins.js pour le rendre légèrement meilleur, mais cela ne va que si loin ...
Je me demandais juste à quelle taille a-t-il plus de sens d'utiliser des gradients CSS sur des images, s'il s'agit vraiment d'un point de rupture.
[ex. Un petit gradient de 5px, il est plus logique de simplement avoir une image 5PX, mais comme un gradient de 1000px, il est probablement plus logique de simplement utiliser CSS]
Oh et je sais qu'il y a SVG, je n'ai pas vraiment essayé mais ça marche bien?
Toute opinion serait très appréciée. :)
4 Réponses :
Mon approche actuelle consiste à utiliser le gradient CSS3 ( Les principaux gains d'utilisation de CSS sont qu'il réduirait le nombre de demandes. Plus les gains que vous utilisez sur une page sont importants. webkit - , Moz - , etc.) et fournissez l'image d'arrière-plan ancienne comme une baisse. La taille de l'image n'a pas tendance à être un problème de bande passante actuelle - même un gradient de 200 px ne prend que 200 octets. La majorité des frais généraux proviennent de la latence provenant de plusieurs demandes d'images - qui permettraient d'éliminer l'utilisation de CSS.
Le problème avec l'utilisation d'images est que vous êtes beaucoup plus restreint dans ce que vous pouvez faire. Si vous souhaitez utiliser un gradient d'arrière-plan et que la boîte est plus grande que prévu, le gradient s'arrête tôt ou commence à répéter. Les deux solutions ne sont probablement pas ce que vous voulez.
Vous pouvez vérifier www.css3plase.com pour des exemples sur la manière de Obtenez les beaux effets dans CSS3 (avec code d'échantillon en direct). Pour les gradients de fond, vous pouvez utiliser les éléments suivants: P>
.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: linear-gradient(top, #444444, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}
Serait génial si tous les navigateurs ont pris en charge gradient linéaire en même temps. :-(
à résumer: vous pouvez obtenir la prise en charge des gradients via un seul SVG dans C'est si vous utilisez le SVG en tant qu'appount image d'un fichier. Si vous passez une étape supplémentaire pour intégrer le SVG en tant que datauri, vous perdez la prise en charge de Firefox antérieure à 6. Toute la version de Firefox prend en charge la syntaxe de gradient CSS3 «correcte», donc ce n'est pas trop de corvée dans la plupart des cas pour simplement utiliser Le SVG Datauri PLUS -MOZ-CSS3. P> L'astuce principale est qu'il faut de vissoir et d'apprendre les interactions entre le dimensionnement interne SVG -> Viewport -> CSS arrière-plan de formation interne / carrelage -> et enfin modificateurs comme taille de fond. C'est pourquoi, malgré cela étant une capture, les gens évitent d'utiliser SVG. P> La chose que j'ai échouée à réussir est normalisante entre les gradients répétitifs CSS3 avec des arrêts et des SVG à base de pourcentage à la même heure ( Soutenir avec -Moz-). Le problème est que peu importe la combinaison de moyens de produire le résultat souhaité, l'un ou l'autre nécessite que la taille de fond soit définie de manière à ce qu'il brise l'autre. C'est un cas d'utilisation assez spécifique. P> Voici un gradient linéaire horizontal: p> comme datauri (espacement et rupture de ligne supprimé) p> background-image: -moz-repeating-linear-gradient(45deg,
rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
rgba(255,255,255, 0) 15%, rgba(255,255,255, 0) 30%);
background-image: -webkit-repeating-linear-gradient(45deg,
rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
rgba(255,255,255, 0) 15%, rgba(255,255,255, 0) 30%);
background-image: -ms-repeating-linear-gradient(45deg,
rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
rgba(255,255,255, 0) 15%, rgba(255,255,255, 0) 30%);
background-image: -o-repeating-linear-gradient(45deg,
rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
rgba(255,255,255, 0) 15%, rgba(255,255,255, 0) 30%);
background-image: repeating-linear-gradient(45deg,
rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
rgba(255,255,255, 0) 15%, rgba(255,255,255, 0) 30%);
Le code que j'utilise pour tous les gradients du navigateur: Vous devrez spécifier une hauteur ou voici une version moins mixine (CSS) pour tout ce que vous avez moins Utilisateurs là-bas: P> zoom: 1 code> pour appliquer haslayout code > à l'élément pour que cela fonctionne dans IE. p>
.gradient(@start, @end) {
background: mix(@start, @end, 50%);
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
background: -webkit-linear-gradient(@start, @end);
background: -moz-linear-gradient(top, @start, @end);
background: -ms-linear-gradient(@start, @end);
background: -o-linear-gradient(@start, @end);
background: linear-gradient(@start, @end);
zoom: 1;
}
SVG fonctionne bien, mais il y a des différences entre agents: chrome le fait beaucoup mieux que ff. J'ai combiné gradient / opacité avec animation ...
Essayez ceci: xmlsoap.dk/svg/vignette.xml