homepage Welcome to WebmasterWorld Guest from 54.205.207.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
gradients in css
whatson

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4462791 posted 4:06 am on Jun 8, 2012 (gmt 0)

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

 

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4462791 posted 2:02 pm on Jun 8, 2012 (gmt 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]

whatson

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4462791 posted 2:57 pm on Jun 8, 2012 (gmt 0)

Thanks, what about browser compatibility?

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4462791 posted 3:23 pm on Jun 8, 2012 (gmt 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.

whatson

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4462791 posted 3:47 am on Jun 9, 2012 (gmt 0)

Ok, so best to just use an image?

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4462791 posted 9:40 am on Jun 9, 2012 (gmt 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.
brandozz



 
Msg#: 4462791 posted 2:10 am on Jun 13, 2012 (gmt 0)

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

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4462791 posted 2:46 am on Jun 13, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved