SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Inline CSS Sprite

    Hello everyone. I basically have a relatively simple question, but my searches haven't really given me very positive querry returns.

    Anyways, my question is this. Is it possible to use "inline css" for sprites?

    What I'm trying to accomplish is make an email signature with a company logo linked with mouseover effect from greyed to color. Mostly what I've found more or less uses embedded css, but for email clients and so on for compatability usually strips the embedded out.

    I did find something earlier an article "CSS Sprites with Inline Images" but it also uses embedded css.

    Any help would be much appreciated. Thanks. I've also attached a zip file of my source files in case anyone needs to get a better idea. Thanks again.
    Attached Files Attached Files

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jakes51 View Post
    What I'm trying to accomplish is make an email signature with a company logo linked with mouseover effect from greyed to color.
    I'm afraid most, if not all, email clients won't allow for this. You can't do :hover inline, and that's about all that works in email.

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's kind of what I was afraid of. I was doing more research here in the forums and found a thread that may be an alternative.

    how-apply-inline-css-image-rollover-style-anchor

    Paul has an interesting approach to an alternative. He does mention that some people use invalid style in their emails to avoid css being stripped. Could his method work?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    You could give it a try, but I doubt it will work. Email is a very flaky medium, and many aspects of CSS don't work in that medium. So it may work in some clients and fail in others.

  5. #5
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah.. it is a double edge sword. I've been designing html emails 3 years now for my employer. Sadly, they rather send image based ad emails for their clients and all the wrong things to do.

    Paul's method works fine in a web page but my email tests failed. I kind of suspected it wasn't going to work, but I thought I'd give it a shot and look for an alternative or something. Was hoping though since some css works.

    Campaign Monitor has a nice list of what's supported for a variety of email clients and web mail. htmlemailboilerplate does have some work arounds and hacks to fix email issues but nothing for sprites or image replacement.

    Anyways... thanks.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    I guess you could try an animated gif if you need to have something moving.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    HTML e-mails tend to only do HTML 3.2 with LIMITED CSS support. Fancy effects like you are asking for are right out the window.

    Probably why I don't use HTML for e-mails in the first place; well, that and I have my server set up to block them as no LEGITIMATE e-mails I expect to get would need HTML in the first place!

  8. #8
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally Posted by ralph.m I guess you could try an animated gif if you need to have something moving.
    lol yeah I thought about that too. A .gif would somewhat get their attention, but I don't think it's really needed unless clicked on which is why I wanted to try a mouseover.


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
  •