Gegeven een transparante PNG die een simpele vorm in het wit weergeeft, is het mogelijk om op een of andere manier de kleur hiervan te veranderen via CSS? Een soort van overlay of wat niet?
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 <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">
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.
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)