Tiger Bird Webdesign: Jeans Style Logo With CSS

Monday, 24 November 2014

Jeans Style Logo With CSS

Blue Jeans

Made in Schlaraffenland

The border-style allows you to choose different border styles. In the designs above I have used the border-style:dashed to create a label which looks like a stitched one. For details, have a look at the code.

HTML & CSS Code

<!Doctype html>
<html>

<head>
<title>Jeans Style Logo With CSS</title>

<style>

#jeans_logo
{
top:20px;
left:100px;
width:200px;
height:250px;
background-color:#CD853F;/*Peru*/
outline: #191970 /*midnight blue*/ solid 20px;
position:absolute;
}


.jeans
{color:#8B4513;/*sadle brown*/
}

#top_border_back
{
top:20px;
background-color:#8B4513;
position:relative;
}

#top_border
{
top:20px;
border-top-style:dashed;
border-top-color:#D2B48C; /*Tan*/
border-top-width:2px;
}

#bottom_border_back
{
top:220px;
background-color:#8B4513;
position:relative;
}

#bottom_border
{
top:220px;
border-bottom-style:dashed;
border-bottom-color:#D2B48C; /*Tan*/
border-bottom-width:2px;
}

#blue_jeans
{
top:60px;
font-weight:bold;
text-align:center;
position:relative;
font-size:200%;
}

#made_in
{
top:80px;
font-weight:bold;
text-align:center;
position:relative;
font-size:100%;
}



</style>
</head>

<body>


<div class="jeans" id="jeans_logo">

<div class="jeans" id="top_border_back">

<div class="jeans" id="top_border">
</div>
</div>
<div class="jeans" id="bottom_border_back">
<div class="jeans" id="bottom_border">
</div>
</div>
<div class="jeans" id="blue_jeans">
Blue Jeans</div>
<div class="jeans" id="made_in">
Made in Schlaraffenland</div>
</div>

</body>

</html>

Tiger Bird Webdesign

Monday, 24 November 2014

Jeans Style Logo With CSS

HTML & CSS Code

No comments:

Post a Comment