Étant donné un PNG transparent affichant une simple forme en blanc, est-il possible de changer la couleur de celle-ci par le biais de CSS ? Une sorte de superposition ou autre ?
Vous devriez peut-être jeter un coup d'œil aux polices d'icônes. http://css-tricks.com/examples/IconFont/
EDIT : J'utilise [Font-Awesome][1] sur mon dernier projet. Vous pouvez même l'amorcer. Mettez simplement ceci dans votre <head>
:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">
Et puis allez-y et ajoutez quelques liens-icônes comme ceci :
<a class="icon-thumbs-up"></a>
Voici l'[antisèche complète][2]
--edit--
Font-Awesome utilise des noms de classe différents dans la nouvelle version, probablement parce que cela permet de réduire considérablement la taille des fichiers CSS, et pour éviter les classes CSS ambiguës. Donc maintenant vous devriez utiliser :
<a class="fa fa-thumbs-up"></a>
EDIT 2 :
Je viens de découvrir que Github utilise aussi sa propre police d'icônes : [Octicons][3] Elle peut être téléchargée gratuitement. Ils ont également quelques conseils sur [comment créer vos propres polices d'icônes][4].
[1] : http://fortawesome.github.io/Font-Awesome/ [2] : http://fortawesome.github.io/Font-Awesome/cheatsheet/ [3] : https://octicons.github.com/ [4] : https://github.com/blog/1135-the-making-of-octicons
Oui :)
Surfin' ; Safari - Blog Archive » ; Masques CSS
WebKit prend désormais en charge les masques alpha en CSS. Les masques vous permettent de superposer le contenu d'une boîte avec un motif qui peut être utilisé pour éliminer des parties de cette boîte dans l'affichage final. En d'autres termes, vous pouvez découper des formes complexes à partir de l'alpha d'une image.
[...] Nous avons introduit de nouvelles propriétés pour permettre aux concepteurs de sites Web de mieux contrôler ces masques et la façon dont ils sont appliqués. Les nouvelles propriétés sont analogues aux propriétés background et border-image qui existent déjà.
-webkit-mask (arrière-plan) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)