box-shadow using images in emails

Below code use images sliced down for all four sides. In mobile, below code hides images and apply box-shadow property.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”
xmlns:v=”urn:schemas-microsoft-com:vml”
xmlns:o=”urn:schemas-microsoft-com:office:office”
xmlns:w=”urn:schemas-microsoft-com:office:word”>
<head>
<!–[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:Allowjpg/>
<o:PixelsPerInch>96/o:PixelsPerInch
/o:OfficeDocumentSettings
</xml><![endif]–>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”format-detection” content=”telephone=no”>
<meta name=”format-detection” content=”date=no”>
<meta name=”format-detection” content=”address=no”>
<meta name=”format-detection” content=”email=no”>
<title></title>
<style type=”text/css”>
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
table {
border-spacing:0;
}
table td {
border-collapse:collapse;
}
.yshortcuts a {
border-bottom: none !important;
}

@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
table.box_shadow {
width: 90% !important;
-webkit-box-shadow: 0px 0px 20px 0px rgba(23,114,183,0.2);
-moz-box-shadow: 0px 0px 20px 0px rgba(23,114,183,0.2);
box-shadow: 0px 0px 20px 0px rgba(23,114,183,0.2);
margin: 0 auto;
display: block;
}
tr.hide,
td.hide,
img.hide,
span.hide{
display: none;
visibility: hidden;
font-size: 0;
max-height: 0;
line-height: 0;
mso-hide:all;
}
}
</style>
</head>

<body>
<!– BOX SHADOW TABLE –>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ class=”box_shadow”>
<tbody>
<tr>
<td colspan=”3″ align=”left” valign=”bottom” style=”line-height: 0″><img src=”images/top.jpg” alt=”” width=”422″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
</tr>
<tr>
<td width=”12″ align=”left” valign=”top” style=”line-height: 0″><img src=”images/left.jpg” alt=”” height=”500″ width=”12″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
<td width=”398″ align=”left” valign=”top”>
<!– TABLE CONTENT GOES HERE –>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td style=”padding: 20px”>HEADLINE</td>
</tr>
</tbody>
</table>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td style=”padding:0 20px 10px;”>BULLET</td>
<td style=”padding:0 10px 10px 0;”>CONTENT</td>
</tr>
<tr>
<td style=”padding:0 20px 10px;”>BULLET</td>
<td style=”padding:0 10px 10px 0;”>CONTENT</td>
</tr>
</tbody>
</table>
<!– END TABLE CONTENT –>
</td>
<td width=”12″ align=”right” valign=”top” style=”line-height: 0″><img src=”images/right.jpg” alt=”” height=”500″ width=”12″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
</tr>
<tr>
<td colspan=”3″ align=”left” valign=”top” style=”line-height: 0″><img src=”images/bottom.jpg” alt=”” width=”422″ class=”hide”><!– HIDING IMAGE FROM MOBILE –></td>
</tr>
</tbody>
</table>
<!– END :: BOX SHADOW TABLE –>
</body>
</html>

box-shadow in emails

We have a CSS3 property box-shadow which can be used in emailers. This property is supported in most of the email clients.

Like outlook 13 and below do not support this property. For that we can add a border of 1px so that if box shadow not supported then border can appear.

We can also use images for box-shadow if acceptable. Click here for source code for box shadow using images in email

Accessibility for data tables

Data tables are most easily readable by screen readers and need no extra mechanism to enable screen reader support.

HTML structure for accessibility:

Use below for screen reader to read tables as rows and columns along with cell with text and cell reference in table:

<table>
 <tbody>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Age</th>
    <th>Place</th>
  </tr>
                    
  <tr>
    <td>201</td>
    <td>John</td>
    <td>25</td>
    <td>California</td>
  </tr>
  <tr>
    <td>202</td>
    <td>Smith</td>
    <td>30</td>
    <td>Miami</td>
   </tr>
 </tbody>
</table>

With proper table structure, screen readers tend to read it correctly. You might add below tags as well:

<thead></thead>
<tbody></tbody>
<caption></caption>

<caption></caption> is good to add to enable screen readers for tables.

GIT LFS – GIT Large File Storage

Git Large File Storage (LFS) replaces large files such as audio samples, videos, datasets, and graphics with text pointers inside Git, while storing the file contents on a remote server like GitHub.com or GitHub Enterprise.

Steps to install on MAC:

First install homebrew on your machine using terminal. Homebrew installs the stuff you need that Apple (or your Linux system) didn’t.
Paste below command in terminal and hit enter
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

And now git-lefs can be installed using brew on OSx. Use below command.:
brew install git-lfs

How to download files when git-lfs was installed after git clone:

If repo is setup using git lfs, and you cloned your repo without installing git lfs, you might run into issue of broken files and images in your local repo. To fix this issue, please follow along. Use below command if you have already cloned a repo which is using lfs for files:
git lfs fetch

This command will download all Git LFS files for a given ref.
Enter username & password for github, if required.

This works for me!! Please share if any solution you found other than this.