Click here to Skip to main content
11,704,315 members (45,661 online)
Click here to Skip to main content

Tagged as

Beautiful Gilded Text with CSS

, 11 Feb 2013 CPOL 4.4K 4
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

Benaiah Mischenko
Student
United States United States
I am a web developer living in Wasilla, Alaska. I have been working in web development since 2010. I have been programming since I was ten, starting out in .NET and migrating to WordPress and PHP.

Other than programming, my interests include photography, music (vocal, guitar, and theory), writing (prose, poetry, and screenplay), and spending time with my six brothers and one sister.

You can visit my website at benaiah.mischenko.com

You may also be interested in...

Comments and Discussions

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