WN - Smart lösning på rundade hörn...

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Smart lösning på rundade hörn... (https://www.wn.se/forum/showthread.php?t=32589)

Kollade på Bredbandsbolagets hemsida och lade märke till hur de har löst rundade hörn på boxar.
http://www.bredbandsbolaget.se/wps/portal/

Traditionellt sett brukar jag, och många lösa detta genom, 4-8 st bilder, ett för varje hörn och kant.
Bredbandsbolaget har löst detta med en stor bild;
http://www.bredbandsbolaget.se/wps/themes/.../remote_box.gif

Css till det hela finner man här:
http://www.bredbandsbolaget.se/wps/themes/...v3/B2_boxes.css

Någon som är duktig på css som kan förklara hur det fungerar?

Här är lite mer om rundade hörn med enbart CSS/Javascript (JQuery):

http://www.methvin.com/jquery/jq-corner-demo.html

http://curvycorners.net brukar jag använda.

Jo, men om ni förstod min post så handlade det inte om hur man gör rundade hörn generellt. Och framför allt inte med JS. :P

Kolla på BBB's lösning, den är smart. En bild och lite css. Inget mer.

Bredbandsbolagets lösning har jag kört tidigare, men i en simplare variant. Det är väl egentligen inte så revolutionerande, men jag har inte sett den användas i två dimensioner tidigare.

Förenklat kan man göra såhär:
Antag att du alltid har fast bredd på din box.

Kod:

<div>

  <div class='box_top'>Content</div>

  <div class='box_bottom'></div>

</div>

Sätt bakgrundsbilden på box_top.
Sätt höjden på box_bottom till något litet (10 pixlar eller så), och lägg in samma bild här, men denna gång med position (0,100%), alltså med utgångspunkt nere till vänster.

Eftersom den nedre div:en bara är 10 px hög kommer endast de 10 nedersta pixlarna av bilden att visas, och i den övre div:en visas det av bilden som får plats (detta förutsätter alltså en större bild än själva boxen).

Vad bredbandsbolaget har gjort är att de utökat lösningen till ytterigare en dimension, men principen är densamma, det kräver bara två till div:ar.

Lätt som en plätt.

1 bild, sunkig markup och en seg jävla sida.. inget att rekommendera.

Att spamma ut massa extra divs för att "underlätta" (är ju egentligen helt fel ord här^^) är ju bara idiotiskt, då kan vi lika gärna gå tillbaka till tabeller a la rutnäts tänket.

Citat:

Ursprungligen postat av Lindahl

Kod:

<div>

 * *<div class='box_top'>Content</div>

 * *<div class='box_bottom'></div>

</div>

Tack för ditt svar. Det förklarade en del. Inte vidare svårt alltså.

Citat:

Ursprungligen postat av Hjalmarsson

1 bild, sunkig markup och en seg jävla sida.. inget att rekommendera.
Att spamma ut massa extra divs för att underlätta (är ju egentligen helt fel ord här^^) är ju bara idiotiskt, då kan vi lika gärna gå tillbaka till tabeller a la rutnäts tänket.

Hur tycker du att man ska lösa det då?
Varför skulle det vara segt? man laddar bara in en bild istället för flera. En laddning istället för 8-9?

De använder väl något som är väldigt nära "css sprites". Bra på det sättet att det är bara en bild att ladda ner och cacha.

Citat:

Originally posted by Syke@Oct 15 2008, 23:01
De använder väl något som är väldigt nära "css sprites". Bra på det sättet att det är bara en bild att ladda ner och cacha.

Ja verkar så, bra artikel jag hittade på ämnet, http://www.alistapart.com/articles/sprites

Med den informationen verkar det som det hela går att lösa.

Jag återkommer om jag löst det hela :P

Såhär ser lösningen ut i alla fall, det var lite krångligare än jag förväntat.

Kod:

<style type="text/css">

<!--

div.remoteBox {

        background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 0 0 repeat-x #efefef;

        font-size: 10px;

        position: relative;

        margin: -9px 0px 9px 0;

        right: -9px;

        line-height: normal;

}



div.remoteBox div.wrap {

        padding: 0 24px 0 0;

        background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 100% 0 repeat-y;

}



div.remoteBox div.bi {

        padding: 0 0 0 24px;

        background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 0 0 repeat-y;

}



div.remoteBox div.bt {

        height: 24px;

        margin: 0 -24px;

        padding-right: 26px;

        background: none;

}



div.remoteBox div.bt div {

        height: 24px;

        background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 0 0 no-repeat;

}



div.remoteBox div.bb {

        height: 24px;

        margin: 0 -24px;

        background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 100% 100% no-repeat;

}



div.remoteBox div.bb div {

        width: 24px;

        height: 24px;

        background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 0 100% no-repeat;

}

div.remoteBox div.tableContainer {

        width: auto;

}



-->

</style>

<br>

<br>



<!--BOX 1-->

<div class="remoteBox" style="width:400px;">

        <div class="wrap">

 *<div class="bi">

 *        <div class="bt"><div></div></div><!-- bt -->

 * *<div class="tableContainer">

 * * * * * * * * * *TEST!<br />

 * * * * * * * * * *TEST!<br />

 * * * * * * * * * *TEST!<br />

 * * * * * * * * * *TEST!<br />

 * * * * * * * * * *TEST!<br />

 * * * * * * * * * *TEST!<br />

 * * * * * * * * * *TEST!<br />

 * * * * * * * * * *TEST!<br />

 * * * * * * * *</div>

 * * * * * * <div class="bb"><div></div></div><!-- bb -->

 *</div><!-- bi -->

        </div><!-- wrap -->

</div><!-- remoteBox --><br>





<!--BOX 2-->

<div class="remoteBox" style="width:300px;">

        <div class="wrap">

 *<div class="bi">

 *        <div class="bt"><div></div></div><!-- bt -->

 * *<div class="tableContainer">

 * * * * * * * * * *EN HELT ANNAN BOX!<br />

 * * * * * * * * * *TEST!<br />

 * * * * * * * * * *TEST!<br />

 * * * * * * * * * *TEST!<br />

 * * * * * * * * * *TEST!<br />

 * * * * * * * * * <img src="image/portfolio/tff.jpg"><br>

JAHA<br />

 * * * * * * * *</div>

 * * * * * * <div class="bb"><div></div></div><!-- bb -->

 *</div><!-- bi -->

        </div><!-- wrap -->

</div><!-- remoteBox -->

Verkar dock krävas någon fix i IE 6. Ush!
Kanske är enklare att beskära bilden själv trotts allt? :P

Jag var också tvungen att göra ett försök. Finns ett litet problem i IE6 som jag inte hinner kika på nu. Men tror lösningen blev lite "renare" i alla fall. Jag använde mig lite mer av absolut positionering för att sätta saker på sin plats, vilket krävde färre divvar. Om man skiter helt i IE6 kan man även ta bort den inre content-divven och sätta paddingen på remoteboxen:

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 * "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

        <title>Blarf</title>

        <style type="text/css">

        <!--



        div.box1 {

 *width: 400px;

        }

        

        div.box2 {

 *width: 300px;

        }

        

        div.remoteBox {

 *background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 0 0 no-repeat;

 *position: relative;

 *font-size: 10px;

 *line-height: normal;

        }

        

        div.remoteBox div.content {

 *padding: 24px;

        }



        div.remoteBox div.rightSide {

 *background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 100% 0 no-repeat;

 *width: 24px;

 *height: 100%;

 *position: absolute;

 *top: 0;

 *right: 0;

        }



        div.remoteBox div.bottom {

 *background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 0 100% no-repeat;

 *width: 100%;

 *height: 12px;

 *position: absolute;

 *bottom: 0;

 *left: 0;

        }



        div.remoteBox div.bottomRightCorner {

 *background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 100% 100% no-repeat;

 *width: 24px;

 *height: 12px;

 *position: absolute;

 *bottom:0;

 *right: 0;

 *z-index: 100;

        }



        -->

        </style>

        </head>

        <body>

 *<!--BOX 1-->

 *<div class="remoteBox box1">

 *        <div class="rightSide"></div>

 *        <div class="content">

 * *TEST!<br />

 * *TEST!<br />

 * *TEST!<br />

 * *TEST!<br />

 * *TEST!<br />

 * *TEST!<br />

 * *TEST!<br />

 * *TEST!<br />

 *        </div>

 *        <div class="bottomRightCorner"></div>

 *        <div class="bottom"></div>

 *</div>



 *<!--BOX 2-->

 *<div class="remoteBox box2">

 *        <div class="rightSide"></div>

 *        <div class="content">

 * *EN HELT ANNAN BOX!<br />

 * *TEST!<br />

 * *TEST!<br />

 * *TEST!<br />

 * *TEST!<br />

 * *<img src="image/portfolio/tff.jpg" /><br />

 * *JAHA<br />

 *        </div>

 *        <div class="bottomRightCorner"></div>

 *        <div class="bottom"></div>

 *</div>

        </body>

</html>

Det är kan man bara använda om man vill ha runda hörn med css:en, det är en slags kant, och om man inte är så noga med att det ska funka i dem äldre å läsarna kan du prova..

-moz-border-radius: 4px; -webkit-border-radius: 4px;

http://developer.mozilla.org/En/CSS:-moz-border-radius

Förhoppnings så blir det standard med CSS3.

Citat:

Originally posted by Lundmark@Oct 16 2008, 16:39
Jag föredrar runda hörn utan bilder

Jag har tänkt många gånger att det måste gå att göra på det där sättet men inte sett något exempel tidigare. Fin stämning.

Citat:

Originally posted by Lundmark@Oct 16 2008, 16:39
Jag föredrar http://www.webdesignskolan.com/css-effekte...tm#roundcorners

och för oss som vill ha antialiasing så blir det där inte så bra...

Citat:

Originally posted by Lundmark@Oct 16 2008, 16:39
Jag föredrar http://www.webdesignskolan.com/css-e...m#roundcorners

Om du vill dra det till sin spets kan du ju göra en hel homer i CSS:
http://www.romancortes.com/blog/homer-css/

Men koden ser fortfarande förjävlig ut. Rundade hörn med så lite onödig markup-kod som möjligt är vad vi i alla fall jag vill åt.

Citat:

Ursprungligen postat av Robert

Citat:

Ursprungligen postat av Lundmark

Jag föredrar http://www.webdesignskolan.com/css-effekte...tm#roundcorners

och för oss som vill ha antialiasing så blir det där inte så bra...

Nej, det där är inte snyggt.

Hellre två rader extra markup och få det perfekt visuellt än att ta genvägar. Visst, man ska sträva efter en ren HTML-markup men inte till varje pris. Det viktigaste är att det fungerar i alla webbläsare.

Kod:

.top .center, .bottom .center

{float: left;}



.top .left

{float: left; width: 10px; height: 10px; background: url(top_left.png) top left no-repeat;}



.top .right

{float: right; width: 10px; height: 10px; background: url(top_right.png) top left no-repeat;}



.bottom .left

{float: left; width: 10px; height: 10px; background: url(bottom_left.png) top left no-repeat;}



.bottom .right

{float: right; width: 10px; height: 10px; background: url(bottom_right.png) top left no-repeat;}

Kod:

<div>



<div class="top">

<div class="left"></div>

<div class="center"></div>

<div class="right"></div>

</div>



<div class="content">

Content

</div>



<div class="bottom">

<div class="left"></div>

<div class="center"></div>

<div class="right"></div>

</div>



</div>

Otestat men borde fungera, inte för rörigt.

Citat:

Ursprungligen postat av grinditwp

Citat:

Originally posted by -Lindahl@Oct 15 2008, 17:34
Bredbandsbolagets lösning har jag kört tidigare, men i en simplare variant. Det är väl egentligen inte så revolutionerande, men jag har inte sett den användas i två dimensioner tidigare.

Förenklat kan man göra såhär:
Antag att du alltid har fast bredd på din box.

Kod:

<div> * *<div class='box_top'>Content</div> * *<div class='box_bottom'></div> </div>

Sätt bakgrundsbilden på box_top.
Sätt höjden på box_bottom till något litet (10 pixlar eller så), och lägg in samma bild här, men denna gång med position (0,100%), alltså med utgångspunkt nere till vänster.

Eftersom den nedre div:en bara är 10 px hög kommer endast de 10 nedersta pixlarna av bilden att visas, och i den övre div:en visas det av bilden som får plats (detta förutsätter alltså en större bild än själva boxen).

Vad bredbandsbolaget har gjort är att de utökat lösningen till ytterigare en dimension, men principen är densamma, det kräver bara två till div:ar.

Lätt som en plätt.

Tack för ditt svar. Det förklarade en del. Inte vidare svårt alltså.

Citat:

Ursprungligen postat av Hjalmarsson

1 bild, sunkig markup och en seg jävla sida.. inget att rekommendera.
Att spamma ut massa extra divs för att underlätta (är ju egentligen helt fel ord här^^) är ju bara idiotiskt, då kan vi lika gärna gå tillbaka till tabeller a la rutnäts tänket.

Hur tycker du att man ska lösa det då?
Varför skulle det vara segt? man laddar bara in en bild istället för flera. En laddning istället för 8-9?

Självklart använder jag en lite större bild i min dagliga kodning men diggar inte alls tanken med en universal lösning för att få till runda hörn.

Låt säga vi har en kolumn som är en lista.. (kan låta en wrapper div gå igenom här, allt ska ju ha betydelse till sidan och markupen formad där efter)

Som sagt beror ju helt på hur designen är uppbyggd för att koda så optimalt som möjligt, men principen iaf.

<div>
<ul>[*]
<h2></h2>

</p>[*][/list]</div>

Bam!! 5 block-level element behövs det något mer? (visst paragrafen kan vi räkna bort, men ändå.. 4 element = 4 bilder (4 olika positioneringar av samma bild syftar jag ju då på))

Håller med Hjalmarsson. Tänker man till lite behöver man inte alls många taggar. En <h2> eller <ul> funkar alldeles utmärkt att sätta en bakgrund på.

Massa onödiga <div> är lika osemantiskt som att köra med tabeller...

bwah! skulle då vart en avslutande som vart lite feg och rymde från mitt svar.

Citat:

Ursprungligen postat av Cosma

Det är kan man bara använda om man vill ha runda hörn med css:en, det är en slags kant, och om man inte är så noga med att det ska funka i dem äldre å läsarna kan du prova..
-moz-border-radius: 4px; -webkit-border-radius: 4px;
http://developer.mozilla.org/En/CSS:-moz-border-radius
Förhoppnings så blir det standard med CSS3.

Citat:

Originally posted by -Lundmark@Oct 16 2008, 16:39
Jag föredrar http://www.webdesignskolan.com/css-effekte...tm#roundcorners

Citat:

Originally posted by -Thir13teen@Oct 16 2008, 17:12

Citat:

Ursprungligen postat av Lundmark

Jag föredrar http://www.webdesignskolan.com/css-effekte...tm#roundcorners

Jag har tänkt många gånger att det måste gå att göra på det där sättet men inte sett något exempel tidigare. Fin stämning.

Alla av ovannämnda sett är jätte bra, problemet är juh dock om man vill ha en lite flashigare backgrundsbild eller lite skuggade kanter osv. Därför är just tekniken som används på BBB's sida och liknande intressanta.

Citat:

Ursprungligen postat av Hjalmarsson

Citat:

Originally posted by -grinditwp@Oct 15 2008, 22:16

Citat:

Originally posted by -Lindahl@Oct 15 2008, 17:34
Bredbandsbolagets lösning har jag kört tidigare, men i en simplare variant. Det är väl egentligen inte så revolutionerande, men jag har inte sett den användas i två dimensioner tidigare.
Förenklat kan man göra såhär:
Antag att du alltid har fast bredd på din box.

Kod:

div * *div class=box_topContent/div * *div class=box_bottom/div /div

Sätt bakgrundsbilden på box_top.
Sätt höjden på box_bottom till något litet (10 pixlar eller så), och lägg in samma bild här, men denna gång med position (0,100%), alltså med utgångspunkt nere till vänster.
Eftersom den nedre div:en bara är 10 px hög kommer endast de 10 nedersta pixlarna av bilden att visas, och i den övre div:en visas det av bilden som får plats (detta förutsätter alltså en större bild än själva boxen).
Vad bredbandsbolaget har gjort är att de utökat lösningen till ytterigare en dimension, men principen är densamma, det kräver bara två till div:ar.
Lätt som en plätt.

Tack för ditt svar. Det förklarade en del. Inte vidare svårt alltså.

Citat:

Originally posted by -Hjalmarsson@Oct 15 2008, 21:33
1 bild, sunkig markup och en seg jävla sida.. inget att rekommendera.
Att spamma ut massa extra divs för att underlätta (är ju egentligen helt fel ord här^^) är ju bara idiotiskt, då kan vi lika gärna gå tillbaka till tabeller a la rutnäts tänket.

Hur tycker du att man ska lösa det då?
Varför skulle det vara segt? man laddar bara in en bild istället för flera. En laddning istället för 8-9?

Självklart använder jag en lite större bild i min dagliga kodning men diggar inte alls tanken med en universal lösning för att få till runda hörn.
Låt säga vi har en kolumn som är en lista.. (kan låta en wrapper div gå igenom här, allt ska ju ha betydelse till sidan och markupen formad där efter)
Som sagt beror ju helt på hur designen är uppbyggd för att koda så optimalt som möjligt, men principen iaf.
div
ul
li
h2/h2
p/p
li
/ul
/div
Bam 5 block-level element behövs det något mer? (visst paragrafen kan vi räkna bort, men ändå.. 4 element = 4 bilder (4 olika positioneringar av samma bild syftar jag ju då på))

Citat:

Originally posted by -Lindahl@Oct 16 2008, 21:47
Håller med Hjalmarsson. Tänker man till lite behöver man inte alls många taggar. En h2 eller ul funkar alldeles utmärkt att sätta en bakgrund på.
Massa onödiga div är lika osemantiskt som att köra med tabeller...

Man kan alltid sträva efter olika saker. Att få en sida med perfekt ren kod som är lätt förståelig oavsett användare. Eller sida som är grafiskt tilltalande. Hur som så strävar man alltid efter en sida som laddar in snabbt och som fungerar lika för alla.

Innan man kan avgöra om en lösning är rätt eller fel måste man räkan in en den faktorer, vem vänder man sig till? vad är syftet? vad tjänar vi? vad förlorar vi?

Vad tjänar man på att använda "css-sprites-teknik"?
Man får betydligt mycket mindre HTTP-requests och man får en mer återanvändbar design.

Det är inte alltid lika viktigt att en sida har helt "perfekt" kod, många läser aldrig koden. De flesta ser dock designen.

Hur som helst så handlade inte denna tråd om "bästa" lösningen på "problemet", utan om tekniken som BBB använde sig av, och även newgrounds, och gamespot.

Citat:

Ursprungligen postat av KarlRoos

Kod:

.top .center, .bottom .center

{float left;}

.top .left

{float left; width 10px; height 10px; background urltop_left.png top left no-repeat;}

.top .right

{float right; width 10px; height 10px; background urltop_right.png top left no-repeat;}

.bottom .left

{float left; width 10px; height 10px; background urlbottom_left.png top left no-repeat;}

.bottom .right

{float right; width 10px; height 10px; background urlbottom_right.png top left no-repeat;}

Kod:

div

div class=top

div class=left/div

div class=center/div

div class=right/div

/div

div class=content

Content

/div

div class=bottom

div class=left/div

div class=center/div

div class=right/div

/div

/div

Otestat men borde fungera, inte för rörigt.

Heh, tack för visat intresse... Men nästa gång kanske du orkar skapa dig en uppfattning om vad vi diskuterar :)

kul lösning ändå, men varför duger inte den tekniken? kanten såg ju rund ut, räcker inte det? eller e jag helt ute å cyklar (som vanligt :P )

Citat:

Originally posted by (Lundmark @ Oct 16 2008@ 16:39)

Jag föredrar http://www.webdesignskolan.com/css-effekte...tm#roundcorners

hemsk markup

Citat:

Ursprungligen postat av Robert

Citat:

Ursprungligen postat av Lundmark

Jag föredrar http://www.webdesignskolan.com/css-e...m#roundcorners

och för oss som vill ha antialiasing så blir det där inte så bra...

http://www.spiffycorners.com/

Citat:

Originally posted by Jokke@Nov 7 2008, 10:23

http://www.spiffycorners.com/

Hemsk markup