SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gradients , Text Shadow and IE filter

    Hi guys,

    I am enjoying taking full advantage of CSS3 and have started using quite a lot of background gradients and text shadows. I am quite happy to allow some browsers to gracefully degrade as I am too lazy to PhotoShop back-up images LOL.

    However, due to widespread audience, I do insist on IE 7,8,9,10 which I think is reasonable nowadays (because IE6 will be dead within a year or two), in my humble opinion. Anyway, I'm struggling to find a Gradient/Drop-Shadow generator which produces consistent filter-code.

    Can anyone point me in the right direction and if possible explain what is the best cross-browser IE filter syntax , in case I have to code it manually.

    IE 7 and 8 are the main culprits although there seems to be a version of IE9 which doesn't support these filters. I look forward o being enlightened on this subject.

    Thanks in advance

    Silversurfer
    "Persistence is the path to perfection"

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As for teh gradiants, would you be apposed to just using an image? Have you thought of doing that? It produces consistant results cross browser.

    Dropshadow should be the same story.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for your reply Ryan,
    Yes I usually would but I'm thinking now with almost all of these modern browsers supporting the css3 gradients/shadows, its a lot quicker to just code them on the fly rather than open up Photoshop and make them and then upload them. The generators online seem to work great but IE 7 and 8 behave strangely with certain filters so not sure what approach to take.
    "Persistence is the path to perfection"

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'd stick with images for now personally. True CSS3 opiton is there, and if you want to take that route you can, but just realize that you'd either have to ignore them , or use a filter such as this
    Code:
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#FFFFFF);
     -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#000000, endColorstr=#FFFFFF)";
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    EEEK ! its nasty code isn't it , I agree but that's why I wanted to find a decent css3 generator which does that horrible syntax for you and as mentioned previously, I'm having problems with a few of the main ones.

    So that code you have given me, thanks btw, there are two lines, for different versions of IE I presume?

    We all know that they've never been able to follow simple W3C standards but Can't Microsoft even keep their own code standardized??
    "Persistence is the path to perfection"

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The first line of code is designated for IE7 and down.

    The second line of code is for IE8 because they have finally done a vendor extension. So that -ms- is targeted for IE8.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •