Just nu i M3-nätverket
Jump to content

Skuggning bakom hemsidan


Eva-Lotta

Recommended Posts

Hej!

 

Någon som vet hur man får till en skuggning bakom sin hemsida, typ som Apollo har eller liknande. http://www.apollo.se. Eller om man någon har någon annan ide på hur man får hemsidan att se lite mer levande ut och inte så platt. Min layout är ganska stilren så något mer behövs.

Min hemsida har grå bakgrundsfärg så min nästa fråga är om man kan lägga på mer skuggning så att den framträder lite extra?

 

Mvh

 

Eva-Lotta

 

Link to comment
Share on other sites

De har jobbat med bakgrundsbilder för att få skuggeffekten.

Det är nog så i överlag att man skall jobba med bilder och toningar i bakgrund och i element för att få den lite mer "levande".

 

Link to comment
Share on other sites

Stefan@Klientsidan

Hej Eva-Lotta!

 

Det finns olika sätt att få en skuggad ram runt olika element. Jag har just skrivit en artikel på min site som visar hur man gör på ett sätt:

http://www.klientsidan.se/artiklar/20081230/Skuggad_ram_med_CSS_och_jQuery/

 

/Mvh Stefan - klientsidan.se

 

[inlägget ändrat 2008-12-30 11:25:34 av Stefan@Klientsidan]

Link to comment
Share on other sites

  • 1 month later...

hejsan

 

jag har också ett exempel utan jQuery

 

 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>


<style type="text/css" media="all">


.ram{

}

.topp_vanster{

background-image: url(ra1.gif); 
background-repeat: no-repeat;
padding-left: 10px;

}

.topp_hoger{

background-image: url(ra3.gif); 
background-repeat: no-repeat;
padding-right: 10px;

}

.topp_mitten{

background-image: url(ra2.gif); 
background-repeat: repeat-x;
height: 10px;

}


.vanster{

background-image: url(ra4.gif); 
background-repeat: repeat-y;
padding-left: 10px;
}

.hoger{

background-image: url(ra6.gif); 
background-repeat: repeat-y;
padding-right: 10px;

}

.innehall{

}

.nere_vanster{

background-image: url(ra7.gif); 
background-repeat: no-repeat;
padding-left: 10px;

}

.nere_hoger{

background-image: url(ra9.gif); 
background-repeat: no-repeat;
padding-right: 10px;
}

.nere_mitten{

background-image: url(ra8.gif); 
background-repeat: repeat-x;
height: 10px;

}




</style>


</head>

<body>

<div class="ram">
<div class="topp_vanster">
<div class="topp_hoger">
<div class="topp_mitten">
</div>
</div>
</div>


<div class="vanster">
<div class="hoger">
<div class="innehall">
innehåll ...

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



<div class="nere_vanster">
<div class="nere_hoger">
<div class="nere_mitten">
</div>
</div>
</div>

</div>



</body>
</html>



 

[inlägget ändrat 2009-02-15 16:18:33 av mac3]

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...