HTeuMeuLeu’s avatarHTeuMeuLeu’s Twitter Archive—№ 24,342

          1. I’m in absolute love with this “CSS holographic effect” technique. So of course I had to try it in HTML emails. And guess what, it works flawlessly in Gmail. Here’s a tiny thread. 👇 #emailgeeks @Robb0wen/1545037603946127364
            Permalink On twitter.com Twitter logo HTeuMeuLeu’s avatar ♻️ 15 Retweets ❤️ 57 Favorites Mood +6 🙂
        1. …in reply to @HTeuMeuLeu
          “i tHoGuHt hTmL EmAiLs aRe sTuCk iN ThE 1990S” I hear you ask. So how is that possible? The original technique relies on three things: blend modes, fixed background attachment and absolute positioning. So how do we get this to work in Gmail?
          Permalink On twitter.com Twitter logo HTeuMeuLeu’s avatar ❤️ 7 Favorites Mood -2 🙁
      1. …in reply to @HTeuMeuLeu
        1. Blend modes are supported in Gmail since 2016. Overall support in email clients is pretty good, the two biggest absent being Outlook on Windows and Oath clients (Yahoo and AOL). caniemail.com/features/css-mix-blend-mode/
        Permalink On twitter.com Twitter logo HTeuMeuLeu’s avatar ❤️ 2 Favorites Mood +8 🙂
    1. …in reply to @HTeuMeuLeu
      2. Absolute positioning is badly support however. Mostly for good security reasons. (You wouldn’t want someone to position a fake button over a webmail’s own button.) But we can mimick this using @M_J_Robbins’ faux absolute position technique. goodemailcode.com/email-enhancements/faux-absolute-position
      Permalink On twitter.com Twitter logo HTeuMeuLeu’s avatar ❤️ 3 Favorites Mood 0
  1. …in reply to @HTeuMeuLeu
    3. The final trick is for background-attachment. Gmail doesn’t support the property. Bummer. But! Gmail CSS filtering mostly works based on property, not values. So we can apply a fixed value to the shorthand background property, and voilà!
    On twitter.com Twitter logo HTeuMeuLeu’s avatar ❤️ 2 Favorites Mood 0
    1. …in reply to @HTeuMeuLeu
      I hope this shows how HTML emails can be modern and exciting. These techniques have been known and supported for more than 6 years. Email clients are not holding us back. We’re doing this to ourselves. Or as I tend to say… HTML emails are not stuck in the 90s. But maybe you are?
      Permalink On twitter.com Twitter logo HTeuMeuLeu’s avatar ♻️ 3 Retweets ❤️ 9 Favorites Mood +9 🙂
      1. …in reply to @HTeuMeuLeu
        🎁 Here’s the full code for the email I sent in my first tweet: parcel.io/e/4214df82-e8a0-4c5c-990e-16e9450f350c
        Permalink On twitter.com Twitter logo HTeuMeuLeu’s avatar ♻️ 2 Retweets ❤️ 13 Favorites Mood +3 🙂