Webski Solutions - Web Design & Development Portfolio
Webski - Your interactive partner

Webski - Instant Quote
  • Webski Solutions on Facebook
  • Webski Solutions on Facebook
  • Webski Solutions at Twitter
  • Webski Solutions at LinkedIn
  • Webski Solutions at Pinterest
  • Webski Solutions at Blog
View Blog By Category
Search Blog By Date
View Blog By Author

blogging color css e commerce facebook fonts graphic design images jquery layout mobile marketing online marketing pinterest ppc responsive content slider sem seo seo marketing social media social media marketing typography web design web design sydney web development webmaster tool

Web Design » Glossy Text using only CSS

22 Sep 2010 (11:31)Author: Dean M

It's the new era of the web design. Every web designer or developer that have some basic knowlage od SEO would know that the text is more SEO friendly than image. So if you want the text you want to emphasise to be a little trendy and for example to have a glossy look and sometmes you'll say "OK I'll make an image in photoshop with the text that I want and thats it". I want to tell you that there is a solution for that problem and its solution that doesen using javascript, is't pure CSS trick. 

This is the final product:

Glossy Text

This is the HTML for the glossy text. The only trick is that we put an empty span tag between the h1 tags.

 


   

Example of Glossy Text


 

 

This is the CSS. If you can notice the syle for the span inlcudes a background image that is a transparent PNG image. This image is a white shadow with height half of the height of the text, and it gives tha glossy effect. The other importat think in the CSS is that the h1 has a realtive but the span has an absolute position.

.glossy {
        background: #000;
        padding: 30px 0 30px 30px;
        margin: 30px 0 50px;
    }
    .glossy h1 {
        font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
        position: relative;
        margin: 0;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: -2px;
    }
    .glossy h1 span {
        background: url(images/gradient-dark-stripe.png) repeat-x;
        position: absolute;
        bottom: -0.1em;
        display: block;
        width: 100%;
        height: 29px;
    }

This works in IE6 too, if you put this code between head tag.



This text can be used as a link an we can add another style for hover of the link and the text to become gray.


.glossy a {
    color: #000;
    text-decoration: none;
}
.glossy a:visited {
    color: #000;
}
.glossy a:hover {
    color: #555;
}

And the glossy link will look like this if we put an anchor tags before the span.

Glossy Text Link

The full tutorial can be downloaded here.

Tags: web design typography css glossy text