torsdag 23 augusti 2012

Dynamiskt anpassningsbara DIV-block med unik ram



Det finns ett problem som är ständigt återkommande för oss som jobbar med webbdesign; Hur ska jag skapa DIV-block som är dynamiskt anpassningsbara till storlek och har en unik ram?
Vi talar alltså om "custom border" till DIV-taggar.

Det är ett problem som verkar ha en lösning inom en nära framtid. Det finns redan lösningar i CSS3, med box-shadow, border-image och border-radius. Men CSS3 har är tyvärr inte ännu 100% kompatibel med alla webbläsare, det har inte 100% "cross-browser support". Dessutom lever vi inte i den bästa av världar och många, framför allt de som sitter på gamla operativsystem, sitter på gamla webbläsare. Suck! Host, host Windows och Explorer!

Jag har i alla fall en lösning jag ständigt återkommer och återanvänder i väntan på en standardiserad webb. Låt oss först kolla på min lösnings för och nackdelar.

Fördelar:
  • Anpassar sig dynamiskt till olika stora DIV-block.
  • Använder egen grafik.
  • Fungerar i alla webbläsare och versioner. Hej IE 6!
  • Ganska snabbt och enkelt att implementera.
  • Helt fri från JavaScript, 100% HTML och CSS.

Nackdelar:
  • Kräver 8 bilder.
  • Kräver 8 extra DIV-block utan innehåll.
  • Ser inte jättevackert ut i källkoden.
Så, det avklarat och utrett, här kommer källkod till lösningen. Förklaring hittas också längre ner.

HTML:
<div class="box">
    <h1>Header 1</h1>

    Vivamus tincidun...

    <div class="border_t"></div>
    <div class="border_b"></div>
    <div class="border_l"></div>
    <div class="border_r"></div>
    <div class="border_br"></div>
    <div class="border_bl"></div>
    <div class="border_tr"></div>
    <div class="border_tl"></div>
</div>

CSS:
<style type="text/css">
<!--
.box{
    background:#FFFFFF;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    position:relative;
}
.border_t {
    background:url(border_t.png) repeat-x;
    position:absolute;
    top:-2px; left:0;
    width:100%;
    height:2px;
}
.border_b {
    background:url(border_b.png) repeat-x;
    position:absolute;
    bottom:-6px; left:0;
    width:100%;
    height:6px;
}
.border_l {
    background:url(border_l.png) repeat-y;
    position:absolute;
    top:0; left:-3px;
    width:3px;
    height:100%;
}
.border_r {
    background:url(border_r.png) repeat-y;
    position:absolute;
    top:0; right:-6px;
    width:6px;
    height:100%;
}
.border_br {
    background:url(border_br.png);
    position:absolute;
    bottom:-6px; right:-6px;
    width:6px;
    height:6px;
}
.border_bl {
    background:url(border_bl.png);
    position:absolute;
    bottom:-6px; left:-3px;
    width:3px;
    height:6px;
}
.border_tr {
    background:url(border_tr.png);
    position:absolute;
    top:-2px; right:-5px;
    width:5px;
    height:2px;
}
.border_tl {
    background:url(border_tl.png);
    position:absolute;
    top:-2px; left:-2px;
    width:2px;
    height:2px;
}
-->
</style>


Förklaring:
Som ni säkert förstår bygger lösningen på åtta bilder. En bild för varje hörn och en för varje kant. De är små bilder på bara några pixlar som går snabbt att ladda.


Tar vi exempelvis underkantens bild så behöver den inte vara mer än 1 pixel bred och 5 pixlar hög för att täcka skuggan som är vår ram. Hörnet är 5 x 5 pixlar. Med CSS kan vi sedan sy ihop dessa bilder till en helhet.

Men som sagt, snart kan vi förhoppningsvis använda CSS3 och allt detta meck är ett minne blott! :)

Inga kommentarer:

Skicka en kommentar