[btng]

Jag ska precis göra en ny webbsida och undrar hur man gör skuggeffekten som vissa sidor har i bakgrunden.

Exempel på vad jag menar är:
http://dewastator.deviantart.com/art/FitLine-14502853
http://medieteknik.nu/

Någon som förstår vad jag menar? Finns det någon tutorial eller liknande?

[KarlRoos]

Gör en bakgrund som är 40 pixlar bredare än din "box", sedan gör du 20 pixlars skugga på varje sida på bilden och sätter den som bakgrund på body, då kan du åstadkomma det som medieteknik.nu har.

För det andra exemplet så kan du antingen dela in sidan i olika delar med bilder som du repeterar och sedan speciella bilder för hörnen. Eller så kan du använda en stor bild som du wrappar i en div med en padding på 20 pixlar åt de håll som du vill ha skugga åt.

Dessutom så finns "box-shadow" i CSS, det finns dock väldigt dåligt stöd för detta. Vad jag vet så funkar det enbart i Firefox (Gecko) och Safari (Webkit).

Det sista alternativet är att använda ett Javascript bibliotek (ex. jQuery) för att generera en skugga. En Googling gav: http://www.bioneural.net/2008/02/13/corner...ws-with-jquery/

Lycka till!

[btng]

Tack för ett snabbt svar! Ska pröva genast.

[WeaZear]

Tror det bästa alternativet är det första som Karl skriver, eftersom vissa webbläsare visar ex. javascript och css olika.

[tomas77]

för att få fram mediateknik-varianten så brukar jag köra en div runt huvuddiven, förslagsvis döpt till <div id="skugga">. Om innehållsdiven är 800px kan skuggdiven vara förslagsvis 840px.
I skuggdiven har du en repeterande bild som är 840px bred ca 5-10px hög. Den skuggbilden ska då alltså se ut typ såhär:
Skugga (20px) Vit/tomt (800px) Skugga (20px).

Funkar finfint, förhoppningsvis förstår du hur jag menar

[WeaZear]

Originally posted by tomas77@Jun 19 2009, 09:45
för att få fram mediateknik-varianten så brukar jag köra en div runt huvuddiven, förslagsvis döpt till <div id="skugga">. Om innehållsdiven är 800px kan skuggdiven vara förslagsvis 840px.
I skuggdiven har du en repeterande bild som är 840px bred ca 5-10px hög. Den skuggbilden ska då alltså se ut typ såhär:
Skugga (20px) Vit/tomt (800px) Skugga (20px).

Funkar finfint, förhoppningsvis förstår du hur jag menar

Så brukar jag också göra, funkar bäst tycker jag.

[allstars]

Min lösning för medietekniksidan är en bakgrundsbild på 2000px bred och 10px hög som repeteras neråt och är centrerad i mitten.
Bakgrundsbilden har då vitt i mitten lika brett som innehållet skall vara (plus lite för padding) och rita sedan skuggeffekten mot bakgrundsfärg eller mönster.

[trådlöst]

Annars kan du, när du designar själva sidan i Photshop om du nu gör det i Photshop, så gör du en stor box / content som är som bakgrunden till allt typ, så dubbel klickar du på bilden i Lager rutan som brukar vara till höger på skärmen när du har öppnat PS, sen så öppnas Lager stil rutan, sen Klickar du på Drop Shadow ( Lägg till skugga på svenska tror jag det är ), sen så kan du ändra där själv, hur mkt skugga du ska ha, hur långt ifrån det ska vara, hur stark skugga osv.

Förklarade lite dåligt, men hoppas det hjälpte.
Ha en trevlig midsommar!

[FredrikNas]

Trådlöst, det fungerar ju bara på en sida som inte är dynamisk i bredd, men om man vill att den ska följa med i webbläsarens storlek. måste man välja någon av de alternativ som beskrivs ovan.

[Syke]

Jag har skrivit en artikel om saken med tillhörande kod, kanske det kan hjälpa dig lite på traven!
http://www.klientsidan.se/artiklar/2008123...CSS_och_jQuery/