View Full Version : Need help with creating a HTML/CSS email signature

05-11-2009, 02:50 AM
Hey Folks.

Check this out. Here's what my current email signature looks like - just a simple image.


And here's what I wanna do.


I got the inspiration from here: http://ewebbed.com/#who/

Can anyone help me out plz!
That would be a really dope email signature and everyone else can use the template for their Apple Mail, Postbox and other email clients that allow CSS.

Let me know plz.

05-11-2009, 05:23 PM
Ok guys... I just got the CSS & HTML code just please help me put it together.


.shadow1{padding: 15px; margin: 0 10px 20px -14px;background: url(../images/containers/news.png) no-repeat left top;}
.article-left{clear: both;}
***.article-left .shadow1{float: left;display:inline; margin-right: 15px;}
***.article-left h2{float: left;height: 18px; width: 610px; padding: 40px 0 10px 0;}

ul.who-connect{float: left;display:inline; position:relative;width: 304px; height: 37px;background: url(../images/containers/connect.png) no-repeat left top;}
***ul.who-connect li{text-indent: -1000em;}
***ul.who-connect li a{position: absolute; top: 9px;display: block; width: 49px; }
***ul.who-connect li.connect-email a{height: 13px;left: 100px; background: url(../images/icons/connect-email.png) no-repeat left top;}
***ul.who-connect li.connect-email a:hover{background-position: left bottom;}
***ul.who-connect li.connect-twitter a{top: 8px;height: 16px;left: 165px; width: 52px;background: url(../images/icons/connect-twitter.png) no-repeat left top;}
***ul.who-connect li.connect-twitter a:hover{background-position: left bottom;}
***ul.who-connect li.connect-linked a{top: 8px;height: 16px;left: 230px; width: 55px;background: url(../images/icons/connect-linked.png) no-repeat left top;}
***ul.who-connect li.connect-linked a:hover{background-position: left bottom;}


<div class="article-left">
<span class="shadow1">
<img alt="spread awareness" src="http://ewebbed.com/resources/images/articles/spread-awareness.jpg" />
<h2 class="cufon">name</h2>
<p>James has a background in ecommerce, application programming, UX & front end design/development. When he’s not coding/designing/sleeping he’s a ‘gnarly’ skier who likes to play the guitar…poorly.</p>
<ul class="who-connect">
<li class="connect-email"><a title="email" href="/contact/&person=james-cooke">email</a></li>
<li class="connect-twitter"><a title="twitter" href="#">twitter</a></li>
<li class="connect-linked"><a title="linkedin" href="#">linkedin</a></li>