9/1/2023 0 Comments Parallax css iosIt's just silly and ultimately this is just an experiment.Īnd now the fun but laborious process of getting an understanding of CSS based parallax.įirst and foremost, it is imperative you read up on this technique using the best resources available. Tl dr - I can't be arsed fixing the build for these clients since they've made it incredibly more difficult to code emails. However, it would be simple enough to fix for a typical faux absolute + parallax build with full width blocks and a few small elements layered over the top. This project required a fair amount of CSS because of the targeted fixes, so I'm not going to set up the inlining just for these three clients, considering it's an experiment. Comcast I can't do too much about as I'm not US based and cannot get an account to test. It worked everywhere except GMX, Web.de, and Comcast. Here is the base build with wording tweak included □: Outlook still requires VML to make this work but VML supports position absolute which is way easier to use □□□ Then play with the max-height value of each div to push surrounding elements down or use absolute positioning, margin or padding to push your elements around. Basic premise is to wrap all of the elements you want to layer over the top of each other, in divs (I've only tested with divs, but may work with a span or even a table) individually, set the max-height to 0 on those divs which in-turn makes them trick each other into thinking everything is zero'd out. I urge you to look into the faux absolute positioning technique if you haven't already. The main point is to show parallax working in Apple's own mail client(s). If you test this out, you will definitely see some small positioning issues on mobile, but that's okay. I just wanted it to work and there is so much positioning involved that it would be a hell of a job adapting everything as the whole project scaled. I mentioned this earlier but I think it's important to note again - I decided not to go down the rabbit hole of making this responsive. Faux absolute as a strong, well supported base for the majority of email clients and parallax as a bonus, if it is even supported. And if it was supported even in one email client, it would be treated as a progressive enhancement on top of a more solid base. I also knew that parallax wouldn't be easy, otherwise we'd see it used more often. Going into this, I knew most of the ins and outs of the faux absolute technique, from my work on the multi-axis faux absolute module for a client project at Mailix, so I knew the approach to take and the email client support.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |