Skapa rutor med CSS
2008-04-21 - atlas, css, design, tutorial
0
htmleditor
Som jag skrev om innan så är det ibland väldigt svårt att ersätta tabeller med CSS även om man skulle vilja. Här är ännu ett exempel som jag tänkte ta upp. Jag skrev för en stund sen om att jag tyckte att trenden om att byta ut tabeller mot CSS har lett till att sidor som är CSS-baserade må se rena och fina ut men är i regel bra mycket mer primitiva. Det har förekommit hundratals tips och tricks för att åstadkomma resultat som påminner om sådant som är väldigt enkelt med tabeller.

Rundade hörn

Ett sådant exempel är rutor som man vill ha runt text. Medan det är enkelt att lägga en bakgrundsfärg och en border på en DIV i CSS så är det desto svårare att få till rundade hörn på ett snyggt sätt. Då jag är grafiker så har jag ju rätt mycket krav på exakt hur dessa rutor ska se ut, och jag nöjer mig inte med något så simpelt som bara rundade hörn utan vill ha möjligheten att skapa något som ser snyggt ut och passar ihop med en etablerad stil i resten av sidan.
134548
Detta är grundexemplet. En enkel ruta med en yttre kant och yttre skugga runt hela.
134555
Så här är denna skapad, med en tabell som har bilderna i celler eller som bakgrund i celler som gör att dom repeteras korrekt. Den kan alltså växa och bli hur stor som helst. Jag har en PHP-funktion som heter square() som tar bilderna och lägger dom rätt och returnerar tabell-HTML för detta. Men resultatet är alltså en hel del HTML-kod samt att nio stycken bilder måsta laddas. Små bilder visserligen, men ändå nio stycken.

CSS?

