SOLVED

3D imagery & drop shadows in Marketo emails

Go to solution
Hoppers13
Level 4

3D imagery & drop shadows in Marketo emails

nike-summer-email.PNGhi all hope you're well? please do we know how i can achieve something akin to this email attached in Marketo? I know we've a piece of work to do around imagery, but would it just be: add in a background we have a hex option on on an image & then match it with the email hex background? would the marketo image modules allow this please?

 

thanks, Mike

1 ACCEPTED SOLUTION

Accepted Solutions
Dave_Roberts
Level 10

Re: 3D imagery & drop shadows in Marketo emails

Hey Mike,

 

In code, this sort of thing can be accomplished by using the box-shadow css property to create that drop-shadow. However, in the email universe this is not well supported enough to display consistently across the most popular inboxes. 

 

Here's a link to a site called "Can I Email" which helps to track the support for CSS properties in different inboxes -- this page is specific to the box-shadow property: https://www.caniemail.com/features/css-box-shadow/.

As of today, almost half of the inboxes out there DO NOT support this, and that's why I'd recommend not using the CSS property to accomplish this like you might on a Landing Page.

 

Instead, the way I've normally seen this accomplished is to include the drop-shadow as a part of the image in Photoshop or whatever you're using to create the graphics. You'll want to save the image as a transparent .png file and then you can insert it into your email just like you would any other image. It is important when doing this that you make sure the canvas for your image is not cropped right up against the edge of the image, you'll want a few extra pixels around the actual image to allow the drop-shadow to show up around the image. In the case of the example you shared here, it looks like the shadow is on the right and bottom of the image so those might get an extra 10px or so beyond the edge of the tan box and the top and left sides could be cropped tight (assuming the shadow doesn't extend beyond the tan box there -- it's hard to tell in the image here). 

 

Let me know if you've got any questions on any of this or if this works out for you to include the shadows in your email?

View solution in original post

7 REPLIES 7
Dave_Roberts
Level 10

Re: 3D imagery & drop shadows in Marketo emails

Hey Mike,

 

In code, this sort of thing can be accomplished by using the box-shadow css property to create that drop-shadow. However, in the email universe this is not well supported enough to display consistently across the most popular inboxes. 

 

Here's a link to a site called "Can I Email" which helps to track the support for CSS properties in different inboxes -- this page is specific to the box-shadow property: https://www.caniemail.com/features/css-box-shadow/.

As of today, almost half of the inboxes out there DO NOT support this, and that's why I'd recommend not using the CSS property to accomplish this like you might on a Landing Page.

 

Instead, the way I've normally seen this accomplished is to include the drop-shadow as a part of the image in Photoshop or whatever you're using to create the graphics. You'll want to save the image as a transparent .png file and then you can insert it into your email just like you would any other image. It is important when doing this that you make sure the canvas for your image is not cropped right up against the edge of the image, you'll want a few extra pixels around the actual image to allow the drop-shadow to show up around the image. In the case of the example you shared here, it looks like the shadow is on the right and bottom of the image so those might get an extra 10px or so beyond the edge of the tan box and the top and left sides could be cropped tight (assuming the shadow doesn't extend beyond the tan box there -- it's hard to tell in the image here). 

 

Let me know if you've got any questions on any of this or if this works out for you to include the shadows in your email?

Dave_Roberts
Level 10

Re: 3D imagery & drop shadows in Marketo emails

Hoppers13
Level 4

Re: 3D imagery & drop shadows in Marketo emails

thank you, I know our in house html guy will agree with what you're saying, so nice to have confirmation of this.

 

Mike

Jasbir_Kaur
Level 5

Re: 3D imagery & drop shadows in Marketo emails

Hi @Hoppers13,

 

You can try it by using a background image including a box-shadow in the body or outer table of the email template.

 

Thanks!

Jasbir

SanfordWhiteman
Level 10 - Community Moderator

Re: 3D imagery & drop shadows in Marketo emails


You can try it by using a background image including a box-shadow in the body or outer table of the email template.


Dave has already explained that box-shadow isn’t widely supported. Please read previous replies, thanks.

Jasbir_Kaur
Level 5

Re: 3D imagery & drop shadows in Marketo emails

I meant that box-shadow will be the part of the image.

 

Thanks!

Jasbir

SanfordWhiteman
Level 10 - Community Moderator

Re: 3D imagery & drop shadows in Marketo emails


I meant that box-shadow will be the part of the image.

It’s not a box-shadow then (it is a drop shadow or a box-shadow-like effect, but box-shadow is specifically a CSS style).

 

Dave already mentioned burning the effect into the image itself.