Puis-je convertir une image en CSS3?

Question

Supposez que j'ai un fichier image au format PNG polygone comme celui-ci (pas de frontière, la forme est remplie d'une couleur, pas de gradient, et arrière-plan de l'image est transparente) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF

Je pense d'utiliser cette image polygone comme une image de fond et il sera changé (à une autre image avec une couleur différente) lorsque l'utilisateur plane dessus. Mais je veux aussi que la couleur de l'image d'arrière-plan soit personnalisable. Donc, je pense qu'il est possible de dessiner le polygone au lieu d'utiliser des fichiers image pour que la couleur soit personnalisable (je ne pense pas que ce soit une bonne idée de créer un fichier pour une couleur et ainsi de suite) .

• Quelle est la meilleure solution pour ce cas? Utiliser png ou dessiner par css?
• Existe-t-il un outil/site Web pour convertir mon code png en code CSS?

Answer 1

1. Rendre les zones blanches transparentes (couleur alpha dans GIMP)
2. Convert the image to a data URI (il est facultatif, mais il fera plus vite votre charge du site)
3. Utilisez l'URL (2) comme background-image et utiliser n'importe quel background-color que vous voulez.

Answer 2

Utilisez cette option pour convertir une image: http://codepen.io/blazeeboy/pen/bCaLE Je pense qu'il est préférable d'utiliser des images converties, car les navigateurs les charger plus rapidement.

Answer 3

Je pense que CSS est la mauvaise chose à utiliser pour cela. Oui, il est possible de créer beaucoup de formes en utilisant CSS, mais il y a des limitations, et dans tous les cas, dessiner des formes avec CSS est un peu un hack, même si c'est juste un simple triangle.

Plutôt que CSS, je suggérerais SVG est les outils appropriés pour ce travail.

SVG est un format graphique pour les graphiques vectoriels qui peuvent être intégrés dans un site, et peuvent être créés ou modifiés par Javascript directement dans le site. Changer la couleur et la forme d'un simple polygone est à peu près aussi simple qu'avec SVG.

L'autre avantage d'utiliser SVG est que parce qu'il est un graphique vectoriel, il est évolutif, vous pouvez l'afficher à toute taille.

Le seul bas-côté de SVG est qu'il est pas pris en charge par les anciennes versions d'IE (IE8 et versions antérieures). Cependant, ces navigateurs supportent un langage alternatif appelé VML, et il existe plusieurs bonnes bibliothèques Javascript qui fonctionneront avec l'une ou l'autre, vous permettant ainsi une compatibilité complète entre navigateurs. Celui que je recommande est Raphael.js.

Ainsi, un petit (et très facile) peu de code Javascript au lieu d'un peu de CSS très salissant. On dirait un gagnant pour moi.