HTML & CSSur HTML, XHTML & CSS
5 svar · 254 visningar · startad av caze
Hur gör man egentligen så att kanterna och undersidorna av olika boxar och innehåll blir som de här t ex (med fräscha linjer, skuggor och dylikt):
http://www.cssbeauty.com/archives/2005/March/komodo_media/
http://www.dincy.net/
http://www.bjarredsbatklubb.org/BBK/index.html
http://www.joewebber.co.uk/
Visst går det att fixa med bakgrundsbilder men jag menar vilka möjligheter som finns inom css.
Hur gör man så att sidan slutar längst ned
Du kan t.ex. lägga en y-ledsrepeterande bakgrundsbild med sidskuggor i en container som du sätter 100% höjd på...
t.ex. containern "omslag" i http://member.webforum.nu/2241/sidfotsflyt.html
Skuggor kan man göra på flera sätt!
Ett gammalt exempel jag gjort, kanske kan va till ngn, hjälp!
<HTML>
<HEAD>
<style type=text/css>
body {background-color:green;}
div {background-color:#333366;width:300px; height:200px;position:absolute;left:50; top:20;}
table {width:300px; height:200px; border:2px solid black; position:relative;left:-8; top:-8;}
td {background-color:lightblue; }
.div2 {background-color:#333333;width:300px; height:200px;position:absolute;left:400; top:20;}
.tabell2 {width:300px; height:200px; border:2px solid black; position:relative;left:8; top:8;}
.td2 {background-color:silver; width:150px; height:200px; border:1px solid black;}
.skugga {
FONT-FAMILY:Verdana;
FONT-WEIGHT:800;
FONT-SIZE:24pt;
COLOR:darkred;
LINE-HEIGHT:40pt;
HEIGHT:1pt;
FILTER:DropShadow(Color=#CCCCCC OffX=-3,OffY=2)
}
.bildskugga {width:100px; height:100px; background-color:#006666;position:absolute; left:500; top:300;}
.bild {widht:100px; height:100px; position:relative;left:-5; top:-3;}
</style>
</HEAD>
<BODY>
<div>
<table cellpadding=0 cellspacing=0>
<tr>
<td>
</td>
</tr>
</table>
</div>
<div class=div2>
<table class=tabell2 cellpadding=0 cellspacing=0>
<tr>
<td class=td2>
</td>
<td class=td2>
</td>
</tr>
</table>
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<p class=skugga>Lite svalkande skugga kanske ?</p>
<div class=bildskugga>
<img src="bild1.jpg" class=bild>
</div>
</BODY>
</HTML>
bosse, dina skuggningseffekter kommer endast att fungera i Internet Explorer. Så det är bättre att skapa skuggningseffekter med hjälp av bilder.