Skyggeeffekt til at "rulle" indhold op bag en header i HTML/CSS

Tags:    html css css3 box-shadow

Hej er der nogen der har en fiks løsning til at lave en skyggeeffekt, der giver illusionen af, at en inholdscontainer "rulles op" under en header, som har position:fixed (dvs. at når der scrolles synes det, at inholdet rulles op om bag ved headeren)? :)

Jeg har prøvet med at sætte noget box-shadow på headeren, men skyggen skal jo kun være på undersiden, og den skal kun være ligeså bred som indholdet (som har en bredde på 70%).

Håber I kan hjælpe mig :)




8 svar postet i denne tråd vises herunder
6 indlæg har modtaget i alt 11 karma
Sorter efter stemmer Sorter efter dato
Hej Johan,

Jeg vil anbefale dig at lave skyggen med en png-fil.
Se evt. dette link hvordan:
http://www.alistapart.com/articles/cssdropshadows/

Håber det hjælper dig. Hvis ikke, så send evt. en url med, så vi bedre kan se hvad du mener.



Skygge kan laves således:

Fold kodeboks ind/udCSS kode 


Afprøv med de pixels :)



Såvidt jeg har forstået det, så vil du have en lignende effekt som på denne hjemmeside:

http://stigaard.info/krydstogt/

?? Korrekt? :D



I kan se hvad jeg mener her på min afprøvnings tumblr-blog :)
http://johansibassi.tumblr.com/

Det er meningen der skal være en skygge det sted, hvor indholdet ruller op under headeren :)



#Johan
Ja, brug box-shadow, det eksempel som jeg gav dig skulle nok kunne løse dit problem :)



Så sætter du bare en ekstra div under headeren, og giver den en bredde samt skyggen :)



Men hvis jeg sætter en box-shadow på headeren vil jeg jo få en skygge der går hele vejen på tværs af siden.
Jeg ønsker kun en skygge det sted hvor indholds-containeren møder headeren :)



Ja okay tak for det :)



t