FAQ |
Kalender |
2009-06-06, 12:55 | #1 | |||
|
||||
Flitig postare
|
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? |
|||
Svara med citat |
2009-06-06, 13:17 | #2 | ||
|
|||
Har WN som tidsfördriv
|
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! |
||
Svara med citat |
2009-06-06, 13:55 | #3 | |||
|
||||
Flitig postare
|
Tack för ett snabbt svar! Ska pröva genast.
|
|||
Svara med citat |
2009-06-06, 14:18 | #4 | ||
|
|||
Mycket flitig postare
|
Tror det bästa alternativet är det första som Karl skriver, eftersom vissa webbläsare visar ex. javascript och css olika.
|
||
Svara med citat |
2009-06-19, 09:45 | #5 | ||
|
|||
Nykomling
|
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 |
||
Svara med citat |
2009-06-19, 11:35 | #6 | ||
|
|||
Mycket flitig postare
|
Citat:
|
||
Svara med citat |
2009-06-19, 13:45 | #7 | ||
|
|||
Klarade millennium-buggen
|
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. |
||
Svara med citat |
2009-06-19, 13:47 | #8 | ||
|
|||
Har WN som tidsfördriv
|
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! |
||
Svara med citat |
2009-06-20, 14:57 | #9 | |||
|
||||
Bara ett inlägg till!
|
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.
|
|||
Svara med citat |
2009-06-20, 14:58 | #10 | ||
|
|||
Medlem
|
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/ |
||
Svara med citat |
Svara |
|
|