{"id":2512,"date":"2015-12-22T20:46:56","date_gmt":"2015-12-22T20:46:56","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=2512"},"modified":"2016-12-27T09:32:29","modified_gmt":"2016-12-27T09:32:29","slug":"css-in-email-star-wars-edition","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/css-in-email-star-wars-edition\/","title":{"rendered":"CSS in Email: Star Wars Edition"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/starwars-atat2.gif\" alt=\"starwars-atat2\" width=\"450\" class=\"aligncenter size-full wp-image-2513\" style=\"width:100%\"\/><\/p>\n<div style=\"margin-top:-10px;padding:0 10px;text-align:right;\">\n<a href=\"http:\/\/codepen.io\/r4ms3s\/pen\/gajVBG\">Original CSS by r4ms3s<\/a>\n<\/div>\n<div id=\"email-me\">\n  <input type=email id=\"email-me-email\" placeholder=\"Email address\"> <input id=\"email-me-btn\" type=button value=\"See Example In Your Inbox\" style=\"-webkit-appearance: none;\">\n<\/div>\n<p><center><a href=\"http:\/\/codepen.io\/freshinbox\/pen\/jVjBvK\"><B>View the source here<\/B><\/a><\/center><BR><\/p>\n<p>I was mulling around CodePen and found this <a href=\"http:\/\/codepen.io\/r4ms3s\/pen\/gajVBG\" target=\"_blank\">super cool CSS animation<\/a> featuring the Star Wars AT-AT walker of The Empire Strikes Back fame written by <a href=\"http:\/\/codepen.io\/r4ms3s\/\" target=\"_blank\">r4ms3s<\/a>. I thought to myself, hmm I wonder if it will work in email?<\/p>\n<p>Surprisingly, it does! Well for the <a href=\"https:\/\/freshinbox.com\/resources\/css.php\" target=\"_blank\">webkit based email clients<\/a> anyways (iOS, Android 4.4 Mail, Apple Mail, Outlook for iOS).<\/p>\n<p>It all boils down to lots and lots of <a href=\"https:\/\/css-tricks.com\/examples\/ShapesOfCSS\/\" target=\"_blank\">CSS shapes<\/a>, <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/\" target=\"_blank\">CSS transforms<\/a> and <a href=\"https:\/\/freshinbox.com\/blog\/css-animations-in-email-and-vendor-prefixes\/\" target=\"_blank\">CSS animations<\/a>. I learned quite a bit, especially on how to create <a href=\"http:\/\/stackoverflow.com\/questions\/7073484\/how-do-css-triangles-work\" target=\"_blank\">triangles<\/a> from CSS border widths.<BR><BR><\/p>\n<h4>Making it work for email.<\/h4>\n<p>For the most part the CSS just works in Webkit email clients, though I did make some changes:<\/p>\n<ul>\n<li>Added a container div with position relative and overflow hidden to bound the animation.<BR><BR><\/li>\n<li>Moved the initial position of the space ships outside of the view so it doesn&#8217;t crowd a small screen<BR><BR><\/li>\n<li>Added a fallback for non-Webkit clients.<BR><br \/>\n<a href=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/force-weak-email.jpg\"><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/force-weak-email.jpg\" alt=\"force-weak-email\" width=\"450\" class=\"aligncenter size-full wp-image-2511\" srcset=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/force-weak-email.jpg 579w, https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/force-weak-email-300x202.jpg 300w\" sizes=\"(max-width: 579px) 100vw, 579px\" \/><\/a>\n<\/li>\n<\/ul>\n<p><BR><BR><\/p>\n<h4>Experiment<\/h4>\n<p>There are so many cool &#8220;pure CSS&#8221; examples on the net, particularly on CodePen, its fun to test to see if they will &#8220;RIE&#8221; &#8211; Render in Email. <a href=\"http:\/\/codepen.io\/\" target=\"_blank\">CodePen<\/a> and <a href=\"https:\/\/putsmail.com\/\" target=\"_blank\">Putsmail<\/a> is your friend here.<\/p>\n<p>If you come across any interesting ones that works in email, let me know!<\/p>\n<p><BR><BR><BR><br \/>\n<div style=\"padding:10px; border: 2px solid #99C731;background-color:#FFF8DC;border-radius:5px;\">\n<form action=\"https:\/\/freshinbox1.createsend.com\/t\/i\/s\/adrmi\/\" method=\"post\" id=\"subForm\">\n<span class=\"fisub_header\" style=\"font-weight:bold;\">Subscribe to the #EmailGeeks Newsletter<\/span>\n<p><input id=\"fieldEmail\" name=\"cm-adrmi-adrmi\" type=\"email\" style=\"width:90%\" required placeholder=\"Your Email Address\" \/><\/p>\n<p><button type=\"submit\">Subscribe<\/button><\/p>\n<\/form>\n<\/div><\/p>\n<style>\n#email-me-email {\n  width:150px;\n  height:20px;\n  margin-bottom: 5px;\n  background-color: #FAFCEF;\n  font-size: 14px;\n  padding: 3px 5px;\n  display:inline-block;\n  border-radius:3px;\n  margin-left:20px;\n}\n#email-me-btn {\n  cursor: pointer;\n  font-size: 14px;\n  color: white;\n  text-decoration:none;\n  text-shadow:#555555 0 1px;\n  background-color: #7DC442;\n  padding: 5px 12px;\n  border:1px solid #559621;\n  border-radius: 5px;\n  display:inline-block;\n}\n#email-me-btn:hover {\n  background-color: #78D62C;\n}\n#email-me{\n  width: 400px;\n  padding:20px 0px;\n  xborder:3px solid #888888;\n  xborder-radius: 5px;\n  margin:0px auto;\n}\n<\/style>\n<p><script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js\"><\/script><br \/>\n<script>\n  var theEmail = null;\n  $(document).ready(function(){\n    $('#email-me-btn').click(function(){\n      theEmail = $('#email-me-email').val();\n      sendEmail(theEmail);\n    });\n    $(\"#email-me-email\").keypress(function(e) {\n      if(e.which == 13) {\n        theEmail = $('#email-me-email').val();        \n        sendEmail(theEmail);\n      }\n    });\n  });\n  var sendEmail = function(emailAddr){\n    if(!emailAddr || emailAddr.length < 12){\n      alert('Please enter an email');\n      return;\n    }\n    $('#email-me-email').val('sending...');\n    $.ajax({\n      url: \"https:\/\/freshinbox.com\/examples\/css-star-wars\/mail_example.php\",\n      data: {\n        email: emailAddr\n      },\n      success: function( data ) {\n        if(data == null || data.indexOf(\"ERROR\") != -1){\n          alert(\"There was a problem sending the email \\n\"+data);\n        }else{\n          alert(\"An email has been sent to \"+emailAddr+\"!\\n (Be sure to check the spam folder just in case)\");          \n        }\n        $('#email-me-email').val('');\n      }\n    });\n  }\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was mulling around CodePen and found this <a href=\"http:\/\/codepen.io\/r4ms3s\/pen\/gajVBG\" target=\"_blank\">super cool CSS animation<\/a> featuring the Star Wars AT-AT walker of The Empire Strikes Back fame written by <a href=\"http:\/\/codepen.io\/r4ms3s\/\" target=\"_blank\">r4ms3s<\/a>. I thought to myself, hmm I wonder if it will work in email?<\/p>\n","protected":false},"author":2,"featured_media":2545,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[24,47],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/2512"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=2512"}],"version-history":[{"count":35,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/2512\/revisions"}],"predecessor-version":[{"id":3277,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/2512\/revisions\/3277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/2545"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=2512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=2512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=2512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}