Småproblemer med css -moz-box-shadow

[Gjest Slettet-IHWlGMJn]

Heisann

 

Jeg ønsker et slags content-område som har en skygge ut på begge sidene.

 

Har to problemer:

1. Skyggen legger seg over tidligere elementer
   
2. Skyggen utvider kantene på nettleseren(Dette blir da bare et problem i bunn når div-en med id=shadow er høyere enn oppløsning på skjerm.
   

 

Noen ideer om løsning? Akkurat nå er løsningen min å ha en div utenpå som har et bakgrunnsbilde som lager skyggeeffekt. Men jeg vil helst ha det i css

 

Lagt ved kode og skjermbilde for å illustrere saken bedre.

 

<style>
body {
padding: 0;
margin: 0;
}
#top {
background: #ccc;
height: 200px;
}
#shadow {
background: #aaa;
-moz-box-shadow: 0 0 60px #000;
margin: 0 auto;
width: 700px;
height: 400px;
}
</style>

<div id="top">top</div>
<div id="shadow">shadow</div>

[Thomas.]

Prøv å sett z-index på elementene.

http://www.w3schools.com/Css/pr_pos_z-index.asp

[Bjonski]

Mye bedre å bruke bilde til å lage denne effekten. Krever mindre ressurser og vil vises likt i alle nettlesere.

[PHPdude]

Bilder "krever mindre ressurser"??

Tror du skal få forklare hvorfor en ekstra HTTP-forespørsel med nedlasting krever mindre ressurser. Eller evt. hvordan det krever mindre utviklings-ressurser.

 

 

Trådstarter, kan du ikke få et bra resultat med å flytte skyggen ned, så den ikke dekker elementet ovenfor? Skrev om CSS'n for dette og for å støtte flest mulig nettlesere (alle unntatt IE):

-moz-box-shadow:1em 2em 4em #000; /* Firefox */
-webkit-box-shadow:1em 2em 4em #000; /* Safari/Chrome */
box-shadow:1em 2em 4em #000; /* Opera og fremtidige nettlesere */

[Yawa]

heller mer mot å bruke CSS til dette...

At det bruker mindre resurser å laste et bilde enn CSS kan jeg ikke si meg enig i + at det krever mer CSS å lage alle elementene som bildene skal plasseres i.

[Thomas.]

Du kan sette header som absolutte slik at den kommer øverst, og padding på content'n din.

 

Slik:

<style>
body {
	padding: 0;
	margin: 0;
}
#top {
	background: #ccc;
	height: 200px;
			position:absolute;
			width:100%;
}
#shadow {
	background: #aaa;
	-moz-box-shadow: 0 0 60px #000;
	margin: 0 auto;
	width: 700px;
	height: 400px;
			padding-top:200px;
}
</style>

<div id="top">top</div>
<div id="shadow">shadow</div>

 

Testet i firefox

[Bjonski]

Bilder "krever mindre ressurser"??

Tror du skal få forklare hvorfor en ekstra HTTP-forespørsel med nedlasting krever mindre ressurser. Eller evt. hvordan det krever mindre utviklings-ressurser.

 

Serveren må kanskje takle en ekstra HTTP-forespørsel. Men et bilde på noen få kilobyte laster kjapt.

 

Klienter derimot kan fort knele til disse spesialeffektene i CSS. Moz-border funker også bare i Firefox/Gecko-baserte nettlesere.

[PHPdude]

Bilder "krever mindre ressurser"??

Tror du skal få forklare hvorfor en ekstra HTTP-forespørsel med nedlasting krever mindre ressurser. Eller evt. hvordan det krever mindre utviklings-ressurser.

 

Serveren må kanskje takle en ekstra HTTP-forespørsel. Men et bilde på noen få kilobyte laster kjapt.

Det er mer relevant for problemstillingen at klienten må gjøre en ekstra forespørsel enn at serveren må takle den, og fremstillingen din av bilde-nedlastingen din som en isolert liten detalj virker ikke mye innsiktsfull med tanke på alt hva som foregår når nettleseren skal få opp en hel side. Husk at spørsmålet her er ikke om noe er kjapt vs. ikke kjapt, men hva som er kjappest.

 

Klienter derimot kan fort knele til disse spesialeffektene i CSS.

 

Da venter jeg i spenning på noe som helst av dokumentasjon på at dagens implementeringer av box-shadow er så mye tyngre på rendering enn nedlastede bilder, som det du gir inntrykk av.

Hvis det er enheter hvor jeg kan tro at problemstillingen din kan være reell, må det i så fall være mindre enheter av type mobiler etc. Men på sånne enheter vil da også nedlastingen av bildet være enda mye mer kostbar igjen.

 

Moz-border funker også bare i Firefox/Gecko-baserte nettlesere.

 

Selvfølgelig funker -moz- bare i Gecko-baserte nettlesere. Og vennligst ikke spor temaet (ytelse) over til kompatibilitet.

[FraXinuS]

Vet ikke om det er slik du mener, men her er i hvertfall en måte å få skygger på sidene:

http://stackoverflow.com/questions/2360386/prevent-box-shadow-from-showing-on-a-specific-side/2360453#2360453