Welcome to WebmasterWorld Guest from 54.226.147.190

Forum Moderators: not2easy

Message Too Old, No Replies

gradients in css

     

whatson

4:06 am on Jun 8, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



How do you create gradients in CSS, and is it possible to do drop shadows or inner shadows too?

alt131

2:02 pm on Jun 8, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi whatson, one of the articles I mentioned in your other post uses gradients in the examples. Try css3.info for examples (with explanations) of text-shadow and box-shadow.

[edited by: alt131 at 3:11 pm (utc) on Jun 8, 2012]

whatson

2:57 pm on Jun 8, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks, what about browser compatibility?

alt131

3:23 pm on Jun 8, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi whatson ... not a great answer, depending on your target user. box-shadow in ie9+, but not text-shadow. Most of the other major browsers have supported both for a number of versions, or proprietary extensions before that.

If you need to give earlier ie an equivalent experience, perhaps filters - but note they are very resource heavy.

whatson

3:47 am on Jun 9, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ok, so best to just use an image?

alt131

9:40 am on Jun 9, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi whatson, "best" really depends on a number of factors and I wouldn't want to say without more information. For example:

  • What browser versionsm platforms and devices are you expecting your target user to be using?

  • Are you insisting users of older or less able versions have an equal experience - or just similar? (Ideally we'd all say equal, but many folk are still surfing with ancient technology, you have to draw a line of support somewhere.)

  • What is the weight of the pages. For example, are they loaded with graphics etc that already mean lots of hits on the server and slow download times already.

  • Do you really need a gradient and/or is it possible to duplicate the effect of a gradient with clever design? For example, nice shadowy borders can sometimes be simulated using a double border and the right choice of colours.
I know you've just started and this might seem a bit of overload, but these are the sorts of things to think about when making these kinds of decision.

brandozz

2:10 am on Jun 13, 2012 (gmt 0)



You can experiment with the Ultimate CSS Gradient Generator by Colorzilla.

rainborick

2:46 am on Jun 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Even though this thread is getting old, I thought I'd post a note about browser compatibility. Current versions of Firefox, Chrome, Safari, and Opera all support it, although some older versions lack support for radial gradients. Opera Mini lacks support and has not announced future support. IE 10 will support it, and older versions can do two color gradients with filters.

I'm all thumbs when it comes to graphics programs, so I enjoy working with CSS gradients. But it's like so many such things, you have to limit them to non-critical features and provide fall-back instructions for the laggards.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month