Text-shadow for inset and outset type text




Text-shadow for inset and outset type text

In this tutorial,we'll give inset and outset type text-treatment just using text-shadows.Through color and slight shading it creates the appearance that the text has been pushed inward into the background





Text-shadow exposed

Thanks to text shadows as we can now create cool typography which gives an embossed and pressed effect to text.







BASIC HTML



<html>
<head>
<style>
body {
background-color:#C8C8C8 ;

}
h1 {
font-size:70px;
margin-left:320;

margin-top:100px;
font-family:sans-serif;
color:#888888 ;
text-shadow:0 2px 1px #ffffff ;
}
h2 {
background-color:#0066CC;
font-size:70px;
margin-left:320;
font-family:sans-serif;
color:#ffffff ;
text-shadow:0 -2px 5px #100000 ;
margin-right:360px;
margin-top:100px;
}
</style>
</head>
<body>
<h1> text is embossed<h1>
<h2>text is embossed </h2>
</body>
</html>