Tiger Bird Webdesign: Sweeten Your Text With CSS: Mille-Feuille

Tuesday, 18 November 2014

Sweeten Your Text With CSS: Mille-Feuille

Mille-Feuille Style Text With CSS

Mille-Feuille

This text design has been inspired by the pastry mille-feuille. I've used 4 different colours in the CSS text-shadow property to express the different layers of the cake. If you create several layers in text-shadow separate them with "," and just the last line with ";" to make it work.

HTML&CSS


<!Doctype HTML>
<html>
<head>
<title>Mille-Feulle Text</title>
<style>

#Mille_Feuille
{
top:50px;
left:50px;
position:absolute;
color:#D2691E;
font-size:500%;
text-shadow: 
0px 1px 0px #D2691E, 
0px 2px 0px #D2691E,
0px 3px 0px #D2691E,
0px 4px 1px #FFE4C4,
0px 5px 1px #FFE4C4, 
0px 6px 4px #FF0000, 
0px 7px 1px #FFE4C4, 
0px 8px 0px #FFE4C4, 
0px 9px 0px #FFE4C4, 
0px 10px 1px #D2691E, 
0px 11px 0px #D2691E,
0px 12px 1px #D2691E,
0px 13px 0px #FFE4C4,
0px 14px 0px #FFE4C4,
0px 15px 0px #FFE4C4,
0px 16px 4px #FF0000, 
0px 17px 0px #FFE4C4,
0px 18px 0px #FFE4C4,
0px 19px 0px #FFE4C4,
0px 20px 0px #FFE4C4,
0px 21px 1px #D2691E,                
0px 22px 0px #D2691E, 
0px 23px 1px #D2691E, 
0px 24px 0px #FFE4C4,
0px 25px 0px #FFE4C4,
0px 26px 0px #FFE4C4,               
0px 27px 4px #FF0000, 
0px 28px 0px #FFE4C4,
0px 29px 0px #FFE4C4,
0px 30px 0px #FFE4C4,
0px 31px 0px #FFE4C4,
0px 32px 1px #D2691E, 
0px 33px 0px #D2691E, 
0px 34px 1px #D2691E,
0px 35px 0px #FFE4C4,
0px 36px 0px #FFE4C4,
0px 37px 0px #FFE4C4,
0px 38px 4px #FF0000,
0px 39px 0px #FFE4C4,
0px 40px 0px #FFE4C4,
0px 41px 0px #FFE4C4,
0px 42px 0px #D2691E,
0px 43px 0px #D2691E,
0px 44px 0px #D2691E,
0px 45px 4px #FFE4C4,
0px 46px 0px #FFE4C4,
0px 47px 2px #FF0000,
0px 48px 1px #FFE4C4,
0px 49px 1px #D2691E,
0px 50px 0px #D2691E;
}

/*
#D2691E chocolate for the top
#FFE4C4 bisque for the cream
#FF0000 red for the strawberries
#DC143C for crimson*/


</style>
</head>

<body>

<div id="Mille_Feuille">
Mille-Feuille</div>
</body>

</html>

Tiger Bird Webdesign

Tuesday, 18 November 2014

Sweeten Your Text With CSS: Mille-Feuille

HTML&CSS

No comments:

Post a Comment