Tiger Bird Webdesign: Name Tag With Border Style

Wednesday, 3 December 2014

Name Tag With Border Style

Fat Ladies

Here is another text design looking like a name tag of your clothes. The stitched are created with border-style: dashed. For the top use border-top-style and for the bottom use border-bottom-style. Change the text inside the label and make your own one!



<!Doctype html>
<html>

<head>

<style>
#label
{
width:300px;
height:100px;
top:30px;
left:100px;
background-color:white;
box-shadow:
1px 1px 5px gray,
-1px -1px 5px gray;
position:absolute;
}


#top_stitch_background
{
top:10px;
background-color:#A9A9A9;/*dark gray*/
box-shadow:
1px 1px 1px #DCDCDC; /*Gainsboro*/
-1px -1px 1px #DCDCDC; /*Gainsboro*/
position:relative;
}

#top_stitch
{top:10px;
border-top-style:dashed;
border-top-color:#708090; /*SlateGray*/
border-top-width:1px;
}


#brand_text
{font-size:200%;
top:30px;
text-align:center;
position:relative;
}

#bottom_stitch_background
{
top:50px;
background-color:#A9A9A9;/*dark gray*/
box-shadow:
1px 1px 1px #DCDCDC; /*Gainsboro*/
-1px -1px 1px #DCDCDC; /*Gainsboro*/
position:relative;
}


#bottom_stitch
{top:50px;
border-bottom-style:dashed;
border-bottom-color:#708090; /*SlateGray*/
border-bottom-width:1px;
}
</style>

</head>

<body>

<div id="label"> 

<div id="top_stitch_background">
<div id="top_stitch"></div>
</div>

<div id="brand_text"> Fat Ladies </div>

<div id="bottom_stitch_background">
<div id="bottom_stitch"></div>
</div>

</div >

Tiger Bird Webdesign

Wednesday, 3 December 2014

Name Tag With Border Style

No comments:

Post a Comment