Bakgrundsbilder och allt möjligt (CSS)

5 svar · 353 visningar · startad av pakmannen 26 mars 2005

pakmannenMedlem sedan dec. 2002227 inlägg

Frågan26 mars 2005 18:21#1

Hej!

Jag hade tänkt försöka göra en sida med en liten 3D-effekt: http://www.tjoff.com/saker/ex1.jpg ungefär sådär. Men jag har insett att mina css-kunskaper inte räcker till. Det känns som om det blir ganska invecklat eftersom "3d-ramen" ska kunna utvidgas i storlek etc.

Vet inte riktigt hur jag ska börja.. Om någon kunde styra in mig på rätt väg och visa hur jag ska dela upp div:arna och bakgrundsbilderna så vore jag tacksam.

m_soderlundMedlem sedan sep. 20026 425 inlägg

26 mars 2005 18:38#2

Testa att göra bakgrundsbilden och sen skapa ett lager som du använder denna CSS för:

#diven { background: url(bild.gif) repeat top left; }

zcorpanMedlem sedan dec. 20042 245 inlägg

26 mars 2005 19:15#3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>Triangel</title>
  <style type="text/css">
   html {
    background:white;
   }
   div {
    width:0; 
    line-height:0; 
    border:5em solid; 
    border-color:navy white white navy; 
   }
  </style>
 </head>
 <bo[b][/b]dy>
  <div></div>
 </body>
</html>

[edit]
Bättre så? :moose
[/edit]

jarvkloMedlem sedan juli 20013 378 inlägg

26 mars 2005 19:34#4

Hmm...

Åt vilket håll vill du att den skall kunna utvidgas...
Bara i höjdled eller både i höjd- och sidled ?

pakmannenMedlem sedan dec. 2002227 inlägg

27 mars 2005 13:44#5

Bara i höjdled egentligen. Det blir väl till att dela upp Grejen är att helst ska de "mörkblå" partierna på vänstra sidans skugga också kunna ändras i höjdled, vilket väl innebär att bilden måste delas upp i 6 bitar eller något sånt?

jarvkloMedlem sedan juli 20013 378 inlägg

27 mars 2005 19:25#6

Du tänker helt rätt..

Jag brukar numera skapa en "container" som innehåller det repeterande bakgrundsmönstret (i den mån det finns) och sedan lägga en div överst med "avslutningen upptill" och en div med "avslutningen nertill" längst ner

container:

  |          |

bilden repeterar i y-led när den är bakgrundsbild ;)
Överkanten:

  +----------+
  |          |

Bakgrundsbilden "lite högre" än innehållet så att man garanterat slipper se "avfasningen" repetera om innehållets höjd ökar...
Underkanten:

  |          |
  +----------+

Den här bakgrundsbilden sätter jag background-position: bottom på för att få den "rätt"... Även dennna gör jag lite högre än det förväntade innehållet i taggen den "skall bo i"

HTML-koden:

<div id="container">
  <div id="top">Sidhuvudet</div>
  <div id="content">Allt innehåll, expanderar nedåt</div>
  <div id="bottom">Sidfoten</div>
</div>

I just ditt fall blir det, som du var inne på, fler "skivor" att ta ut från bilden ;) men principen är densamma... Identifiera vad som skall/kan repeteras och lägg in blocktaggar (Hx, div, p osv) där du vill ha "brytningar", "färgskift" eller vad det nu råkar vara för effekt ;)

Hoppas detta kanske var till lite hjälp iaf även om det inte blev så konkret för just *din* layout ...