1) I know I can use a font icon using , pseudo selectors (before, after) and "content", but it is not a scalable solution, because I need to make many changes to padding, left, top etc in different situations
2) Using Data URI an svg is ok, but I need to change the fill/color of the svg
based on different actions. I tried the fill property but it is not really working.
I can change/edit the color external but I have a lot of variations and again doesn't scale
The icon fonts(ex: FontAwesome) come with SVG files for the browsers. It is possible to use somehow that file in css (like image sprites) ?
If you want to modify properties of SVG's it will have to be placed inline. So using an SVG as a background and modifying properties won't work.
Libraries like FontAwesome give you a font, not svg's which you can't set as a background either.
I don't see the problem of using the psuedo-selectors :before and :after for this. They are very scalable in my opinion.
If you really want to do it differently you should share some of your code with us so we can get a better understanding of what you're trying to do.
Related
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.))
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?
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.
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.
Its not possible to change the color of icon using css. You can shape it,you can give transparency,opacity etc
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).
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.
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).
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.
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%);
}
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.
I've observed that often the websites use only one background image which contains multiple images on it. For example, instead of using separately icons, all of the icons are put on one image and then the different parts of image are used in different section.
Is there any advantage to this?
How can this be used?
For example, for the following Stack Overflow sprite, how would I display just one of the images?
The technique is called CSS Sprites. Basically you use CSS's background-position property and fixed height or width for your element.
If your elemnts are fixed width and fixed height at the same time you can freely create a more compact image. See this site for more complex examples.
You are talking about CSS sprites, in which the background position changes on hover. Learn more here:
http://css-tricks.com/css-sprites/
Change the css property background-position.
yes , using sprites is good for website performs because every single component on website send different http request .So, when we use sprites images the http request become less & website performance increase.That rule is also apply on css also less css files less http request. you can yourself with the help of safari web inspector.
for more better performance download "yslow"
And with CSS sprites is also possible to make e.g. menu button hover effect without waiting until second image loads. see
It has the advantage that only one image needs to be loaded so that things like hover (roll-over) effects are faster. The technique is usually called "CSS sprites". Google for it.
It has been common for a while to put two images on one sprite sheet, but the tendency has been moving towards combining ALL of your background images on the same sprite sheet to load just one file for all of them. There's a rather good tutorial here.
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)
I have a web app that I've recently applied a jQuery ThemeRoller theme to. Now I want to have a simple <h2> element have the same rounded-rectangular look as the dialog titlebar or datepicker title. How can I best apply these to my elements that aren't part of larger jQuery UI constructs?
I started down the path of just setting css class values manually based on what I could see inside Chrome's inspector tool, and I got part of the way there before I got nervous that this wasn't going to necessarily be the best way since I'm bypassing any css class assignment logic that might occur inside jQuery UI.
So, is there an easier way of applying those styles, or should I just go down the road of explicitly setting css styles on my headers?
There isn't any magic to the jQuery ThemeRoller CSS styles, if you look through the CSS files that it generates, you will find that they are generally clear and concise and easy enough to read.
The rounded corners in the ThemeRoller CSS will not work in IE, so you might not want to depend on them too much, but if you do, just apply the CSS using style='blah'.
stevedbrown's answer is quite correct.
You can apply rounded corners to any containing element by using the ui-corner- prefix. For example, to apply rounded corners to all four corners of a div element, you'd use ui-corner-all.
To only style the top corners of that same element, you'd apply ui-corner-tr ui-corner-tl for the TopLeft and TopRight corners.
Another possibility to the above is, if you know the CSS attributes you want to copy, you can do it programmatically like:
var defaultColor = $(".ui-state-default").css("color");
var defaultMargin = $(".ui-state-default").css("margin");
and apply these to your elements
$(".your-css-class").css("color",color);
$(".another-css-class").css("margin",margin);
etc
Kind of clunky, but it does allow your CSS developers to update the themerolled themes and you don't have to worry about updating any of your code anymore.