Tiger Bird Webdesign: Sweeten Your Text With CSS: Chocolate

Wednesday, 26 November 2014

Sweeten Your Text With CSS: Chocolate

Chocolate

I love chocolate! So why not making a chocolate like logo? In the example above, I have used 3 different colors: sienna (#D2691E), maroon (#800000) for the highlights and the shadows and chocolate (#D2691E) for the whole bar. It should look like a chocolate bar so I have used border-style:outset in the CSS code. The highlight and shadows of the letters are made with the text-shadow property. After working on this design for 30min I have a graving for chocolate!

CSS & HTML Code



<!Doctypte html>
<html>
<head>
<style>
.Chocolate
{
top:50px;
left:30px;
position:absolute;
width:450px;
height:150px;
border-style:outset;
border-width:10px;
border-radius:7px;
border-color:#D2691E;
background-color:#D2691E;/* chocolate*/
}


#Chocolate
{
font-size:300%;
color:#D2691E;/*Sienna*/
text-shadow: 
0px 1px 0px #800000, /*Maroon*/
1px 1px 0px #800000, 
2px 1px 0px #800000, 
3px 1px 0px #800000, 
1px -2px 1px white,
-1px -2px 1px white,
-2px -1px 0px #800000,
1px 2px 0px #800000, 
2px 2px 0px #800000,
3px 2px 0px #800000,
1px 3px 0px #800000,
2px 3px 0px #800000,
3px 3px 0px #800000,  
1px 4px 0px #800000,
2px 4px 0px #800000,
3px 4px 0px #800000,
1px 5px 0px #800000,
2px 5px 5px #800000,
-1px 0px 0px #800000,
-2px 0px 0px #800000,
-2px -2px 0px #800000,
-2px  1px 0px #800000,
-2px 2px 0px #800000,
-2px 3px 0px #800000,
-3px 5px 5px #800000,
1px -1px 5px black,
1px -2px 0px black,
1px -3px 2px black,
2px 0px 0px black,
3px 0px 0px black,
1px 1px 0px black,
-3px 3px 1px black;
}
</style>
</head>

<body>
<div class="Chocolate">
<h1>
<span id="Chocolate">Chocolate</span></h1>
</div>
</body>

</html>

Tiger Bird Webdesign

Wednesday, 26 November 2014

Sweeten Your Text With CSS: Chocolate

CSS & HTML Code

No comments:

Post a Comment