Kleur van PNG afbeelding wijzigen via CSS?

Je zou eens kunnen kijken naar Icon fonts. http://css-tricks.com/examples/IconFont/

EDIT: Ik'gebruik Font-Awesome op mijn laatste project. Je kunt het zelfs bootstrappen. Zet dit gewoon in je ``:

En dan ga je gang en voeg wat icoon-links toe zoals deze:

<a class="icon-thumbs-up"></a>

Hier's het volledige spiekbriefje

--edit--

Font-Awesome gebruikt andere class namen in de nieuwe versie, waarschijnlijk omdat dit de CSS bestanden drastisch kleiner maakt, en om dubbelzinnige css classes te vermijden. Dus nu moet je gebruiken:

<a class="fa fa-thumbs-up"></a>

EDIT 2:

Net ontdekt dat github ook een eigen icon font gebruikt: Octicons Het'is gratis te downloaden. Ze hebben ook wat tips over hoe je je eigen icoon fonts kunt maken.

De img tag heeft een achtergrond eigenschap net als elke andere. Als je een witte PNG hebt met een transparante vorm, zoals een stencil, dan kun je dit doen:

Ja :)

Surfin' Safari - Blog Archive » CSS Maskers

WebKit ondersteunt nu alpha maskers in CSS. Met maskers kunt u de inhoud van een vak overlappen met een patroon dat kan worden gebruikt om delen van dat vak weg te laten in de uiteindelijke weergave. Met andere woorden, je kunt complexe vormen knippen op basis van de alpha van een afbeelding.
[...] We hebben nieuwe eigenschappen geïntroduceerd om webdesigners veel controle te geven over deze maskers en hoe ze worden toegepast. De nieuwe eigenschappen zijn analoog aan de achtergrond en rand-afbeelding eigenschappen die al bestaan.

-webkit-mask (achtergrond) -webkit-mask-attachment (achtergrond-attachment) -webkit-mask-clip (achtergrond-clip) -webkit-masker-oorsprong (achtergrond-oorsprong) -webkit-masker-afbeelding (achtergrond-afbeelding) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (achtergrond-composite) -webkit-mask-box-image (rand-afbeelding)