Css-menu - Skygge! Hvordan ?

Tags:    html css

hej.

Hvordan er den enkleste måde at lave sin skygge på fx sin menu eller bare i det hele taget på en boks?

mange tak for hjælpen.



7 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 3 karma
Sorter efter stemmer Sorter efter dato
Den enkleste og hurtigste måde vil nok være at bruge CSS3s box-shadow, som du kan læse mere om på http://www.css3.info/preview/box-shadow/

Desværre er det ikke understøttet af Internet Explorer før v9 kommer på gaden, og det skal skrives på forskellige måder for at få det til at virker i hhv. Firefox, Chrome/Safari og Opera.

Alternativt kan du bruge noget med png-billeder, eller måske kigge på noget javascript-baseret som fx jQuery og dette plugin http://plugins.jquery.com/project/boxshadow

Håber det hjælper lidt på vej :)



http://css3pie.com/ <-- Så kan du bruge en del css3 ting i IE.



Jeg testede lige css3pie.com via browsershot.org for at se hvilke browsers der understøtter deres kode.

Hvis siden så korrekt ud ville den have runde hjørner, border og skygge. Det fungerer på en smule browser, men absolut ikke alle.

Her er udvalgte browsers og hvordan det ser ud.
Avant 11.7:
http://api.browsershots.org/png/original/f2/f241e8cd8a36b35a317ce33dc17ae6cb.png

MSIE 7
http://browsershots.org/screenshots/084128f670ae66f55835e9cf8700fa81

Opera 8.54
http://browsershots.org/screenshots/e6215701d7708e020e42d2a82bfa0f15

MSIE 8
http://api.browsershots.org/png/original/77/773f1ac06b2d994046df619d881cc977.png

Firefox 2.0
http://api.browsershots.org/png/original/ff/ff62804f444dc8177a1b58c328919917.png

Som du ser er de ikke særlig enige. Så vil IKKE bruge deres kode... Med billeder er du sikret understøttelse på alle browsers. Ved det er nederen, men er nok det værd...



CSS er desværre endnu ikke så godt til det. Jeg ved ikke om der er kommet nogen muligheder i CSS 3, men da du ikke skal forvente at din besøgendes browser nødvendigvis støtter CSS3 fraråder jeg det.

Det letteste er at bruge et billede. Sæt det som baggrund i din div. Og hvis boks kan ændre størrelse, bliver du nød til at lave det ved at lave yderligere div som er din border, hvor deres baggrunde sættes repeat-y og repeat-x.

Håber du forstår mig...



CSS er desværre endnu ikke så godt til det. Jeg ved ikke om der er kommet nogen muligheder i CSS 3, men da du ikke skal forvente at din besøgendes browser nødvendigvis støtter CSS3 fraråder jeg det.

Det letteste er at bruge et billede. Sæt det som baggrund i din div. Og hvis boks kan ændre størrelse, bliver du nød til at lave det ved at lave yderligere div som er din border, hvor deres baggrunde sættes repeat-y og repeat-x.

Håber du forstår mig...


Tak for svar.

Jeg kan godt følge dig, men udførselsen.. Så skal der endnu flere div'er :D

Jeg vil da prøve at kigge på det.

Den enkleste og hurtigste måde vil nok være at bruge CSS3s box-shadow, som du kan læse mere om på http://www.css3.info/preview/box-shadow/

Desværre er det ikke understøttet af Internet Explorer før v9 kommer på gaden, og det skal skrives på forskellige måder for at få det til at virker i hhv. Firefox, Chrome/Safari og Opera.

Alternativt kan du bruge noget med png-billeder, eller måske kigge på noget javascript-baseret som fx jQuery og dette plugin http://plugins.jquery.com/project/boxshadow

Håber det hjælper lidt på vej :)


Ja så skal jeg nok igang med de billeder :D



Indlæg senest redigeret d. 29.12.2010 22:18 af Bruger #15747
http://css3pie.com/ <-- Så kan du bruge en del css3 ting i IE.


Er du helt sikker på jeg kan bruge dette uden fejl ?



Jeg testede lige css3pie.com via browsershot.org for at se hvilke browsers der understøtter deres kode.

Hvis siden så korrekt ud ville den have runde hjørner, border og skygge. Det fungerer på en smule browser, men absolut ikke alle.

Her er udvalgte browsers og hvordan det ser ud.
Avant 11.7:
http://api.browsershots.org/png/original/f2/f241e8cd8a36b35a317ce33dc17ae6cb.png

MSIE 7
http://browsershots.org/screenshots/084128f670ae66f55835e9cf8700fa81

Opera 8.54
http://browsershots.org/screenshots/e6215701d7708e020e42d2a82bfa0f15

MSIE 8
http://api.browsershots.org/png/original/77/773f1ac06b2d994046df619d881cc977.png

Firefox 2.0
http://api.browsershots.org/png/original/ff/ff62804f444dc8177a1b58c328919917.png

Som du ser er de ikke særlig enige. Så vil IKKE bruge deres kode... Med billeder er du sikret understøttelse på alle browsers. Ved det er nederen, men er nok det værd...


Mange tak for testen !

Ja det så er det bare igang med de billeder :D



t