Layers overelkaar met z-index

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Arian Stolwijk

Arian Stolwijk

07/08/2008 01:43:00
Quote Anchor link
Beste Iedereen ;)

Ik ben met het ambitieuze project MooCanvasShadow bezig. Dit heb ik gister opgezet omdat ik geen goede manier kon vinden om zonder plaatjes makkelijk een schaduw aan een element te geven.

Dit is een voorbeeld
Maar stel nu dat ik een plaatje hierin wil doen en hem ook een schaduw wil geven, gaat dat niet.

Ik maak namelijk met javascript een div aan met daarin het canvas element. Met de mootools method getCoordinates() weet ik de top,left,width,height,right en bottom waardes van het element waar de shaduw aan toe moet worden gevoegd. Daarmee plaats ik dan de schaduw laag absolut op die plek.
Omdat die laag niet over het originele element moet, krijgt de schaduwlaag een z-index van -1.

Als je nu dus in een element met een achtergrond zo'n schaduw wilt plaatsen, komt die schaduw dus achter de achtergrond van het element waar het originele element in zit....

Ik heb even een klein voorbeeldje gemaakt: http://www.aryweb.nl/moocanvasshadow/position.html

De div #Zwevend2 moet dus onder #Content2 maar boven #Content komen.

Hopelijk is het verhaal een beetje te volgen ;)
Heeft iemand een idee hoe ik dit zou kunnen oplossen?

Als je zo fanatiek bent dat je het gelijk in het script MooCanvasShadow wilt verwerken of je ziet andere bugjes mag je het altijd melden natuurlijk :P
 
PHP hulp

PHP hulp

12/08/2020 00:04:47
 
Bas Kreleger
Beheerder

Bas Kreleger

07/08/2008 01:50:00
Quote Anchor link
Die schaduw is lelijjkk :P Wat afbeeldingen betreft kun je eens kijken naar Smart Image Resizer of TimThumb. Met TimThumb kun je o.a. leuke mirror effecten toepassen :) Gif support werkte niet bij mij.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.