Use of gradient images is very common among developers for styling a page. Gradient images are used in many places from styling the navigation bar to styling the background. Technique like repeating a small image in either direction is also common.
One more way to style and give this effect is by using multiple div's one below another with different color, the latter being a little lighter than the former. In the most simple scenario doing so would include only a small script. So, no problem of writing a lot of markup, just some simple code.
The only concern that remains is speed and performance.
Speed
The script, more precisely the function would be much shorter in size than a image. So, in matters of speed the latter method seems more good.
Performance
Today's browsers are very powerful, so the difference between displaying an image and executing a function is negligible.
Css management
Obviously, problems like positioning would be another concern but we do struggle with such problems in every day life. The problem is no greater than overlapping two div's and setting their z-index. The whole gradient div's can lie inside one parent div.
So having addressed the issues of performance and speed isn't using Gradient div's a much better approach than using images?
It's an alternate approach, yes. But not a good one. You get zero points for:
Maintainability
Scalability
SEO
Separation of presentation from content
Furthermore, to say that we needn't worry about performance since today's browsers are more powerful is a gross assumption.
Actually, I think the second option you describe (creating multiple divs with atering colour) is downright terrible.
You're altering markup for the sake of styling. That's a no-go.
It's a common thing among users to disable JavaScript. What happens then?
As you said yourself, positioning mayhem.
When it comes to performance, I would be more cautious than to state it's no longer an issue. Especially with the dawn of mobile browsers in mind.
Such styling would be harder to understand and maintain. Particularly when your team changes someday.
Also, there are two other ways to implement gradients.
CSS gradients - limited to simple variants and requiring a lot of CSS to provide decent cross-browser capabilities. You can try this generator get a taste of these: http://www.colorzilla.com/gradient-editor/
SVG backgrounds. These allow you to create just any gradient you wish. You can use an svg file in your CSS just like any other image. However, some browsers don't support this feature. Here's a table showing when it's an option
Using images is the most reliable option, while combining SVG with normal images (for these browsers that don't support SVG) seems the most flexible approach.
Related
A while ago I found an article which discussed a solution to an alternative to the traditional way in which CSS sprites are used and designed.
A common issue is that you need to leave space around a part of the sprite if you don't want to accidentally have other parts of the sprite "bleed" into certain elements. Thus you can use diagonal layouts and things to alleviate this problem, but they all require a lot of open white space.
This article demonstrated an alternative which let you create zero white space sprites, and let you define the exact area and dimensions of the image you want to use without worrying about bleeding. I believe it used the CSS content property in the method, but I can't be sure.
I really want to find this article again but I can't seem to find it :(
I'm sorry for my vague description, but for anyone else who saw the article, they'll know what I'm talking about. Any help finding the link? Thanks!
I think what you're referring to might be creating font icons. It allows you to have retina-ready images, while at the same time restricting you to 1 color. There are currently two good solutions to do that:
http://fontawesome.io
http://icomoon.io
There's also the way of creating SVG modifiable shapes, which in turn allows you to use shapes of almost unlimited colors and complexity. This solutions however is not perfect, as it's based upon SVGs, which are not supported by older browsers
I'm working on a site that uses images diagonally aligned. The images are fairly simple and have some text inside so I can achieve the effect using either images or the CSS3 transform: rotate and border-radius properties, granted, with all the proprietary extensions.
However I'm wondering if there are significant advantages for using one over the other. I'm thinking maybe the CSS-only alternative would load faster, but a downside would be the use of more code for each image. Although using images I'd still have to do a lot of positioning for each element. Also, the CSS in the first case would not validate using browser-specific extensions, how important is this if I still make sure the site is correctly displayed in most browsers?
Is there a general approach for using either one of these options? What would you recommend?
The use of CSS3, versus images, is best answered by your need to support Internet Explorer (or other older, or CSS3-unaware, browsers): if a large portion of your user-base browses with IE then you should use images.
If you're only interested in the later, more standards-compliant, browsers (possibly including IE9, but I've no experience with it as yet) then CSS 3 is likely the better option, since it might involve a larger CSS file, but it does allow you to switch your layout more easily in future, without having to create/recreate a new set of images for the new design.
You could, of course, combine both approaches: use CSS 3 for the compliant browsers, but include an IE-specific stylesheet, with conditional comments, to supply the images as, perhaps, background-images to build up the design. This is, of course, likely to be a lot of work, though.
I would honestly recommend an image for this. CSS3 is cool, but browsers that don't support it might break your layout. Also (possibly more importantly), text really needs proper anti-aliasing to be readable when rotated or scaled, and you can get finer control over that with an image.
Two things I think you should consider here:
Images are a killer for those on mobile devices. So if you are targeting those with mobile or expect a large mobile audience, you may want to reconsider using a lot of images (and having your users pay a ton in bandwidth).
The text in your images (if you use images) will not be searchable by search engines and will not be accessible for those with accessibility issues, unless you are good at filling in your alt tags. ;-)
I have recently begun using image sprites and they are definately great for reducing http requests. Is there a point where it becomes bad practice?
Im thinking particularly where a lot of extra markup has to be added to support them. For example, using them for list bullet points, I have to add two or three extra spans to get everything alligned etc.
Theres also the annoying point that you cant use repeating images, so therfore there is always the toss up between one large image as part of sprite or a tiny 1 pixel image used for repeating downloaded on its own.
Im really looking for an opinion on the two situations outlined here + any other general considerations/guidelines for using sprites.
They can often cause performance issues on mobile devices. I'm not 100% certain why (never really dived into the problem), but I'm assuming it's because the mobile webkit is loading a new copy of a relatively large image into memory for every instance of it on the page. Since mobile devices often have very small amounts of RAM, it can quickly cause the page to slow down.
I've run into this issue before when having about 300 "icon" sprites on a page at one time, each pulling from a sprite image that contained about 50 different icons. Going back to "normal" methods of one icon per image (or 2-3 for hover states) solved performance issues on this particular page.
Also, many browsers (mobile and otherwise) will often not 100% respect the clipping of sprites when you slightly resize the page content (e.g. using "Zoom In/Out" on the browser itself). You'll often see little pieces of the sprite next to the one you want to use.
As for your bullet example, you shouldn't ever need more than one extra div/span. You would set a margin-left on the li and position your "bullet div" in the empty space it creates.
That being said, I use sprites all the time because they're convenient, just be aware of a few issues with them. Generally, I have sprites.png, sprites_h.png and sprites_v.png for horizontally and vertically repeating pieces.
Write two simple test pages, use sprites on one, and not on the other. Use a tool like http://www.webpagetest.org/ to measure the performance in a few different browsers. Once you have data, you can make decisions.
I would divide sprites by related elements, like navigation and content-related sprites, so you can benefit from sprites and keep a logical order in your code. Don't forget that readable and understandable code should be a priority (particularly with CSS, it can get very messy) unless you're working on a Google-scale project.
Is there any way to make ie (7,8) display a gradient AND a background-image on the same div?
The only way I got it working (but only almost) was by using two filters, one for the gradient and one using the AlphaImageLoader - but of course, then you can't position the image.
Declaring a background-image and gradient filter doesn't work, because it simply won't render the image - only the gradient.
Is there any (preferably non-js) solution to this?
If not, I'll have to resort to using a background image for the gradient as well, which isn't quite as nice but won't make much of a difference either...
I would say that adding a little unnecessary markup is the lesser of the evils here. Either that, or let IE-users live without the gradient.
Oftentimes getting your design to work is a trade-off between semantics, performance, standards and pixel perfection. Accepting that fact was hard for me, but it's made me a better front-end developer - I can work faster, and I can make decisions about what metric is important in a given case.
Having asked this question How to reach CSS zen?, I now understand that the issues I have are mostly related to positioning. I've found some articles telling that CSS is not always good enough as a layout system.
http://echochamber.me/viewtopic.php?f=11&t=40154
http://www.flownet.com/ron/css-rant.html
http://blog.workaround.org/2009/03/17/dont-abuse-css-for-page-layout/
Do you as CSS designers limit yourselves upfront to designs that CSS can handle? Should I avoid things that seems perfectly easy are in fact difficult to do with CSS?
Of course you limit yourself. As a designer, you should always think about the medium you're working with. If I were designing a magazine ad, I wouldn't be thinking about animations or video. There are certain rules you must adhere to, and it doesn't make sense to ignore that.
But of course, rules were always meant to be broken.
Why?
If you are "designing", why would you limit yourself based on a the limitation of one technology? When you design your site, you should always try to achieve the most usuable interface for the user.
If you do limit yourself, then you are just asking for the site to not be used, and then what's the point of creating it?
I don't limit myself upfront to any designs that CSS can handle (within reason of course), just figure out your design and there will be someway that you can get it looking right using CSS, but it might involve a lot of hair pulling, especially if IE6 is involved!
When implementing a web design (assuming I've got an image/drawing of what the site will look like) I always follow these steps:
I look at the design and determine what components it has. Examples are navigation areas, headers, content areas, and so on.
I implement (X)HTML that can represent the content areas without really taking the design into account (there are certain things such as content order that I use the design to determine.)
I start making the CSS and images needed for the site to look the same way it did in the original design document. Depending on the complexity of the design, I might come up short of elements to use for styling the page, and may end up adding elements that don't really make sense for the content. I try to avoid it as much as possible, though, and I try to create the elements in a way that isn't obtrusive to the content.
As you can see, I never limit the design to the capabilities of CSS. CSS comes last. Now, depending on the complexity of the design, it might not look exactly like it did in the original design document, but the goal is always to make it as identical as possible, while still maintaining clean HTML so that the design can easily be updated in the future.
Most layouts I find can be done with CSS. There are a very few exceptions (normally to do with verically centering text).
For me the main factor which limits my designs is a reluctance to use huge background images. If an effect can't be done by combining/repeating a few tiny bg images I tend to reject or tweak it. Eg a diagonal gradient on a box with curved corners which could be any height might fall into this category using CSS2.1
Almost every painter limits themselves to paint on canvas, almost every sculptor makes 3D shapes from stone or clay or metal...
But there's also the few who dream new dreams and create new things. Some flop, some shine.
Should you limit yourself based on what CSS can do with layouts? Not completely. I say dream big.
Once you've got your dream design, either figure out how to create it, find a technology other than CSS that can do it, or go start inventing!
You can do absolutely almost anything using CSS 2.1 as far as layout. Its a complete pain in the ass that has no reason to ever exist, but you can do rounded corners (using background images), gradient backgrounds (more background images) and all kinds of other bloated crap you don't need all together and still not completely destroy the semantics of your HTML.
Doing all that garbage and still attempting to be standards compliant reduces usability, because its the designers who need round corners and other frivolous crap and not the users. Usability tests have confirmed this. Sites that are bloated to accommodate presentation and usability at the cost of semantics and efficient fail in usability tests compared to their competition. I work for a website that gets several million visitors a day and I have seen the results of our usability tests.
CSS provides a very good way to create an overall design that easily can be changed by small changes in one CSS file, and instantly applies the design changes to all your pages. Of course there are things that are tricky to do with CSS, and in those cases you might want to do it in other ways, but even if your layout is mainly based on CSS, doesn't mean that you can't do some special parts using other technology! You can mix!
So you don't limit yourself when you go for CSS. You just make use of a powerful technology that can be used in perfect harmony along with others!