SS
1
Gradient backgrounds
Anyone know what and where to put the code for the gradient to work in MSO? Or at least have it default to a particular color?
Anyone know what and where to put the code for the gradient to work in MSO? Or at least have it default to a particular color?
I believe you can add a
type="gradient"to<v:fill>not done much testing on it, just saw someone share it and made a note.https://docs.microsoft.com/en-us/windows/desktop/vml/angle-attribute--fill--vml
I had some success with similar code to Melissa, but watch out for the 120dpi Outlook, could never get that to work correctly - likes to push out with an image and add a bunch of the background color and no gradient.
This one works for me, just copy and past in your corresponding sections.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<title>Gradient Background</title>
</head>
<style type="text/css">
/*Gradient background*/
table tr .inner.contents.grade {
background: -moz-linear-gradient(top, #333333 0%, #d9d9d9 100%); /* FF3.6-15 /
background: -webkit-linear-gradient(top, #333333 0%, #d9d9d9 100%); / Chrome10-25,Safari5.1-6 /
background: linear-gradient(to bottom, #333333 0%, #d9d9d9 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
background: -ms-linear-gradient(top, #333333 0%, #d9d9d9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#d9d9d9', GradientType=0 ); / IE6-9 */;
}
</style>
<body>
<!-- Begin Gradient Bacground and paragrapgh section -->
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:200px;" fillcolor="#d9d9d9 ">
<v:fill type="gradient" color2="#333333"/>
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<tr>
<td style="padding: 0;border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" >
<tr>
<td class="inner contents grade" >
<p style="color: #ffffff;line-height:16px; font-size:14px;">Here is a gradient Background from dark to light. Make the above td the same dark color and the below td the light color. </p>
</td>
</tr>
</table>
</td>
</tr>
<!--[if gte mso 9]>/v:textbox/v:rect<![endif]-->
<!-- End Gradient -->
</body>
</html>
it does work, but i believe the use for .ExternalClass is better then if mso method
in the <style> tag. under .ExternalClass.
You put the gradient inside the background-color/img there are more then 1 to skin this cat. but if you want it to be the default for your entire mail, set it to the main element (we use table) and give it a class (main-bg-gradient FE), and then do
.ExternalClass.main-bg-gradient{/* enter gradient here */
}
i hope it helps
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:225px;color:#FFFFFF;text-align:center;" align="center" fillcolor="#006AE1">
<v:fill type=gradient color="#00CA9D" color2="#006AE1" angle="-90"/>
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<v:textpath style="text-align:center;" />
Enter Code here
/v:textbox
/v:rect
<![endif]-->
THis is the class i created:
.grad1{
height: 500px;
background-color: #8270b3; /* For browsers that do not support gradients /
background-image: linear-gradient(-46.30deg, #00b2a9, #8270b3); / Standard syntax (must be last) */
}