Så, hur kan man skapa denna i CSS då? Ja, den mest populära tekniken är att ha så kallade "wrapper DIV's" med olika bakgrunder, som positioneras så att dom hamnar rätt i förhållande till innehållet.
134553
Så detta är delarna vi måste ha. Istället för nio delar så har vi bara fyra, varav en är väldigt stor, och egentligen ska vara större än här på bilden då den ska vara lika stor som rutan kan förväntas bli. Så, trots att vi har färre delar så tar dom alltså mer tid att ladda över till webbläsaren då dom måste vara stora nog att rymma olika sorters innehåll.
134550
Och här är tanken bakom systemet. Rutan är av en viss, dynamisk, storlek och bilderna fungerar som bakgrunden som försvinner under dom andra "wrap" DIV:arna som då pusslar ihop hela rutan.
För att göra detta så måste vi alltså ha fyra stycken "wrappers", en för varje bakgrundsbit som ska ligga ovanpå varandra med bakgrunden korrekt positionerad så att delarna skapar alla hörnen korrekt. och vår kod ser då ut så här:
<div class='ruta'>    <div class='overleft'>       <div class='underright'>          <div class='underleft'>             <span class='mrubrik'>Hejsan</span><br>             Det här är min söta lilla ruta          </div>       </div>    </div> </div>
Ok, kanske inte den snyggaste koden man har sett, men dock mer lättläst än HTML-koden för tabellerna ovan. Här är ordningen på DIV:arna väldigt viktiga eftersom vi bygger upp rutan genom att lägga bilder ovanpå varandra. Ok, vad börjar vi med? Jo, vi ska ju ha "overright"-bilden som grundbakgrund, eftersom det är den som ska ligga underst så att säga, så vi lägger till den här CSS-koden:
134552
DIV.ruta {    background-image: url(overright.png);    background-repeat: no-repeat;    background-position: top right; }
Ok, så det där såg kanske inte så himla snyggt ut... Vi får lov att lägga på lite fler bakgrundsbilder.
allparts
DIV.ruta DIV {    background-repeat: no-repeat; } DIV.ruta DIV.overleft {    background-image: url(overleft.png);    background-position: top left; } DIV.ruta DIV.underleft {    background-image: url(underleft.png);    background-position: bottom left; } DIV.ruta DIV.underright {    background-image: url(underright.png);    background-position: bottom right; }
Aha, det där såg ju genast mycket bättre ut! Men texten ligger ju över bakgrundsbilden så vi måste ha lite lut kring den, något vi alltså sätter på den innersta DIV:en för annars flyttar vi ju bakgrundsbilderna
134551
DIV.ruta DIV.underleft {    background-image: url(underleft.png);    background-position: bottom left;    padding: 10px; }
Ja men hallå, nu är den ju klar, vad klagar du på? Den ser ju exakt likadan ut som den första bilden som var gjord med tabeller, eller hur? Ja, det är sant, det ser så ut. Men det är en kritisk skillnad.
134549
Som ni ser, med tabellen kan jag använda mig utav transparens i bilderna, och oavsett bakgrund så ser den lika bra ut. Det är viktigt för mig när jag utvecklar Atlas eftersom jag inte i förhand vet om exakt vilken bakgrund rutorna kommer användas på, men med tabelltricket så spelar det ingen roll, som ser likadana ut överallt. Med CSS så liggr ju bilderna ÖVER varandra, och därför kan vi inte använda transparensen, eftersom det då skulle visa underliggande bakgrundsbild, inta bakgrunden som plattan ligger på, tyvärr.
Så, CSS fungerar så länge man inte har så stora krav på hur det ska se ut överallt, eller om man vet exakt vilka förutsättningar man jobbar efter. Men som man kan se i det här exemplet så även om man vet det så är det inte alltid man kan genomföra det med CSS, tyvärr.
Lite imponerad hur mycket Apple Watch kan hålla reda på bär man simmar faktiskt
Får lite välbehövlig hjälp att fixa med elen i verkstaden
Improvisationsteater på Västmanlandsteatern. Lika delar pinsamt och skoj :)
Har ryggskott som börjar bli bättre. Nyser nu på morgonen och det hugger till i ryggen och gör ont som fan. Kollapsar på golvet, och när jag reser mig upp så har jag råkat få igång Siri som tror sig ha hört detta. Ok, det gör ont som fan, men jag är ok, Siri :)
Har en trappa hemma som måste renoveras, menrenoveringskit är dyra som tusan, tanken är att jag ska bygga eget renoveringskit, får se hur det går…
Bakbunden
Även en ordentlig geringsfräs för att kunna bygga hållbara trappnosar
Har införskaffat mig en planopress inför kommande bordsprojekt samt ett test för en trapprenovering.
Byggde en pokalhylla till dotterns alla danspokaler
Pricken över i:et :)
Bakbord
Nytt projekt på gång, bakbord till svärfar :)
“Gå och lägg dig” - ”Nej jag kollar på TV med Leia” :)
Extrabord till jul
Extrabord till julafton klart! Byggvideo kommer inom kort på min youtube :)
Weehoo, jag har en egen stämpel nu. Det ni!
Bordskiva oljad och vaxad, ben borstade och betsade. Kanske blir ett bord till slut?
Bordsskiva betsad. Ska slipas/borstas och sen oljas.
Renoverat vardagsrumsbord
Favoritbild från dansuppvisningen igår
Nattduksbord
PanPastel-porträtt
Crock Pot
PanPastel
Tron för Sigge
Road Trip Italien!
Verkstad Remake
Jonas och Jenna
Brud som chillar
Showing off
Undressing
Touch thyself
Hot Love
Profilporträtt
Resa utan kamera?
Paus
Supernöjd med folieringen!
Bilen ska folieras!
Ny såg
PHP och BankID
Jack Skellington
Verkstadsplaner
Magnettavla
Verandatak och grillhörna!
Vardagsrumsbord
Knivblock
Kökshylla
Ny ikon för karta
PC-bygge
Kerlee 35mm f/1.2
Objektivhylla
Natalie Dormer
Hållare till kattmatsskålar
Hälsningar från Norge
With a little help from my friends...
The Most Incredible Fantasy Maps You've Ever Seen
Cityfestivalen
Mitakon Speedmaster 50mm/f0,95
10 minuter vatten
Sony A7R II
Petzval 58 Bokeh Control Art Lens
Scrawlrbox
Nya skärmar till jobbet
Nikon Df - ny leksak
Boba Fett
First Order Storm Trooper
Mikisen
#inlineditbutton