Dado un PNG transparente que muestra una forma simple en blanco, ¿es posible cambiar de alguna manera el color de este a través de CSS? ¿Algún tipo de superposición o algo así?
Tal vez quiera echar un vistazo a las fuentes Icon. http://css-tricks.com/examples/IconFont/
EDIT: Yo'estoy usando Font-Awesome en mi último proyecto. Usted puede incluso bootstrap él. Simplemente pon esto en tu <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">
Y luego seguir adelante y añadir algunos enlaces de icono como este:
<a class="icon-thumbs-up"></a>
Aquí's la hoja de trucos completa
--edit--
Font-Awesome utiliza diferentes nombres de clases en la nueva versión, probablemente porque esto hace que los archivos CSS sean drásticamente más pequeños, y para evitar clases css ambiguas. Así que ahora deberías usar:
<a class="fa fa-thumbs-up"></a>
EDITAR 2:
Acabo de descubrir que github también utiliza su propia fuente de iconos: Octicons Su descarga es gratuita. También tienen algunos consejos sobre cómo crear sus propias fuentes de iconos.
Sí :)
Surfin' Safari - Blog Archive » Máscaras CSS
WebKit ahora soporta máscaras alfa en CSS. Las máscaras permiten superponer el contenido de una caja con un patrón que puede utilizarse para eliminar partes de esa caja en la visualización final. En otras palabras, puedes recortar formas complejas basándote en el alfa de una imagen.
[...] Hemos introducido nuevas propiedades para proporcionar a los diseñadores web un gran control sobre estas máscaras y cómo se aplican. Las nuevas propiedades son análogas a las propiedades de fondo e imagen de borde que ya existen.
-webkit-mask (fondo) -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)