HTML5 boilerplate title effect

20 September 2011

When looking into HTML5 boilerplate I got distracted by the headings they use on the website and I decided to recreate this effect.



Check out the JSFiddle demo to play with the effect. Also note the use of Google Webfonts. Really awesome for using special fonts in your website!

<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>

<h1>Dreamdealer</h1>

body {
    background: #232927 ;
}
h1 {
    color: #E3B460;
    font-family: 'Bevan', serif;
    font-size: 90px;
    font-weight: bold;
    text-shadow:
        1px 1px 0px #232927,
        2px 2px 0px #476871,
        3px 3px 0px #476871,
        4px 4px 0px #476871,
        5px 5px 0px #476871,
        6px 6px 0px #476871
    ;  
}
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

0 comments

Please feel free to be the first to comment on this page!

By placing a comment you let me know i'm doing a good job. It doesn't have to be constructive, just a "awesome!" makes me really happy! You contribute to a better world!