HTML & CSSur HTML, XHTML & CSS
22 svar · 2 789 visningar · startad av ejick
Hej,
jag har suttit och pillat en längre tid med att få ett lager att ha en skugga över en tonad bakgrund. Jag har fått det att fungera med png-bilder, men problemet blir då istället i IE och det är ett stort problem.
Därför undrar jag om någon har en bra lösning på problemet. Jag har gjort en bild för att visa hur jag vill ha det. Avståndet ovanför bilden är känt (så jag har provat med att ha en bils som passar färgmässigt, dock funkar inte detta så bra).
Problem två är att skuggan inte ska vara med hela tiden utan bara i början på lagret om man säger som så (lättare med bilden).
Jag har letat som en galning på Google men söker nog fel för jag hittar ingenting bra, har sett flera sidor som är på liknande sätt, men det var ett tag sedan och jag kommer inte på någon nu.
Undrar därför om någon kan hjälpa mig eller komma med idéer för jag har kört fast. Koden jag har är något likt
<div id="container">
<div id="header"><!-- Utanför lagret, direkt på bakgrunden --><h1>Hejsan!</div>
<div id="content"><!-- ska innehålla slutet på skuggningen samt fortsätta med border --><p>Jag får det inte att funka...</p></div>
<div id="footer"><!-- helt utanför lagret --><p>© 2007</p></div>
</div>
Hej!
Du ska kolla på http://www.alistapart.com/stories/pngopacity/
Jag har gjort det du vill och du kan beskåda underverket på http://www.egenart.org/devel/bamsekram3/
Både tonad bakgrund och mönstrad och det går bra ändå :) Funkar finfint i både FF och IE6+. Notera att jag har uppgraderat A List Aparts verision för jag ville kunna skicka med imagemap-data.
Lycka till och hör av dig om det inte funkar.
Om du inte orkar läsa artikeln på AListApart som Headbug länkade till, så ta bara skriptet som är bifogat här. Lägg det i sajten och länka till det det i dokumentens head, typ:
<script type="text/javascript" src="sleight.js"></script>
Då funkar transparensen i IE6+ också.
Testa. Hjälper det inte, så återkom. Man kan ibland tvingas klura ihop ganska luriga lösnngar där man använder bakgrunder i olika divvar och body för att pussla ihop nåt som användaren uppfattar som en enda bild i förgrunden...
Mjo, men Danne Vs lösning funkar bara med <img>-taggar, inte om du har png som bakgrund eller ens i CSS. En avsevärd begränsning, men smidigt om det täcker ens behov.
Fast jag skulle aldrig använda den för det blir ett himla pill den dagen man kommer på att, oj, man vill ha en png på ett ställe som inte stöds av sleight.js.
Humm, humm :)
headbug skrev:
Mjo, men Danne Vs lösning funkar bara med <img>-taggar, inte om du har png som bakgrund eller ens i CSS. En avsevärd begränsning, men smidigt om det täcker ens behov.
Oj, hade jag ingen aning om eftersom jag bara använt det för bilder i img-taggar. Tack för påpekandet! (y)
Flott! Börjar få kläm på det nu men kompromissade lite och skuggade hela lagret eftersom det blev svårt att ha skugga som tonades ut samtidigt som kantlinjen skulle fortsätta, i #content (någon som vet hur man kan lösa detta?).
Ah, okej, vilka webbläsare och versioner är det som inte stöder transparens i PNG? IE 7 klarar det, men inte IE 6. De senaste versionerna av FF.
Hur är stödet för mac t.ex. ?
Oj, en artikeln från stenåldern :P
Om du vill använda transparenta bilder i IE:
<style>
* html .skugga {filter: progid:DXImageTransform.Microsoft.AlphaImage Loader(src='skugga.png', sizingMethod='scale');
</style>
her0n skrev:
Oj, en artikeln från stenåldern :P
Om du vill använda transparenta bilder i IE:
<style> * html .skugga {filter: progid:DXImageTransform.Microsoft.AlphaImage Loader(src='skugga.png', sizingMethod='scale'); </style>
var skall jag skriva in det?
Jag har gjort liknande skuggeffekter några gånger. Finns säkert effektivare sätt men jag brukar göra så här:
Exempel: http://mattiasnordin.net/web08/t1/Mattias/Nordin/kontakt.asp (fade effekten är på insidan i detta fall och denna gång använder jag mig av png bilder. Men har man en enfärgad bakgrund så går det lika bra med gif bilder.
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="1014">
<tr>
<td colspan="3">
<!-- #################### H E A D E R ###################### -->
<!-- #include virtual="/eventControl/_design/_inc_header.asp"-->
<script type="text/javascript" language="javascript">funSelectHeadTab("0")</script>
<!-- #include virtual="/eventControl/tab1/default_inc_menu.asp"-->
</td>
</tr>
<tr>
<td width=46 valign="top" background="/eventControl/_design/pic_left_background_dynamic.png"><img border=0 src="/eventControl/_design/pic_left_background.png"></td>
<td width="100%" height="100%">
<div class="iframeWannabeBox">
<br><br><br>
<!-- #include virtual="/eventControl/tab1/emailReplyAction/handleEmailReplyAction_inc_content.asp"-->
</div>
</td>
<td width=46 valign="top" background="/eventControl/_design/pic_right_background_dynamic.png"><img border=0 src="/eventControl/_design/pic_right_background.png"></td>
</tr>
<tr>
<td colspan=3>
<!-- #include virtual="/eventControl/_design/_inc_footer.asp"-->
<!-- #################### F O O T E R ###################### -->
</td>
</tr>
</table>
Nyckeln till skuggeffekten är:
<td width=46 valign="top" background="pic_left_background_dynamic.png"><img border=0 src="pic_left_background.png"></td>
Tabellen har jag delat upp enligt nedan.
Okej testade och använda den koden som i mitt läge blev
<table width="814" height="697" border="0" align="center" valign="top" cellpadding="2" cellspacing="5" background="index.png"><img border=0 src="index.png"></td>
ingen skillnad :/
Hej Nyström.
Koden du citerar har syntaxfel. Det ska vara en TD och inte en TABLE rad.
Du behöver inte heller ange höjden i cellen för den kommer att minimum bli så stor som bilden i cellen (pic_left_background.GIF). Blir innehållet i tabellen högre än pic_left_background.GIF så visas bakgrundsbilden i tabellen.
Konceptet bygger på att skuggan slutar innan footern. Alltså har bilden pic_left_background_dynamic.GIF en enhelig bakgrundsfärg. I detta fall skuggad mot vit.
Notera att denna lösning fungerar om man vill använda GIF bilder för att uppnå den rödvita skuggan. Är PNG ett alternativ (ser inte bra ut i internet explorer 6) så finns det enklare lösningar.
"Valign = top" gör att din skuggade bild ligger överst (obs ej bakgrundsbild). Sedan lägger du en bakgrundsbild utan skuggning som kommer visas om innehållet i tabellen blir högre än pic_left_background.png bilden är.
Laddar upp min hemsida mapp och ser om nån får det och fungera?
http://forngren.com/nystrom/Help.rar
OBS HAR INTE LÄST OVAN prvar nu
En fördel med PNG formatet är att den klarar av att skugga dynamiskt mot underliggande yta.
Du kan se effekten på... http://mattiasnordin.net/web08/t2/bakgrund/texture/texture.asp?rSelFolder=ljusa
... om du provar att klicka i checkboxen "Byt bakgrund på denna site". Ta bort den andra checkboxen så slipper du popupfönstret. Mest uppenbart blir det om du testar en av de animerade bakgrunderna (typ stjärnorna).
Jag har övergett GIF nu trots att det inte fungerar i alla webläsare.
Mattias Nordin skrev:
Hej Nyström.
Koden du citerar har syntaxfel. Det ska vara en TD och inte en TABLE rad.
Du behöver inte heller ange höjden i cellen för den kommer att minimum bli så stor som bilden i cellen (pic_left_background.GIF). Blir innehållet i tabellen högre än pic_left_background.GIF så visas bakgrundsbilden i tabellen.
Konceptet bygger på att skuggan slutar innan footern. Alltså har bilden pic_left_background_dynamic.GIF en enhelig bakgrundsfärg. I detta fall skuggad mot vit.
Notera att denna lösning fungerar om man vill använda GIF bilder för att uppnå den rödvita skuggan. Är PNG ett alternativ (ser inte bra ut i internet explorer 6) så finns det enklare lösningar.
"Valign = top" gör att din skuggade bild ligger överst (obs ej bakgrundsbild). Sedan lägger du en bakgrundsbild utan skuggning som kommer visas om innehållet i tabellen blir högre än pic_left_background.png bilden är.
Okej så om jag använder png så med andra ord så skall jag först ha min table ram där min bakrundbild ligger om "dampar" sen lägga en lika dan bild på den:S
http://mattiasnordin.net/web08/t2/b...SelFolder=ljusa Det är exakt den där effekten jag vill ha ut!
Ja och jag använder png! så vad behöver jag göra?
Ok. Notera att jag inte orkade rita om skuggan efter att jag bytte bakgrundsbild så tittar man noga så har faktiskt skuggan fel färg. Det går dock att få det att bli perfekt även med GIF bilder.
Låt mig skriva ihop en kort sida om hur jag gjort tillsammans med bilderna så kommer du igång snabbt. Postar när jag är klar :)
Då det verkade som att du tycker att PNG bilder är ok att använda så skulle jag gjort något liknande (sidan innehåller källkoden):
http://mattiasnordin.net/web07/temp/testPng.asp
Ladda hem alla filer och lägg dem i samma katalog så bör det fungera.
Asså det där funkar ju inte heller det blir fortfarande lika blåt run png filerna lägger med en scrren shott äre jag som har för gammalt ie?
http://img116.imageshack.us/my.php?image=funkarlaintelafalob2.png
Okej men kolla jag vill att det skall se ut så här från såhär i ie fattar inte riktigt det dära med näru sa syntax felet men vad behöver jag göra? http://img238.imageshack.us/my.php?image=funkad22pa8.png
Jag rekommenderar dig att starta en ny tråd. Posta sedan en bild på designen du vill få till så ska vi se till att hjälpa dig. :)
