Überschrift im Web 2.0 Glossy - Style durch CSS

Die Überschrift mit dem glossy-Style. Der Markup-Codes sieht wie folgt aus. Der no-break-space ist nötig, damit kein leeres span Element entsteht, was einen invaliden (X)HTML-Code zur Folge hätte.

<h1><span>&nbsp;</span>Überschrift im Web 2.0 Glossy - Style durch CSS</h1>

CSS Code:

    h1 {
      color: #de0060;
      font-size: 30px;
      line-height: 32px;
      font-weight: bold;
      text-transform: uppercase;
      overflow: hidden;
      margin: 20px;
      position: relative;
    }
    
    /* for ie6: no glossy :( */
    h1 span {
     display: none
    }
    
    /* for others: glossy glossy glossy! */
    h1>span,
    h1 a>span {
      display: inline;
      position: absolute;
      background: url(gloss.png);
      height: 100%;
      width: 100%;
    }
  

Die PNG-Grafik, welche über die Überschrift gelegt wird, ist ein einfacher, farblicher Verlauf der Farbe weiß mit zwei jeweils unterschiedlichen alpha-Werten:
(vergrößert)
Der IE 6 muss auf diesen Effekt leider verzichten, da transparente PNGs nicht korrekt dargestellt werden.

 Funktioniert auch mit anderen Farben und Links

Die Farbe der Überschrift kann beliebig angepasst werden, da das Transparente PNG ja immer über dem Text liegt.

 Auch Zeilenumbrüche bei langen Überschriften sind damit machbar...

Wenn die line-height der Überschrift mit der Höhe des PNGs übereinstimmt, sind auch mehrzeilige Überschriften kein Problem.

 Eine andere Hintergrundfarbe

Mit einer anderen Hintergrundfarbe lässt sich ein 3D-Button ähnlicher Effekt erzielen.

Diese Seite wurde bereitgestellt von Toms Blog.