Je možné nejako zmeniť farbu priehľadného PNG zobrazujúceho jednoduchý tvar v bielej farbe prostredníctvom CSS? Nejaký druh prekrytia alebo čo?
Možno sa budete chcieť pozrieť na písma Icon. http://css-tricks.com/examples/IconFont/
EDIT: Na svojom najnovšom projekte používam Font-Awesome. Môžete ho dokonca zavádzať. Jednoducho to vložte do svojho <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">
A potom pokračujte a pridajte nejaké ikony-odkazy, ako je tento:
<a class="icon-thumbs-up"></a>
Tu'je úplný cheat sheet
--edit--
Font-Awesome používa v novej verzii iné názvy tried, pravdepodobne preto, že sa tým súbory CSS výrazne zmenšili, a aby sa zabránilo nejednoznačným triedam css. Takže teraz by ste mali používať:
<a class="fa fa-thumbs-up"></a>
EDIT 2:
Práve som zistil, že aj github používa vlastný font ikon: Octicons Je zadarmo na stiahnutie. Majú aj niekoľko tipov ako si vytvoriť vlastné písmo ikon.
Áno :)
Surfin' Safari - Archív blogu » CSS masky
WebKit teraz podporuje alfa masky v CSS. Masky umožňujú prekryť obsah rámčeka vzorom, ktorý možno použiť na vyradenie častí tohto rámčeka vo finálnom zobrazení. Inými slovami, na základe alfa farby obrázka môžete orezávať zložité tvary.
[...] Zaviedli sme nové vlastnosti, ktoré webovým dizajnérom poskytujú veľkú kontrolu nad týmito maskami a spôsobom ich použitia. Nové vlastnosti sú analogické k už existujúcim vlastnostiam pozadia a okrajového obrázka.
-webkit-mask (pozadie) -webkit-mask-attachment (pozadie-attachment) -webkit-mask-clip (pozadie-klip) -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)