Make 3D text in HTML using CSS
HTML Code
<html>
<head>
<title>Make 3d text</title>
<link href="3d Text.css" rel="stylesheet"/>
</head>
<body>
<center>
<div class="container"></br>
<div class="insetClass">
<p>
3D TEXT
</p>
</div>
</div>
</center></body>
</html>
CSS Code
body
{
margin-top:100px;
background:#C4C4C4;
}
.container
{
width:450px; height:138px; background:#999; box-shadow: 0 1px 3px 2px rgba(0, 0, 0, .5);
}
.insetClass
{
width:400px; background:#666; height:100px;box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5), 0 1px 0 0px rgba(250, 250, 250, .5);
}
p
{
font-size:80px; color:white; margin-top:0px; padding-top:2px;
font-weight:bold; color: #FFFFFF;text-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9,0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
No comments:
Post a Comment