Click here to Skip to main content
12,402,241 members (73,838 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

4.8K views
4 bookmarked
Posted

Beautiful Gilded Text with CSS

, 11 Feb 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Ever want to create beautiful gilding beside your text with CSS? (Here’s a demo, if you’re in a modern browser) It’s actually quite easy. Here’s how… First, some simple HTML. I’ll just give you this one: Concept 1 Minstrel Then, you need [...]

Ever want to create beautiful gilding beside your text with CSS? (Here’s a demo, if you’re in a modern browser)

It’s actually quite easy. Here’s how…

First, some simple HTML. I’ll just give you this one:

<head>
<title>Concept 1</title>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>

<body>

    <div class="wrap">

        <h1>Minstrel</h1>

    </div>

</body>

Then, you need to find your font. I chose Rothenburg Decorative and used a free online font converter to get all the different formats to support all browsers. With everything in place, I could then get to the @font-face declaration:

@font-face {
    font-family: 'RothenburgDecorative';
    src: url('fonts/rothenbg.eot');
    src: local('☺'), url('rothenbg.woff') format('woff'), url('rothenbg.ttf') format('truetype'), url('rothenbg.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}

This will go right at the top of your style.css file. Please note that this assumes that your font files are all in the same directory as your stylesheet. If not, change the paths accordingly.

Now we get in to the good stuff. The gilding effect will actually be created with two text shadows. The first we will offset by 2 pixels right and down and will color the same as the background. The second will be gold, and will be offset by 5 pixels right and down. Here’s the code for that:

h1 {
    font-family: 'RothenburgDecorative'; /*Pull in our font we declared earlier*/
    text-shadow:    2px 2px #ECECEC,
                    5px 5px #FDD017;
}

And we’re done with the gilding! Now all that’s left is some other typography stuff to make it look good. Just add this to your h1 block:

font-size: 140px;
letter-spacing: .15em;
text-align: center;

And add this between the @font-face and the h1 blocks (just to get the background set up):

html {
    background-color: #111;
}

.wrap {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    background-color: #ECECEC;
    padding: 10px 50px 10px 50px;
}

Tada! Your very own gilded fancy text.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author


You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 11 Feb 2013
Article Copyright 2013 by Benaiah Mischenko
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid