HTML & CSSur HTML, XHTML & CSS
9 svar · 559 visningar · startad av MizzK
hur skapar man en form av skugga på tabell?
tacksam för svar!
om ngn har tips om var man kan hitta gratis bilder som man kan göra snygg grafik från, så är jag tacksam!
<table style="border-top: solid 3px #FCFCFC; border-right: solid 3px #FCFCFC;">
<tr>
<td>text</td>
</tr>
</table>
Eller :q
glömde skriva innan att det är en del av tabellen!!
vet att det finns ngn som man kan lägga in i css hur gör man detta?
Nu har du tappat bort mig, vad menar du med skugga :q
En semitransparent tabell eller, lite "3D"-stuk på tabellen :q
Om du tar du tid att kolla på Aftonbladets kod så ser du att dom använder en bakgrundsbild så att det ser ut som skugga. Skuggan ligger inte i tabellen utan i den här lilla bilden:
https://www.aftonbladet.se/vinj/bas/bg.gif
om ngn har tips om var man kan hitta gratis bilder som man kan göra snygg grafik från, så är jag tacksam!
V.v ställ endast frågor som rör HTML och CSS i det här forumet.
märk väl att jag ställde de som andra fråga och bara om folk vill svara =)
jag menar inte samma som aftonbladet, bara liknande=) jag vill gärna avstå från att ha en bild som bakgrund, riskerar segladdad... har för mig att jag hört att det finns en lösning i css gällande det... ngn?
Hhm...
Om du provar Frankofs lösning igen, men med en annan linjetyp än "solid" då ?
<table style="border-right: groove 3px silver;height:200px;">
<tr>
<td>text</td>
</tr>
</table>
Prova att byta ut silver mot olika färger, att köra med bredare linjer och att växla mellan de olika linje-typerna
inset
outset
ridge
groove
och se om du kan få till det den vägen...
Tips bara - vissa linjetyper skiljer sig *rejält* mellan i MSIE och Moz - men kan man leva med det så...
Annars kan du använda multipla divor:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Shadow test</title>
<style type="text/css">
<!--
.shadow {position: relative; top: 4px; left: 4px;border: 1px solid #6B91FF; background: #364980; -moz-border-radius: 8px;}
.container {position: relative; top: -4px; left: -4px; border: 1px solid #000000;background: #DAE3FF; -moz-border-radius: 8px;}
.container table { background: #DAE3FF; width: 100%; -moz-border-radius: 8px;}
-->
</style>
</head>
<body>
<h1>Test</h1>
<div style="width: 550px;" class="shadow">
<div style="width: 550px;" class="container">
<table summary="">
<tr>
<td>Ska man skriva något här?</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Skilnaden mellan moz och ie när det gäller inset, outset ridge och groove verkar för övrigt vara att ie sätter angiven border-color som ljusast färg medan moz sätter den ljusa färgen lite ljusare än border-color och den mörka lite mörkare så att genomsnittsvärdet motsvarar border-color.