Na stronie http://pro.html.it/esempio/nifty/ znalazłem ciekawe opisy jak zaokrąglać rogi pudełek stosując CSS, zamiast JavaScript. Poniższe przykłady są adaptacją podanych na tych stronach przykładów do moich zastosowań: Ramki mające zaokrąglone boki można wykonać w technice CSS.
Można je umieszczać na stronie na dwa sposoby: * w pierwszym tekst jest umieszczony bezpośrednio w body i ramka obejmuje cały ekran (ramka pierwsza). Nadaje się to na logo strony. * w drugim kod umieszczony jest wewnątrz pudełka o określonych rozmiarach (ramka druga). W obu przypadkach kod w head ma postać: .owal{ display:block; } .owal *{ display:block; height:1px; overflow:hidden; background:#ABFFB6; } .owal1{ border-right:1px solid blue; padding-right:1px; margin-right:3px; border-left:1px solid blue; padding-left:1px; margin-left:3px; background:blue; } .owal2{ border-right:1px solid blue; border-left:1px solid blue; padding:0px 1px; background:blue; margin:0px 1px; } .owal3{ border-right:1px solid blue; border-left:1px solid blue; margin:0px 1px; } .owal4{ border-right:1px solid blue; border-left:1px solid blue; } .owal5{ border-right:1px solid blue; border-left:1px solid blue; } .tekst{ padding:10px 5px; background:#ABFFB6; } Kod w body ma postać: <div> <b class="owal"> <b class="owal1"></b> <b class="owal2"></b> <b class="owal3"></b> <b class="owal4"></b> <b class="owal5"></b> </b> <div class="tekst">Tutaj należy wstawić tekst...</div> <b class="owal"> <b class="owal5"></b> <b class="owal4"></b> <b class="owal3"></b> <b class="owal2"></b> <b class="owal1"></b> </b> </div> Powyższy kod z body można umieścić np. w pudełku o nazwie ramka i szerokości 30% lub w klasycznej tabeli. Efekt tego można zobaczyć poniej:
Tekst w tej ramce jest zawarty w pudeku o szerokoci 30% szerokoci ekranu. Dobierając ten sam kod koloru w kodzie head, uzyskamy pudełko, w którym wszystkie boki i wypełnienie są tego samego koloru
Można też zmodyfikować kod w body do postaci:
<div> <b class="owal"> <b class="owal1"><b></b></b> <b class="owal2"><b></b></b> <b class="owal3"></b> <b class="owal4"></b> <b class="owal5"></b> </b> <div class="tekst">Tutaj należy wstawić tekst...</div> <b class="owal"> <b class="owal5"></b> <b class="owal4"></b> <b class="owal3"></b> <b class="owal2"><b></b></b> <b class="owal1"><b></b></b> </b> </div> Da to efekt w postaci jednokolorowego pudełka z niebieskimi rogami:
Tekst w tej ramce jest zawarty w pudełku o szerokoci 30% szerokoci ekranu. Dobierając ten sam kod koloru w kodzie head, uzyskamy pudełko, w którym wszystkie boki i wypełnienie są tego samego koloru
do góry |