Smart Pixel2

by pharma_nsk

HTML

<body>
<div>
<span class="word">smart pi</span><span class="topLeft"></span><span class="topRight"></span><span class="middle"></span><span class="left"></span><span class="right"></span><span class="word end">el</span>
</div>

</body>

CSS

body {background-image:url("http://erinsowards.com/articles/2012/07/graphics/bkg_patterns_35.gif");}
div {width:650px; margin:50px auto; text-align:center;}
.word {text-transform: uppercase; font-size:50px; letter-spacing:15px;}
.topLeft, .topRight, .middle, .left, .right {display:inline-block; width:15px; height:15px; background-color:black;border: 1px solid black; position:relative;} 
.topLeft {left:0px;top:-25px;}
.topRight {left:0px;top:-10px;}
.middle {left:0px;top:-25px;}
.left {left:-50px;top:5px;}
.right {left:-35px;top:5px;}
.end { position:relative; left: -20px;}