Is is better to use CSS or image for these two cases:
1) Need a gradient like shading of purple on my homepage (color fades from dark purple to light purple)
2) All the menus on my site have an arrow "More " and when opened it changes to "Less "
Currently my design team has made the homepage as CSS and the arrows as images. But I cant see any advantage or disadvantage of one over the other or what is best practice to use?
Depends on what browsers you want to support.
1) If it needs to be cross-browser compatible across a wide range of browsers, go for an image.
2) I would stick with images for the arrows. They can be made with CSS using border trickery, or canvas, but I don't think it's worth the hassle.
I recommend the use of images. They are supported over all browsers and old versions. You can further apply CSS styling to the images, if needed.
Using CSS to create icons and gradients is difficult and isn't supported across all browsers (especially IE).
Extra request for multiple images (that cache) > using CSS tricks that aren't cross browser
Related
So I have an developing a basic website and used some images with cool light effects but the change in color hits the edge of the page, this is the image:
So as you can see the light in the image reaches the edge so what I am wanting to know, is there a way to blend the edges in css or html so they look good and not like that? I've looked all over the web and can't find anything really relating to my problem...
Thanks in advance!
There are many ways to accomplish that, but the only good way is to take care of your edges when producing the image. Clear and simple. If your page has a black background, make sure you have an image background of the same color. Then fade your "light effect" into that same color before hitting the edge using your favorite image manipulation program.
I advice against producing an image with a transparent background - your image is large and performance will be slightly smacked.
If you truly want to experiment with fading post-production, you could use CSS gradients to make the image seem to fade off at the edges. Or use (vendor specific) CSS3 toys like box-shadow (see Box shadow on MDN) to produce an inset, black shadow.
Keep in mind though that all these tricks, specially on such huge images as you presented, have their cost in browser performance (and thus user experience) and are not supported widely (specially older browsers). Also, many mobile devices will not thank you for the effects show.
If creating a web graphic that's meant to be used in many places and overlaid on top of other elements, is it possible for the graphic to composite with whatever's beneath it -- like setting a Photoshop layer to be "Difference" -- such that its colors invert?
Specifically, picture a "Left" and "Right" image arrow that could be placed on top of an image carousel. Many images could appear beneath it and, if the arrows are lightly colored on a lightly colored image, they may be difficult to see. As such, an image whose color is the difference of what's behind it would turn dark on a light background.
I'm picturing doing this with an SVG, potentially, but if it could be accomplished with a png or other bitmap of sorts, that'd be neat too.
If you're on bleeding edge browsers you have the option of using CSS blend modes, see this tutorial.
For more details, see the specification, which covers html, svg and css.
yes it can, but the support is really poor if you want a CSS only solution. You had the inverse filter on IE versions and now you have Webkit support, but that's about it. However, you can use JQuery Invert plugin by Paul Irish. It does exactly what you want, and obviously has better support than CSS
I merged a set of icons into one .png file and use css background-position to show these icons on a page, because img tags make a lot more http requests.
However, I need to show every icon in 2 different sizes: 20x20, 60x60. How can I do this without creating 2 separate .png files (20x400 and 60x1200)?
I am aware of the background-size property to scale the background image, but it is introduced in css3 and IE doesn't support it before 9.0.
Is it possible without using background-size?
The best way to do this is using "font icon technology" - you can read all about this in the web. Also it is helps when you need your markup retina compatible
Since you cannot use background-size for compatibility reasons you could try having both small and large versions of the icons in the same image. How you group them is up to you, but you should do some testing whether the increased size of the image still results in an acceptable load time for your pages.
+1 for icon fonts. You can do some pretty fancy things with them e.g. http://forecastfont.iconvau.lt/
I think that you could use "background:size" property. With it, you can "visually re-scale" background image.
Please look here
What's the best, most robust CSS-button definition?
Ideally, I'd like gradients, rounded images, and graceful degradation down to IE8. It would also be great if the buttons didn't use any images, and the buttons scaled horizontally to fit their content.
What's the best solution to this?
Use the tools at http://css-tricks.com/examples/ButtonMaker
It is possible to use gradients, box-shadow, border-radius, rgba colour et cetera in older versions of Internet Explorer, using CSS3 PIE. Look at their demo with all these CSS3 properties.
Now, combine CSS3 PIE with the button maker mentioned in the comments and you're done!
Huge fan of JQuery UI buttons. Demo is here
Yes, they do use some images...but the images are also common to the many other features of JQuery UI, which offers your page some amazing features (and more coming all the time) It does gracefully degrade, and you can extend it to round in IE via another JQuery plugin. My favorite part is ThemeRoller, which allows you to build a page using themeroller capable plugins, then style or change at will, even with a tool that floats over the site. You could easily include a way for your user to switch the entire theme of the site with a button click. Plus, there's an editor to easily make your own themes if you don't like what's there.
As for gradients, you have fade up, fade down, curved fade, patterns, and then "build your own" options with variations of those and more plus color overlays and opacities.
Setting up a button is as easy as: <button class="ui-state-default ui-corner-all" type="submit">Button</button>
There is no way to do what you're asking with CSS only, as gradients and corners were only added as of CSS3 and even now they are still not fully supported.
The best way to achieve gradients now is to use an actual image, you can then be assured that most if not all browsers will support it (if you're using a .png image, IE6 may have an issue with it but there are CSS hacks to get around it).
Rounded corners can be added to the site in two different ways:
The first is via images and you would place these at the corners of the element giving the rounded appearance. What I've said before about .png images still applies here.
The second method is to use JavaScript. Most frameworks will have plugins designed with Web 2.0 features in mind. I recommend jQuery as it's easy to implement.
Out of the above two methods the first one is preferred if you want to make absolutely sure that the users can see curves, however if you aren't too concerned about them having JavaScript disabled I would definitely use jQuery as it's 100 times easier to use.
I have 6 images that makes a box. (for the borders, and corners), How would I put the images together and make it dynamic and get bigger when I put more content in it?
Either use a sliding doors approach (also see the follow up article) generalised to four way expansion, or put all your images back into one and investigate the border-image property.
If you want to support IE and older browsers then sliding doors is the way to go, if you're targeting smartphones then border-image will probably be OK.