ReShyp Responsive Typography

by Ken Watanabe

HTML

<div class="type-shift contain">
    <div class="type-shift left"></div>
    <div class="type-shift right"></div>
    <div class="type-shift filler"></div>
</div>

CSS

.type-shift.left {
    display: inline-block;
    float: left;
    width: 140px;
    height: 40px;
    background-image: url("http://i58.tinypic.com/30jik21.jpg");
}
.type-shift.filler {
    display: block;
    float: none;
    width: auto;
    height: 40px;
    background-image: url("http://i60.tinypic.com/148hncx.jpg");
    background-repeat: repeat-x;
}
.type-shift.right {
    display: inline-block;
    float: right;
    width: 140px;
    height: 40px;
    background-image: url("http://i61.tinypic.com/19p6d4.jpg");
}
.type-shift.contain {
    width: 100%;
	height: 40px;
    padding: 0;
	margin: 0;
    display: inline;
    overflow: hidden;
}