Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF
I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it.
But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to draw the polygon instead of using image files so that the color will be customizable (I don't think it's a good idea to create one file for one color and so on so forth).
What is the best solution for this case? Using png or drawing it by css?
Is there a tool/website to convert my png to css code?
Make the white areas transparent (colour to alpha in GIMP)
Convert the image to a data URI (it's optional but it will make your site load faster)
Use the url in (2) as the background-image and use any background-color you want.
Use this to convert an image: http://codepen.io/blazeeboy/pen/bCaLE
I think it's much better to use converted images because browsers load them faster.
I think CSS is the wrong thing to use for this. Yes, it is possible to create a lot of shapes using CSS, but there are limitations, and in any case, drawing shapes with CSS is a bit of a hack, even when it's just a simple triangle.
Rather than CSS, I would suggest SVG is the appropriate tools for this job.
SVG is a graphics format for vector graphics that can be embedded in a site, and can be created or altered via Javascript directly within the site. Changing the colour and shape of a simple polygon is about as easy as it gets with SVG.
The other advantage of using SVG is that because it's a vector graphic, it's scalable, so you could display it at any size.
The only down-side of SVG is that it isn't supported by old versions of IE (IE8 and earlier). However, these browsers do support an alternative language called VML, and several good Javascript libraries exist which will work with either, thus allowing you complete cross-browser compatibility. The one I'd recommend is Raphael.js.
So a tiny (and very easy) bit of Javascript code instead of a very messy bit of CSS. Seems like a winner to me.
Maybe u could use this: https://javier.xyz/img2css/, the principle is to use box-shadow,it's fine if the picture is small, so u should consider performance
Related
The image below has a kind of faded grey look with what seems to be some slight blurring and works quite well as a generic banner image.
Usually I am provided with these images or just find stock images but I'd be very interested in learning how to apply these effects with Photoshop or CSS. I have a feeling that Photoshop is a more appropriate tool.
The image I'm experimenting with is this:
It isn't the best image but for my testing purposes at least it's a similar shape and size.
I know I can use things like de-saturation or a coloured layer with a colour blend mode for this sort of thing. However, does the first image look like it has a specific effect or is it just a case of trial and error?
I appreciate this is similar to this question.
open your image in photoshop, add a new layer on top of the image, fill the layer with a color of your choice (in this case grey/black) then reduce the opacity of the layer. You will get something similar to what you want. This is a simple trick. It can be done in other ways too with more modifications.
Maybe you could get the effect by using css blur and overlaying the image with a gray layer with opacity.
You could also just create the effect in photoshop and use that
I'm designing a website which uses a SVG-document as background. I want this image to tile on the X-axis. Which works great, but I wanted to know if it is possible to show one group in the SVG only once, such that in subsequent tiles the group is hidden.
The above image visualizes what I want to achieve. The image having one group (in the image the red circle) that is invisible in the following tiles.
Now I am aware such things can be achieved using additional CSS backgrounds but I am really interested if such thing could be achieved using a single SVG background.
Thanks in advance!
The answer is no. If you are relying on CSS to tile the background - ie. with repeat-x, then no. there isn't any way to do what you want. When an SVG is used as a background like that, it becomes immutable - effectively the same as a PNG or a JPEG.
You will need to use a different method.
I'm working with SVG sprites to create an icon system. I'm using gulp-svg-sprites to generate the sprites and am using the symbol option so when calling each SVG, I can use something as simple as:
<svg class="icon"><use xlink:href="sprite/svg/symbols.svg#icon-alert"></use></svg>
With fill: currentColor I'm able to also control the color of each icon, which again, is great.
The issue comes when I need to use these icons as a background element. I'm aware that you cannot use xlink:href to grab a specific icon from the sprite -- and am okay just grabbing the individual SVG when needed here, but the issue comes when I need to change the fill/color of that SVG that is referenced as a background image.
Things like -webkit-background-clip: text; work great for applying a different background and cutting off based on the text, but I need a solid color overlay that can be switched out on demand.
Is there a simple SVG filter I can attach onto this background (referenced as an SVG) that I can bolt-onto this? Would appreciate any help. Thanks!
Update
Here is a working example. BUT, I'm looking for something that could also work in IE9, which is why I was hoping for something else.
Wrote an article using a LESS function I wrote that edits the SVG object once its pulled in with LESS http://zslabs.com/articles/svg-background-fill
You can apply a filter to change the color of the entire element (including the background) - but in most cases you cannot selectively apply it to just the background as you want to. If you had an exact example online with the exact cases you're trying to cover - there may be some very specific solutions for your exact case (eg. if your foreground is all black-stroked, then a color matrix filter could possibly work.))
So I need some custom colors on a layout, but I'm looking for a better way of doing it other than just slapping a giant picture with (background: url(something.jpg)) in the layout.
Mostly I'm thinking of getting a color palette (i.e. from Adobe Kuler, colourlovers, etc.), getting a 5x5 sample of each color and sticking them in an array for CSS sprites or just as separate files and accessing them through: .color-one {transparent url(./one.gif) repeat} and just reusing that whenever I'd like to use the color.
Are there any drawbacks to doing it this way? And if there are should I just stick with web-safe colors or is there a better way of doing this?
You don't need graphics to represent background colors. You are going the long way around if you use images for that. Just use colors, as graphicsdivine suggests.
Only use background images if you need to do gradients and the like. That's really where they shine.
As to your second question, no, you don't need to stick with "web-safe" colors anymore. If someone in 2010 still only can display 256 colors, well, your site won't be their biggest problem.
.color-one{background-color: #f00}
.color-two{background-color: #0f0}
You have to set the colors as background-color anyway to serve readers which don't load images. So I see no use in those images.
And remember: the smaller an image is the more has the browser to compute to calculate all positions. Repeated background images should not be smaller than 20×20px.
Why don't set background-color?
(And your suggestion wouldn't work with sprites, the renderer will also use the other parts of the image)
Mac OSX Finder has a search feature that darkens everything but the part that matches.
(source: justaddwater.dk)
Is there a way to emulate it via CSS? I was thinking about adding a semi-transparent black div with opacity 50. But how then do I cut a hole in it?? and possibly make the edge fuzzy?
Any suggestions?
Check out the Expose jquery plugin from the jQuery TOOLS collection. I think it will accomplish exactly what you are looking for. They even have a demo of styling the mask with a background image.
Due to the irregular shapes, you're probably looking for an image. And due to the need for varying levels of transparency, you probably want a .png that would just be stuck over the selected item.
Good question, one way would be to have a "selected" png that had the glowing circle cover the selected one, and a different just dark png cover everything else.
EDIT: But you would probably want to use a library like jquery rather than coding everything from scrath your self, as to not reinvent the wheel and save TONS of time :D
maybe a PNG image will work, a square with hole