Date: July 5th, 2010 by Tom Reitz
Top section is Best Viewed in HTML5 / CSS3
& (Apple Mail 3.6 running Mac OS X Leopard):
Looking at this closer, it seems WordPress is trying to take over my css a bit… I am sure I forgot to define something in the css… here is the original experiment.
A PNG screenshot of how it looks in HTML5 / CSS3
Without HTML5 / CSS3 coding:
(Gmail, Hotmail & Yahoo Interfaces)
Style CODE:
<div style="
-webkit-border-radius: 60px/30px;
-moz-border-radius: 60px/30px;
-khtml-border-radius: 60px/30px;
border-radius: 40px/25px;
border: solid 1px silver;
padding:10px;
width:220px;
text-align:center;
-webkit-box-shadow: silver 1px 1px 15px;
-moz-box-shadow: silver 1px 1px 15px;
-khtml-box-shadow: silver 1px 1px 15px;
box-shadow: silver 1px 1px 15px;
background: -webkit-gradient(linear, left top, right top, from(white), to(white), color-stop(.01, #00003f), color-stop(.10, silver), color-stop(.5, white), color-stop(.91, silver), color-stop(.99, #00004f));
background: -moz-gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver));
background: -khtml-gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver));
background: gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver));
padding-top:6px;
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));
">
<span style="
-webkit-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;
-moz-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;
-khtml-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;
text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;
">
ENTIRE CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<center>
<h1>HTML5 / CSS3 Experiment for a Mail Signature in Apple Mail</h1>
<h3>Top section is Best Viewed in HTML5 / CSS3<br />& (Apple Mail 3.6 running Mac OS X Leopard):</h3>
<div style="-webkit-border-radius: 60px/30px; -moz-border-radius: 60px/30px; -khtml-border-radius: 60px/30px; border-radius: 40px/25px; border: solid 1px silver; padding:10px; width:220px; text-align:center; -webkit-box-shadow: silver 1px 1px 15px; -moz-box-shadow: silver 1px 1px 15px; -khtml-box-shadow: silver 1px 1px 15px; box-shadow: silver 1px 1px 15px; background: -webkit-gradient(linear, left top, right top, from(white), to(white), color-stop(.01, #00003f), color-stop(.10, silver), color-stop(.5, white), color-stop(.91, silver), color-stop(.99, #00004f)); background: -moz-gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver)); background: -khtml-gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver)); background: gradient(linear, left top, left bottom, from(white), to(white), color-stop(0.4, silver), color-stop(0.4, silver)); padding-top:6px; -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.7)));">
<a href="http://seo9oneone.com" target="_blank" style="text-decoration: none;" title="...specializing in online strategies, web development, e-commerce and search engine marketing..."><span style="font-size:26px; -webkit-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -moz-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -khtml-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;">
<span style="color: #d60636; ">SEO</span><span style="color: #384e80;">9</span><span style="color: #d60636;">one</span><span style="color: #384e80;">one</span><span style="color: #d60636;">.com</span></span></a><br />
<span style="-webkit-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -moz-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -khtml-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px;">Tom Reitz</span><br />
<a href="http://seo9oneone.com/googlevoice" target="_blank" title="Click and I'll call you via Google Voice!" style="text-decoration: none;"><span style="-webkit-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -moz-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; -khtml-text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; text-shadow: rgba(64, 64, 64, 0.8) 1px 1px 1px; color: #384e80;">407-588-<span style="color: #d60636;">SEO</span>9</span> </a>
<a href="http://www.facebook.com/pages/Windermere-FL/SEO9oneone/83836645036?ref=ts" target="_blank" title="SEO9oneone on Facebook!"><img src="http://seo9oneone.com/facebookicon.png" border=0></a> <a href="http://www.linkedin.com/in/thomasereitz" target="_blank" title="SEO9oneone on LinkedIn!"><img src="http://seo9oneone.com/linkedin-logo.png" border=0></a> <a href="http://www.youtube.com/user/seo9oneone" target="_blank" title="SEO9oneone on YouTube!"><img src="http://seo9oneone.com/youtube-button.png" border=0></a> <a href="http://www.twitter.com/seo9oneone" target="_blank" title="SEO9oneone on Twitter!"><img src="http://seo9oneone.com/twitter-button.png" border=0></a>
</div>
<br /><br /><br /><br /><br /><br /><hr />
<br />
<h3>Without HTML5 / CSS3 coding:<br />(Gmail, Hotmail & Yahoo Interfaces)</h3>
<div style="border: solid 1px silver; padding:10px; width:220px; text-align:center;">
<a href="http://seo9oneone.com" target="_blank" style="text-decoration: none;" title="...specializing in online strategies, web development, e-commerce and search engine marketing..."><span style="font-size:26px;">
<span style="color: #d60636; ">SEO</span><span style="color: #384e80;">9</span><span style="color: #d60636;">one</span><span style="color: #384e80;">one</span><span style="color: #d60636;">.com</span></span></a><br />
<span>Tom Reitz</span><br />
<a href="http://seo9oneone.com/googlevoice" target="_blank" title="Click and I'll call you via Google Voice!" style="text-decoration: none;"><span style="color: #384e80;">407-588-<span style="color: #d60636;">SEO</span>9</span> </a>
<a href="http://www.facebook.com/pages/Windermere-FL/SEO9oneone/83836645036?ref=ts" target="_blank" title="SEO9oneone on Facebook!"><img src="http://seo9oneone.com/facebookicon.png" border=0></a> <a href="http://www.linkedin.com/in/thomasereitz" target="_blank" title="SEO9oneone on LinkedIn!"><img src="http://seo9oneone.com/linkedin-logo.png" border=0></a> <a href="http://www.youtube.com/user/seo9oneone" target="_blank" title="SEO9oneone on YouTube!"><img src="http://seo9oneone.com/youtube-button.png" border=0></a> <a href="http://www.twitter.com/seo9oneone" target="_blank" title="SEO9oneone on Twitter!"><img src="http://seo9oneone.com/twitter-button.png" border=0></a>
</div>
</center>
</body>
</html>