LETTERPRESS - AWESOME
In recent years LETTERPRESS text effect has been more popular and trend in web designing. Mostly it's being used in headers of the pages.To achieve letterpress text effect in you need to use text-shadow:( x-offset, y-offset, blur-radius, color); on your CSS style declarations.
NOTE: text-shadow does not work in Internet Explorer 9 or earlier, it should be supported in IE10.
BASIC SYNTAX
Text shadow has 4 values:
x-offset, y-offset, blur and color, with x-offset and y-offset required values, blur and color optional.
text-shadow: [x-offset] [y-offset] [blur] [color];
x-offset, y-offset and blur can be defined in px or ems.
Color can be defined in hex or rgba.
POSITIONING
Positive x-offset = to the right of the text
Negative x-offset = to the left of the text
Positive y-offset = below the text
Negative y-offset = above the text
USAGE
text-shadow: 2px 2px 8px #000 - Produces a black shadow offset 2px right, 2px below with a blur of 8px
text-shadow: -1px 0 6px rgba(0, 0, 0, 0.85);
Produces a dark grey shadow 1px offset to the left Sample Image letter press effect
To create the above impression, please use the below html code.
<html>
<head>
<title>CSS Letterpress Effect </title>
<style type="text/css">
* { margin, padding: 0; }
body {
margin: 5px;
background: #474747;
}
h1 a {
margin: 4px;
font: 90px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
text-align: center;
display: block; text-decoration: none;
color: #999; text-shadow: 0px 4px 9px #2a2a2a;
}
h1 a:hover {
color: #a0a0a1; text-shadow: 0px 6px 9px #2a2a2a;
}
h2 {
margin: 5px;
font: 90px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #220; text-shadow: 0px 2px 3px #554;
}
pre
{
width: 412px;
margin: 0 auto;
margin-top: 10px;
background: #222;
/* padding: 20px; */
padding-left: 190px;
font-size: 15px;
color: white;
text-shadow: 0px 2px 3px #171717;
/* -webkit-box-shadow: 0px 2px 3px #555; */
-moz-box-shadow: 0px 2px 3px #555;
/* -webkit-border-radius: 10px; */
-moz-border-radius: 10px;
}
</style>
</head>
<body>
<h1><a href="http://www.guruhowtodo.com">Guru HowTo DO?</a></h1>
<br><hr>
<h2>CSS Letterpress Effect</h2>
<pre>
<code>
color: #221;
text-shadow: 0px 2px 3px #555;
</code>
</pre>
</body>
</html>
Conclusion
So, this was all about to create Letterpress Text Effect using CSS, text-shadows are extremely simple to implement. If you have any type of queries regarding this tutorial please feel free to let us know.We will try our best to resolve them. If you like this tutorial and find it useful ,then please don’t forget to share this with your friends and social media too.
Post a Comment