Będzie to prosty tutorial, jak za pomocą CSS utworzyć prosty box z zaokrąglonymi rogami, który będzie wydłużał się sam w zależności od ilości zawartego w nim tekstu. Jest to bardzo prosty efekt, ale początkującym może przysporzyć sporo problemów. Warto jednak go znać, bo jest bardzo przydatny i pozwala trochę ożywić design strony.

Tutaj pobierzecie paczkę z gotowym już efektem zawierającą wszystkie potrzebne pliki:  index.html, style.css oraz grafiki.

downloaddemo

Pierwszą czynnością jaką musimy wykonać jest zaprojektowanie boxu w jakimś programie graficznym. Jeśli żadnego nie posiadamy to możemy skorzystać z narzędzi On-Line, np. Sumo Paint. Poniżej przygotowany przeze mnie box, z którego w celu dokończenia tego tutoriala możecie skorzystać.

Gdy mamy już przygotowany projekt naszego boxu, to możemy przystąpić do jego cięcia. Będziemy musieli rozłożyć go na trzy części. Nagłówek, część środkową, czyli mały wycinek boxa o jego szerokości i wysokości najlepiej jednego piksela, oraz dolny fragment.

Jak widzimy te trzy części, będą odpowiadać trzem kolejnym divom (o kolorze niebieskim), które potem utworzymy. Nagłówek (div class=”top”), na którym umieścimy również tytuł (div class=”title”) naszego boxu. Mały wycinek ze środka (div class=”mid”), który będzie potem tłem tekstu umieszczonego w boxie (div class=”content”). Na końcu natomiast zostanie umieszczona grafika z dolną częścią boxu (div class=”bot”).

Box zatem będzie miał następującą strukturę:

<div id=”box”>
<div>
<div>
Tytuł boxu
</div>
</div>
<div>
<div>
Treść boxu
</div>
</div>
<div>
</div>
</div>

Więc jego kod będzie wyglądał tak:

<div id="box">
—<div class="top">
——<div class="title">
———Tytuł boxu
——</div>
—</div>
—<div class="mid">
——<div class="content">
———Treść boxu
——</div>
—</div>
—<div class="bot">
—</div>
</div>

Teraz gdy już mamy zbudowany szkielet naszego boxu, musimy przypisać odpowiednie atrybuty poszczególnym jego elementom w arkuszu stylów.  Dla trzech divów oznaczonych na obrazku wyżej kolorem niebieskim przypiszemy, jako tło odpowiadające im obrazki. Będzie tylko jedna różnica, a mianowicie “mid” będzie miał tło powtarzane w osi y oraz szerokość ustawioną na 100% by wydłużał się wraz z tekstem. Gotowy arkusz stylów dla tego boxu wygląda następująco:


#box {
width: 205px;
}

#box .title {
padding-left: 10px;
padding-top: 12px;
font: bold 12px "Verdana";
}

#box .top {
background: url(images/top.jpg) no-repeat;
height: 43px;
width: 205px;
}

#box .bot {
background: url(images/bot.jpg) no-repeat;
height: 20px;
width: 205px;
}

#box .mid {
background: url(images/mid.jpg) repeat-y;
height: 100%;
width: 205px;
background-position: left top;
}

#box .content {
width: 185px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
font: normal 10px "Verdana";
text-align: justify;
line-height: 1.2em;
}

To już praktycznie wszystko. Możecie pod  gotowy już kod podłożyć swoje grafiki zmieniając tym samym jego wygląd. Jeśli będą szersze i wyższe  to oczywiście musimy zmienić atrybuty “width” i “height” na odpowiednie wartości.