CODEWITHSUNDEEP
cssimagecolorsoverlay
Tessa K
Tessa K

Reputation: 1

CSS Image Overlay

I am creating a template for my company that will be used down the road on a variety of different clients sites, and they will all range in color. I have created icons for this template that are currently black (or white) and I want to be able to control the color of these icons via css. They are one simple color and in photoshop if you do a blending option of color overlay and choose 1 color, they look great. Is this possible to do in css so when someone is editing this template for future clients that they can control the icon colors in css instead of having to edit every icon in photoshop every time?

Upvotes: 0

Views: 2034

Answers (9)

Thurstan
Thurstan

Reputation: 1716

I would say the best/easiest answer is to use SVG. The logo should probably be in a vector format to start with so that it can be scaled without detail loss from business cards to billboards.

SVG 'images' are based on shapes. Give the shape you want to change a name, and then address it in CSS to change it's colour.

This article: http://css-tricks.com/using-svg/

and this example: http://codepen.io/chriscoyier/pen/evcBu

Do an excellent job of explaining how to achieve this and also show off other possibilities.

SVG at least the basics are now widely supported, ie8 is the only browser holding it back and even so there are ways around this via rendering SVG as an image on the fly.

Upvotes: 0

MARCUS
MARCUS

Reputation: 1

It can be done and works well with Firefox and Chrome as far as I know. Example below. http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS

img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

Upvotes: 0

Anson
Anson

Reputation: 6750

If you make the icon images into a font, then you have full control over both size and color via CSS. Check out the very popular Font-Awesome font, designed to compliment Twitter Bootstrap.

I'm no font expert, but if this approach sounds like a fit, you'll do something like:

  • create vector graphics from your icons
  • load them into a font editor, like FontLab Studio
  • add the new font to your favorite web application. If you need a guide for this, FontSquirrel.com generates great @font-face markup to include their library of free fonts.

Upvotes: 0

Plynx
Plynx

Reputation: 11461

You can do this with CSS pseudo elements and translucent overlays. You can follow the instructions here: http://www.impressivewebs.com/image-tint-blend-css/

If you have a vector logo, you can do this with SVG logos even easier (by altering your SVG colors).

Upvotes: 0

wes
wes

Reputation: 113

It's possible to change the color of a logo in CSS, but not to solve the problem you are talking about. To make a changeable logo you would make a PNG with transparency where the logo is and background color (of the webpage) in the negative space. Then put it over a P or div that has the logo color you want as its background color.

Trouble is, you have just exchanged having a flexible logo color for an inflexible "background" color.

Better to just include both colors of logo, white and black, as part of a "package" that is put up with all websites. Just call the one you want in CSS where you want it.

Upvotes: 1

Olly Hodgson
Olly Hodgson

Reputation: 15775

You can do this with images (as long as the background colour is consistent) but it requires thinking outside the box a bit. Open the icon's image file in Photoshop (or similar). Edit it so that the "icon" part (i.e. the bit that is currently black) is transparent, and the background (i.e. the bit that isn't what the icon depicts) is filled white (or whatever the background colour of the site is). Essentially you've "reversed the polarity" of the image. Put the image in the web page, then use CSS to specify it's background-color. Your icon should appear in that colour. Edit: Something like this: http://coding.smashingmagazine.com/2010/10/31/transparent-css-sprites/

A [potentially] much simpler approach would be to use an icon font like http://pictos.cc/. That's just text really, so you can colour it with CSS as usual.

Upvotes: 0

ogur
ogur

Reputation: 4586

Not possible via CSS. You can use some dynamic technologies like Canvas, but it's not good way. I would rather create tool to create icon sets in desired color. You can do it with PHP (phpGD or ImageMagick here is example of similiar problem).

Upvotes: 0

Prashobh
Prashobh

Reputation: 9542

Its not possible to change the color of icon using css. You can shape it,you can give transparency,opacity etc

Upvotes: 0

dezman
dezman

Reputation: 19358

If your icon is a shape you can make in css, it could work, but I have never heard of anybody doing what you are talking about before.

Upvotes: 0

Related Questions