Osobná stránka a debilníček

Rámček s oblými rohmi

Malá ukážka, ako urobiť pomocou CSS elastický rámček s oblými rohmi, ktorý bude navyše sémanticky správne upravený.

Budeme potrebovať štyri obrázky najlepšie vo formáte GIF, kvôli veľkosti súboru.
Obrázky si treba prispôsobiť na velkosť akú budete potrebovať, pri tomto príklade sú použité obrázky na max-výšku rámčeku 600px.
HTML kód je veľmi jednoduchý, trošku zložitejšie je to až v CSS kóde.

Základ rámčeku je DIV class="box" ten nám tvorí vlastne kostru rámčeka a jeden z obrázkov je umiestnený na jeho pozadí v pravo dole.
Ďalší DIV class="boxnadpis" je v kóde umiestnený len kvôli druhému obrázku v pravo hore.
H2 je nadpis a na jeho pozadí je obrázok v ľavo hore.
DIV class="boxbody" nám ohraničuje text v jednotlivých odstavcoch a zabezpečuje pozadie posledného obrázku v ľavo dole.

Stránka s ukážkou.

<div class="box">
 <div class="boxnadpis"><h2>Skúšobný nadpis</h2></div>
  <div class="boxbody">
   <p>Tu je krátky príklad textu.</p>
   <p>A ešte jeden skúšobný text.</p>
  </div>
</div>

* html  .boxhead h2 {height: 1%;} /*Pre prehliadac IE 5*/

.box {
 margin: 0 auto;
 width: 17em;
 background: url(sbbody-r.gif) no-repeat bottom right;
 font-size: 100%;
}
.boxnadpis {
 background: url(sbhead-r.gif) no-repeat top right;
 margin: 0;
 padding: 0;
 text-align: center;
}
.boxnadpis h2 {
 background: url(sbhead-l.gif) no-repeat top left;
 margin: 0;
 padding: 22px 30px 5px;
 color: white;
 font-weight: bold;
 font-size: 1.2em;
 line-height: 1em;
 text-shadow: rgba(0,0,0,.4) 0px 2px 5px;
} /* text-shadow je pre prehliadac Safari */
.boxbody {
 background: url(sbbody-l.gif) no-repeat bottom left;
 margin: 0;
 padding: 5px 30px 31px;
}

Páči sa vám tento článok, zalinkujte ho:

««« Predchádzajúci text: Technológie webových stránok Následujúcí text: Rozdiel medzi class a id »»»

Verzia pre tlač | 2 komentáre | 1299x