CSS summit 2015 - Interactive email

Developer
Mark Robbins
Size
6,423 Kb
Views
30,360
  1. CSS summit 2015 - Interactive email Previews
  2. CSS summit 2015 - Interactive email HTML Codes
  3. CSS summit 2015 - Interactive email JS Codes

How do I make an css summit 2015 - interactive email?

What is a css summit 2015 - interactive email? How do you make a css summit 2015 - interactive email? This script and codes were developed by Mark Robbins on 30 August 2022, Tuesday.

CSS summit 2015 - Interactive email Previews
IQ Test

CSS summit 2015 - Interactive email - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS summit 2015 - Interactive email</title>
</head>
<body> <!DOCTYPE html> <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head background="https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=separator&amp;separator=A" style="background-image:url(https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=separator&amp;separator=B)">
<!--[if source]>- , _
/|/_) o |\_|_ |) | \| | | |/ | |/\_| | |(_/ \/|_/|/|_/|_/ \/ \/|/... (| RebelmailReb RebelmailRebelmailR RebelmailRebelmailRebel Rebelma Rebelma Rebelm Rebelm Rebel RebelmailRebe Rebel Rebel RebelmailRebelm Rebel Rebe RebelmailRebelma Rebe Rebel Rebel Rebe Rebe Rebe Rebe Rebe Rebe Rebe RebelmailRebelmai Rebel Rebe RebelmailRebelma Rebel Rebe Rebe Rebe Rebel Rebe Rebe Rebe Rebe Rebel Rebe Rebel Rebel Rebel Rebel Rebel Rebelm Rebel RebelmailRe Rebel Rebelmail Rebelm Rebelmail Rebelmail RebelmailRebelmailRebe RebelmailRebelma __ __ _ __ ________ / /_ ___ / /___ ___ ____ _(_) / / ___/ _ \/ __ \/ _ \/ / __ `__ \/ __ `/ / / / / / __/ /_/ / __/ / / / / / / /_/ / / /
/_/ \___/_.___/\___/_/_/ /_/ /_/\__,_/_/_/
-<![endif]--> <meta name="author" content="Rebelmail.com"> <!--[if source]>- This interactive email was built by Rebelmail.com
-<![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <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"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]--> <title> CSS Summit 2015 </title> <style>
#mb-email-wrapper,body{margin:0!important;padding:0!important;-webkit-transform:scale(1)!important;background:}*{text-size-adjust:none!important;-ms-text-size-adjust:none!important;-webkit-text-size-adjust:none!important;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.ExternalClass *{line-height:100%}p{margin:0;padding:0}table{table-layout:fixed;margin:0 auto}table table table{table-layout:auto;border-collapse:collapse}table,td{mso-table-lspace:0;mso-table-rspace:0}img{-ms-interpolation-mode:bicubic;display:block}:focus{outline:0}a,a *,button,label,label+*+*{cursor:pointer!important}del{color:inherit}
</style><style>.ExternalClass input[type=checkbox]+label,.ExternalClass input[type=radio]+label{background:0 0;padding:0;height:auto}@media screen and (max-width:600px){.outer{width:100%}.img-100{width:100%;height:auto}.hide-mobile{display:none!important}}</style><style>
:root,body,html{background:#333;margin:0;padding:0}body{padding-top:5vw!important}img{background:rgba(0,0,0,.1)}#xz,#xz~[type=radio]{position:absolute;top:-5vw;display:none}#xz:checked,#xz:checked~[type=radio]{position:relative;display:inline-block}#xz:checked~* label:hover{background:rgba(0,0,0,.2)}#xz~.zzo{display:none}#xz:checked~.zzo{display:block}.nad{width:98vw;height:55vw;overflow:hidden;margin:0 auto 5vw auto}.bjm{width:98vw;max-height:0;overflow:hidden;height:55vw;float:left;background:#f99839;-webkit-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);-webkit-transition:all 1s;transition:all 1s;box-shadow:0vw 1vw 5vw rgba(0,0,0,.8);border-radius:1vw;position:relative}.mwg{background:#333}#wk:checked~* .jqa{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#en:checked~* .aye{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#km:checked~* .wlk{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#dj:checked~* .kxm{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#yw:checked~* .doj{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#qr:checked~* .zqo{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#lb:checked~* .jra{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#zo:checked~* .oke{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#nd:checked~* .ade{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#bm:checked~* .xnz{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#ja:checked~* .kmm{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#rj:checked~* .oxe{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#oe:checked~* .gjd{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#gd:checked~* .mwg{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}.rkj,.ode{display:block;width:25%;height:55vw;position:absolute}.rkj{left:0}.ode{right:0}*{font-family:open sans,helvetica neue,arial;text-align:center;color:#fff;font-weight:100;line-height:1.25}strong{font-weight:400}h1,h2,p{margin:0}h1{font-size:5vw;margin-top:.75em}h2{font-size:3.5vw}p{font-size:2.5vw}ul{margin:5vw 0 0 5vw;width:40vw;float:left}li{text-align:left;font-size:3.5vw}li.roj{list-style:none;font-weight:400;margin:0 0 .25em -3vw}blockquote{font-size:6vw;width:90%;display:inline-block}blockquote::before{content:open-quote}blockquote::after{content:close-quote}cite{font-size:2.5vw;text-align:right;width:90%;display:inline-block;position:relative}code:after{content:attr(lang);color:#888;background:#444;display:block;font-size:.5em;text-align:right}code{background:#272822;border:.25em solid #444;display:inline-block;margin:1em;vertical-align:top}code,code *{font-family:Consolas,Monaco,"Courier New",Courier,monospace!important}code span{color:#a6e22e}code ol{margin:0;padding:0;padding-right:.25em;list-style:none}code li{font-size:2vw;counter-increment:line 1;overflow:hidden;padding-left:2em}code li:before{content:counter(line);display:block;height:1em;width:1.2em;text-align:center;margin-left:-2em;padding:0 .25em;background:#444;color:#888;float:left;clear:both;box-shadow:-1em 1em 0 1em #444}.gad{width:25vw;height:25vw;display:block;margin:1vw auto;border-radius:50%;border:.5vw solid #fff}.meg{position:absolute;bottom:1.5vw;right:1.5vw;width:20vw}.xoz{width:40vw;height:auto;float:right;margin:2vw 5vw 0 0}.enn{width:28vw;height:auto;float:right;margin:0 5vw 0 0}.code1,.code2,.myg,.grd{width:45vw;margin:2vw;float:left}.code1{width:45.5vw}.code2{width:31.1vw}.code3{width:98%;margin:0 auto}.wzk{width:30vw;float:left;font-size:3vw}.wzk:first-of-type{margin-left:5vw}.wzk h2{font-weight:400}.wzk .egn{font-weight:400;font-size:5vw;margin:.5em 0}[for=xz]{font-size:8vw}.qar,.yyw,.dgj{width:27vw;height:27vw;background-size:cover;margin:0 auto}.dgj{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg);position:relative}.dgj:hover{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}[for=mg]{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}[for=ae]{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}[for=xdz]{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}[for=wkk]{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}#mg:checked~* .yyw{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}#ae:checked~* .yyw{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}#xdz:checked~* .yyw{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}#wkk:checked~* .yyw{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}#mg:checked~* [for=mg],#ae:checked~* [for=ae],#xdz:checked~* [for=xdz],#wkk:checked~* [for=wkk]{outline:.25vw solid #8b0000}.qar{-webkit-transition:background-image 1s;transition:background-image 1s;position:relative}#eln:checked~* .qar{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}#kkm:checked~* .qar{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}#dbj:checked~* .qar{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}#ymw:checked~* .qar{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}[name=interactive]~* .zyo{display:block}[name=interactive]:checked~* .zyo{display:none}#eln:checked~* .zyo{display:block}#kkm:checked~* .bgm{display:block}#dbj:checked~* .jma{display:block}#ymw:checked~* .rbj{display:block}.qar{-webkit-animation:image-fade 30s infinite;animation:image-fade 30s infinite}[name=interactive]:checked~* .qar{-webkit-animation:none;animation:none}.lxb,.ned{display:none;width:3.5vw;height:50%;padding-top:50%;position:relative;font-size:2vw}.lxb{float:left}.ned{float:right}.lxb::after,.ned::after{content:'';border:.15em solid #333;height:1em;width:1em;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);display:block;margin-top:-.5em;position:absolute}.ned::after{border-bottom-color:transparent;border-left-color:transparent;box-shadow:3px -3px 4px rgba(255,255,255,.3),inset -3px 3px 4px rgba(255,255,255,.3)}.test{color:inherit}.lxb::after{margin-left:1vw;border-top-color:transparent;border-right-color:transparent;box-shadow:-3px 3px 5px rgba(255,255,255,.3),inset 3px -3px 5px rgba(255,255,255,.3)}.gallery-nav0{display:block}@-webkit-keyframes image-fade{0%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}23%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}25%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}47%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}50%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}73%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}75%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}98%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}}@keyframes image-fade{0%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}23%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}25%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}47%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}50%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}73%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}75%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}98%{background-image:url(http://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}}
</style></head><body bgcolor="" style="background:"> <input type="checkbox" id="xz"> <div class="zzo"></div> <input type="radio" name="page" id="wk" checked> <input type="radio" name="page" id="en"> <input type="radio" name="page" id="km"> <input type="radio" name="page" id="dj"> <input type="radio" name="page" id="yw"> <input type="radio" name="page" id="qr"> <input type="radio" name="page" id="lb"> <input type="radio" name="page" id="zo"> <input type="radio" name="page" id="nd"> <input type="radio" name="page" id="bm"> <input type="radio" name="page" id="ja"> <input type="radio" name="page" id="rj"> <input type="radio" name="page" id="oe"> <input type="radio" name="page" id="gd"> <div class="zzo"></div> <input type="radio" name="limited" id="mg" checked> <input type="radio" name="limited" id="ae"> <input type="radio" name="limited" id="xdz"> <input type="radio" name="limited" id="wkk"> <div class="zzo"></div> <input type="radio" name="interactive" id="eln"> <input type="radio" name="interactive" id="kkm"> <input type="radio" name="interactive" id="dbj"> <input type="radio" name="interactive" id="ymw"> <div class="nad"> <div class="bjm jqa"> <label for="gd" class="rkj"></label> <label for="en" class="ode"></label> <h1>Interactive CSS in Email</h1> <h2>Punched Card Coding</h2> <img src="https://s3.amazonaws.com/presentations-fronttrends/mark.jpg" class="gad"> <h2 style="font-weight:400">Mark Robbins</h2> <p> Email Developer / CSS Hacker </p> <p> @M_J_Robbins &#xA0; &#xA0; &#xA0; @GoRebelmail </p> <img src="https://s3.amazonaws.com/presentations-fronttrends/rebelmail.png" class="meg"> </div> <div class="bjm aye"> <label for="wk" class="rkj"></label> <label for="km" class="ode"></label> <h1>Who loves HTML email?</h1> <ul> <li>It&apos;s outdated</li> <li>It&apos;s restrictive </li> <li>It&apos;s complicated</li> <li>It&apos;s time consuming</li> <li>It&apos;s spammy</li> </ul> <img src="https://s3.amazonaws.com/presentations-fronttrends/spam1.jpg" class="xoz"> </div> <div class="bjm wlk"> <label for="en" class="rkj">
</label> <label for="dj" class="ode"></label> <h1>There is more to it than that</h1> <ul> <li>Webfonts</li> <li>SVG</li> <li>CSS shapes</li> <li>Animation</li> <li>Device targeting</li> <li>Interaction</li> </ul> <img src="https://s3.amazonaws.com/presentations-fronttrends/spam2.jpg" class="enn"> </div> <div class="bjm kxm"> <label for="km" class="rkj"></label> <label for="yw" class="ode"></label> <h1>What is interactive email</h1> <blockquote> An action taken in an email that triggers an event in the same email. </blockquote> <cite>Mark Robbins - CSS Summit 2015</cite> </div> <div class="bjm doj"> <label for="dj" class="rkj"></label> <label for="qr" class="ode"></label> <h1>How to trigger these interactions</h1> <h2>:hover :focus :active</h2> <style>
.lwb,.qor,.ydw{width:30%;display:block;margin:1em auto;border:.25em solid rgba(0,0,0,.2);background:0 0;height:1em;padding:2em 0;font-size:2vw}.lwb:active,.qor:focus,.ydw:hover{background:red}</style><div class="ydw" tabindex="0">Hover</div> <div class="qor" tabindex="0">Focus</div> <div class="lwb" tabindex="0">Active</div> </div> <div class="bjm zqo"> <label for="yw" class="rkj"></label> <label for="lb" class="ode"></label> <h1>How interactions work</h1> <h2>:checked</h2> <code lang="css"> <ol> <li><span>#item1</span>:<span>checked</span> ~ <span>.div1</span>,</li> <li><span>#item2</span>:<span>checked</span> ~ <span>.div2</span>{</li> <li> &#xA0; <span>background</span>:<span>red</span>;</li> <li>}</li> </ol> </code> <code lang="html"> <ol> <li>&lt;<span>input type=</span>&quot;<span>radio</span>&quot; <span>id=</span>&quot;<span>item1</span>&quot;&gt;</li> <li>&lt;<span>input type=</span>&quot;<span>radio</span>&quot; <span>id=</span>&quot;<span>item2</span>&quot;&gt;</li> <li>&lt;<span>div class=</span>&quot;<span>div1
</span>&quot;&gt;&lt;/<span>div</span>&gt;</li> <li>&lt;<span>div class=</span>&quot;<span>div2</span>&quot;&gt;&lt;/<span>div</span>&gt;</li> <li>&lt;<span>label for=</span>&quot;<span>item1</span>&quot;&gt;</li> <li>&lt;<span>label for=</span>&quot;<span>item2</span>&quot;&gt;</li> </ol> </code> <style>.nqd,.bqm{width:25vw;height:5vw;display:inline-block;background:rgba(0,0,0,.2)}#qyr:checked~.nqd,#ldb:checked~.bqm{background:red}</style><div style="font-size:3vw"> <input type="radio" id="qyr" name="example"> #item1 &#xA0;&#xA0; <input type="radio" id="ldb" name="example"> #item2<br> <div class="nqd">div1</div> <div class="bqm">div2</div><br> <label for="qyr">label for 1</label> &#xA0;&#xA0; <label for="ldb">label for 2</label> </div> </div> <div class="bjm jra"> <label for="qr" class="rkj"></label> <label for="zo" class="ode"></label> <h1>Example 1</h1> <ul> <li class="roj">Game Concept</li> <li>6 Radio buttons</li> <li>Score counter</li> <li>Progressively faster</li> <li>Prize at the end</li> </ul> </div> <div class="bjm oke"> <label for="lb" class="rkj"></label> <label for="nd" class="ode"></label> <h1>Scaling this up</h1> <h2>Punched Card Coding</h2> <img src="https://s3.amazonaws.com/presentations-fronttrends/radiocard.png" class="grd"> <img src="https://s3.amazonaws.com/presentations-fronttrends/punchedcard.jpg" class="myg"> <code lang="css"> <ol> <li><span>#itemA-3</span>:<span>checked</span> ~ <span>#itemB-6</span>:<span>checked</span> ~ <span>#itemC-2</span>:<span>checked</span> ~ <span>
#itemD-11</span>:<span>checked</span> ~ <span>#itemE-5</span>:<span>not</span>:(<span>checked</span>)~ <span>#itemF-2</span>:<span>checked</span> ~ <span>#itemG-5</span>:<span>checked</span> ~ <span>.div1</span>{</li> <li> &#xA0; <span>background</span>:<span>red</span>;</li> <li>}</li> </ol> </code> </div> <div class="bjm ade"> <label for="zo" class="rkj"></label> <label for="bm" class="ode"></label> <h1>Example 2</h1> <ul> <li class="roj">Shopping Cart Concept</li> <li>117 Radio buttons</li>
<li>4 Checkboxes</li> <li>Multi page layout</li> <li>Add/remove products</li> <li>Calculate prices</li> <li>Form validation</li> </ul> </div> <div class="bjm xnz"> <label for="nd" class="rkj"></label> <label for="ja" class="ode"></label> <h1>Support</h1> <div class="wzk"> <h2>Static</h2> <div class="egn">25%</div> Gmail app<br> Outlook desktop </div> <div class="wzk"> <h2>Limited</h2> <div class="egn">20%</div> Gmail (webmail)<br> Yahoo! </div> <div class="wzk"> <h2>Interactive</h2> <div class="egn">55%</div> iOS<br> Apple Mail<br> Android </div> <p style="position:absolute;bottom:2vw;width:100%">Based on <strong>1.02 BILLION</strong> open in June tracked by Litmus.com</p> </div> <div class="bjm kmm"> <label for="bm" class="rkj"></label> <label for="rj" class="ode"></label> <h1>Support</h1> <div class="wzk"> <h2>Static</h2> <div class="dgj"></div> </div> <div class="wzk"> <h2>Limited</h2> <div class="yyw"></div> <label for="mg"></label> <label for="ae"></label> <label for="xdz"></label> <label for="wkk"></label> </div> <div class="wzk"> <h2>Interactive</h2> <div class="qar"> <label for="ymw" class="lxb zyo"></label> <label for="kkm" class="ned zyo"></label> <label for="eln" class="lxb bgm"></label> <label for="dbj" class="ned bgm"></label> <label for="kkm" class="lxb jma"></label> <label for="ymw" class="ned jma"></label> <label for="dbj" class="lxb rbj"></label> <label for="eln" class="ned rbj"></label> </div> </div> </div> <div class="bjm oxe"> <label for="ja" class="rkj"></label> <label for="oe" class="ode"></label> <h1>Example 3</h1> <ul> <li class="roj">3D product view</li> <li>3D design</li> <li>3 axis rotation</li> <li>Zoom control</li> </ul> </div> <div class="bjm gjd"> <label for="rj" class="rkj"></label> <label for="gd" class="ode"></label> <h1>Example 4</h1> <br><br>
<br><br> <label for="xz">this</label> </div> <div class="bjm mwg"> <label for="oe" class="rkj"></label> <label for="wk" class="ode"></label> <h1>Thank you</h1> <img src="https://s3.amazonaws.com/presentations-fronttrends/mark.jpg" class="gad" style="opacity:.9"> <h2 style="font-weight:400">Mark Robbins</h2> <p> Email Developer / CSS Hacker </p> <p> @M_J_Robbins &#xA0; &#xA0; &#xA0; @GoRebelmail </p> <p> codepen.io/M_J_Robbins </p> </div> <div lang="x-track2" class="aoe" onload="null"></div> <img src="https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=forward&amp;forward=D" style="display:none!important;overflow:hidden;height:0;width:0" height="1" width="1"> <table class="xkz" lang="x-forward" border="0" cellspacing="0" cellpadding="0" style="overflow:hidden;background-image:url(https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=forward&amp;forward=A);height:0;width:0" background="https://staging-api.rebelmail.com/v0/emails/555cca3c0019921100d11589/track.gif?type=forward&amp;forward=A" height="1" width="1"></table> <div class="wek" lang="x-forward2"></div> </div></body> </html> <script src="js/index.js"></script>
</body>
</html>

CSS summit 2015 - Interactive email - Script Codes JS Codes

// Slides from my talk at CSS Summit 2015
// Example 1: http://codepen.io/M_J_Robbins/pen/jpCKH
// Example 2: - coming soon -
// Example 3: http://codepen.io/M_J_Robbins/pen/xGgbeV
CSS summit 2015 - Interactive email - Script Codes
CSS summit 2015 - Interactive email - Script Codes
Home Page Home
Developer Mark Robbins
Username M_J_Robbins
Uploaded August 30, 2022
Rating 3
Size 6,423 Kb
Views 30,360
Do you need developer help for CSS summit 2015 - Interactive email?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Robbins (M_J_Robbins) Script Codes
Name
From The Front 2016 slides
A Pen by Mark Robbins
Smashingconf SF 2017 slides
SVG email test v2.0
CSS Super Mario - No JS
ThWack-a-Vole
CSS triangles for email
Playing with border-radius and scroll bars
Animated images off pixel art
Xmas email test
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!