FAQ |
Kalender |
2008-10-15, 15:50 | #1 | ||
|
|||
Flitig postare
|
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? |
||
Svara med citat |
2008-10-15, 15:52 | #2 | |||
|
||||
Medlem
|
Här är lite mer om rundade hörn med enbart CSS/Javascript (JQuery):
http://www.methvin.com/jquery/jq-corner-demo.html |
|||
Svara med citat |
2008-10-15, 16:02 | #3 | |||
|
||||
Har WN som tidsfördriv
|
http://curvycorners.net brukar jag använda.
|
|||
Svara med citat |
2008-10-15, 17:17 | #4 | ||
|
|||
Flitig postare
|
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. |
||
Svara med citat |
2008-10-15, 17:34 | #5 | ||
|
|||
Mycket flitig postare
|
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 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. |
||
Svara med citat |
2008-10-15, 21:33 | #6 | ||
|
|||
Medlem
|
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. |
||
Svara med citat |
2008-10-15, 22:16 | #7 | ||
|
|||
Flitig postare
|
Citat:
Citat:
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? |
||
Svara med citat |
2008-10-15, 23:01 | #8 | ||
|
|||
Medlem
|
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.
|
||
Svara med citat |
2008-10-16, 08:45 | #9 | ||
|
|||
Flitig postare
|
Citat:
Med den informationen verkar det som det hela går att lösa. Jag återkommer om jag löst det hela :P |
||
Svara med citat |
2008-10-16, 09:24 | #10 | ||
|
|||
Flitig postare
|
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 --> Kanske är enklare att beskära bilden själv trotts allt? :P |
||
Svara med citat |
Svara |
|
|