Welcome to WebmasterWorld Guest from 54.196.245.74

Forum Moderators: not2easy

Message Too Old, No Replies

gradients in css

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 21, 2002
posts: 1541
votes: 0


How do you create gradients in CSS, and is it possible to do drop shadows or inner shadows too?
2:02 pm on June 8, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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]

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 21, 2002
posts: 1541
votes: 0


Thanks, what about browser compatibility?
3:23 pm on June 8, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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.
3:47 am on June 9, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 21, 2002
posts: 1541
votes: 0


Ok, so best to just use an image?
9:40 am on June 9, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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.
2:10 am on June 13, 2012 (gmt 0)

Junior Member

joined:June 6, 2012
posts:104
votes: 0


You can experiment with the Ultimate CSS Gradient Generator by Colorzilla.
2:46 am on June 13, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members