Stínování textu

12. dubna 2007

Efektní, avšak poněkud neefektivní oživení nadpisů pomocí stínu bez použití obrázků nebo speciálních metod pro náhradu textu Flashem a podobných technik. Založeno výhradně na transformaci textu prostřednictvím CSS.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Mike Cherim. Bližší popis najdete v článku CSS: Text Shadows.

CSS

#exp_content
{
  margin : auto;
  text-align : left;
  padding : 18px 40px 27px 4%;
  height : auto;
  font-size : 0.9em;
  color : #000;
}
#cts
{
  position : relative;
  margin : auto;
  width : 29em;
  height : 13.2em;
  padding : 5%;
}
#cts h2
{
  position : absolute;
  font-size : 350%;
  color : #000;
  top : 0;
  left : 0;
}
#cts h2 span
{
  position : absolute;
  color : #669900;
  top : -1px;
  left : -1px;
}

XHTML

<html>
  <body id=“exp_body“>
    <div id=“exp_content“>
      <div id=“cts“>
        <h2>Text <span>Text</span></h2>
      </div>     </div>
  </body>
</html>

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *