Embossed Text in CSS3
If you’re anything like me, you sure do love some sexy embossed text. It can make a normal text element on your page appear to be “punched” in rather than having a “flat against the screen” look that normal text has. Of course, products like Photoshop and Illustrator have reigned supreme for a while, but with CSS3 we can emboss text just like the big boys. Let’s see how it works.
Today, we’ll be creating a “button” to show the embossed text technique in all of its glory. The button won’t actually do anything, but the text inside of the button is our focus today. Taking a look around the web nowadays will quickly prove that embossed text isn’t going anywhere, and is, in fact, seeing somewhat of resurgence as of late. Here’s what our basic HTML page looks like. Just a standard Div that will pose as our button, and a paragraph inside of the div to hold our text:
<p class="buttonText"> Press Me </p>
The CSS file has more than is needed, but only because I wanted the button in our example to look at least halfway decent. Here’s what it looks like:
background:-webkit-gradient(linear, left top, left bottom,from(#b3b3b3),to(#555));
background:-moz-linear-gradient(top, #264aff, #FFFFFF);
filter:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#264aff', endColorstr='#FFFFFF');
border: 1px solid #999;
font-family: Verdana, Geneva, sans-serif;
margin: -15px -45px 0px 30px;
text-shadow: 0px -1px 0px #000;
All of the styles in the #button selector are simply there for aesthetics purposes. I’ve added a gradient, some rounded corners, etc… The important part of the CSS file is the .buttonText class selector. Here, you’ll see that I’ve added a text-shadow property. This property takes four parameters:
- The color of the text shadow.
- The x-offset of the shadow relative to the text.
- The y-offset of the shadow relative to the text.
- The amount of blur to be added to the shadow in pixels.
As you can see, I’ve given the y-offset property a value of -1. This means that instead of pulling the shadow away from the text, it will actually lay over the text slightly, giving us the illusion of the text being “punched” into the button. A subtle effect, but nice.
That’s all there is to it! Instead of giving our text-shadow a positive value to move it away from our text slightly, we’ve given it a negative value so that it overlays our text. This is just another way to make plain text stand out a bit more, and add a little depth to your design. Play with combinations of light and dark backgrounds and see what kind of cool typography you can come up with. Until next time!