Shadows in Firefox & Chrome

maandag 1 november 2010 16:11

Acties:

0 Henk 'm!

Topicstarter

Beste Tweakers,

Ik ben druk bezig met een website, en ik ben op het moment bezig met shadows. Dit gaat op zich prima tot op een bepaald moment. In internet Explorer ziet de rand er zo uit:
Afbeeldingslocatie: http://easy-upload.nl/f/IPsBIKaA

Dit is wat ik wil en dat wordt gedaan door het volgende:

code:

1	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#666666')";/* IE 8 */

Nu wil ik dit ook hebben in Firefox & Chrome maar hier krijg ik het niet voor elkaar:

code:

-moz-box-shadow: 30px 30px 40px #666; /* Firefox */
 -webkit-box-shadow: 30px 100px 100px -3px #666;
 width:100%;
 
 
 box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers */

Ik hoop dat iemand mij kan helpen.

Just do it.

maandag 1 november 2010 16:18

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Wat is het probleem?

(behalve "ik krijg het niet voor elkaar")

[ Voor 52% gewijzigd door Bosmonster op 01-11-2010 16:19 ]

maandag 1 november 2010 16:22

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Een shadow is geen gradient. Waarin gebruik je niet gewoon een image? Of desnoods dit, als CSS3 een optie is: http://www.webdesignerwal...oss-browser-css-gradient/

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

maandag 1 november 2010 16:32

Acties:

0 Henk 'm!

Rednas_N

Topicstarter

@Bosmonster

Het probleem is dat ik de schaduw in Internet Explorer wel voor elkaar krijg doormiddel van de bovenstaande regel. Maar in Firefox, Chrome & Safari mij het niet lukt om de schaduw tevoorschijn te toveren.

Just do it.

maandag 1 november 2010 16:34

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Je code is gewoon correct, dus daarom ben ik benieuwd wat het probleem verder nu is. (m.a.w. hoe de rest van je code eruit ziet).

[ Voor 21% gewijzigd door Bosmonster op 01-11-2010 16:35 ]

maandag 1 november 2010 16:37

Acties:

0 Henk 'm!

noes

gek op benzine.

Ik zou een semi-transparante PNG (png24 in photoshop) gebruiken. Dan heb je beste cross-browser compatability en is het op iedere browser identiek.

K54/R1250RS | K48/K1600GT | E61/550i

maandag 1 november 2010 16:37

Acties:

0 Henk 'm!

Rednas_N

Topicstarter

Ik ben blij om te horen dat de code correct is. Alleen de schaduw eronder die wordt niet getoond. Ik kan de fout niet vinden.

code:

.dropshadow {
 
 -moz-box-shadow: -30px -30px -40px -6 #666; /* Firefox */
 -webkit-box-shadow: 30px 100px 100px -3px #666;
 width:100%; */
 -moz-linear-gradient(top,  #ccc,  #000);
 
 
 
 box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#666666')";/* IE 8 */
 : progid:DXImageTransform.Microsoft.Shadow(Strength=30, Direction=180, Color='#FFFFFF');/* IE 5.5 - 7 */ 
}

Wat ik dus vreemd vind is dat het dus wel in IE werkt. Maar in Chrome, Safari & Firefox niks van die schaduw te zien is.

@NME
Het is de bedoeling dat de schaduw onder het groene vlak komt om te zeggen. Wat er nu gebeurd is dat het groene vlak van wit naar zwart gaat.

@Noes
Het liefst wil ik het zonder plaatjes doen en gewoon met CSS. Dit ook omdat ik dit wel een mooie oplossing vindt en dat het in theorie ook op deze manier zou moeten werken.

[ Voor 9% gewijzigd door Rednas_N op 01-11-2010 16:43 ]

Just do it.

maandag 1 november 2010 17:00

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Wat is de vierde waarde in je shadow? Die heb ik nog nooit gezien bij een shadow. Naar mijn weten is het:

code:

1	-webkit-box-shadow:5px 5px 5px rgba(0,0,0,.7);

1. offset left
2. offset top
3. shadow spread
4. color

[ Voor 14% gewijzigd door MoietyMe op 01-11-2010 17:01 ]

maandag 1 november 2010 17:13

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Ah, goed opgemerkt

maandag 1 november 2010 17:17

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Geef eens dan een hele simpele werkende testcase

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 1 november 2010 17:18

Acties:

0 Henk 'm!

Rednas_N

Topicstarter

Het zou gewoon moeten werken, want zover ik weet werkt het bij een afbeelding ook. Die schaduw moet dus onder het groene vlak (header). En moet dus over het blauwe vlak en dat is de content om het zo te zeggen. En dat via een div.

Just do it.

maandag 1 november 2010 17:25

Acties:

0 Henk 'm!

Rednas_N

Topicstarter

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
 
        
        
        <link rel="stylesheet" href="./css/layout2.css" />
    </head>
    <body>
        <div id="header" class="dropshadow">
            <img src="#" alt="Header1 " />
            <h1>Test</h1>
        </div>   
        
       
        
    </body>
</html>

HTML stukje, nu werkt het wel in Safari.

CSS:

Cascading Stylesheet:

/* TEST */


.dropshadow {
 
 -moz-box-shadow: 00px 10px 10px rgba(10,10,10,7);

 /*-webkit-box-shadow: 20px 20px 20px #969696;*/
 
 -webkit-box-shadow:00px 10px 10px rgba(10,10,10,7);
 
 box-shadow: 10px 10px 10px #000; /* CSS3 */ /* Opera and other CSS3 supporting browsers */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=180, Color='#666666')";/* IE 8 */
 : progid:DXImageTransform.Microsoft.Shadow(Strength=30, Direction=180, Color='#FFFFFF');/* IE 5.5 - 7 */ 
}


/* EINDE TEST */

html, body {
    margin:0;
    padding:0;
}

#header {
    top:0;
    left:0;
    width:100%;
    height:100px;
    background-color:lime;
    

    
    
}

#header h1 {
    
    float:right;
    margin: 0 10px 0 0;
    background-color:red;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    
    
    
}

Nu moet ik alleen nog zorgen dat ik die schaduw over het blauwe vlak heen krijg wat momenteel niet gebeurd.

[ Voor 3% gewijzigd door BtM909 op 01-11-2010 18:09 ]

Just do it.

maandag 1 november 2010 17:45

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Volgens mij kun je dat alleen oplossen met een z-index en absolute positionering. De schaduw valt simpelweg onder het element eronder, zoals het hoort.

Overigens heb je in je voorbeeld .7 vervangen door 7, wat heel wat anders is

[ Voor 17% gewijzigd door Bosmonster op 01-11-2010 17:46 ]

maandag 1 november 2010 17:47

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Dat kan ook niet zonder met negatieve margins te gaan kloten. Anders krijg je dus, zoals in het voorbeeld in je TS, lastig leesbare teksten.

Om diezelfde reden zag ik trouwens ook geen shadow maar een bevel in je screenshot.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

maandag 1 november 2010 18:08

Acties:

0 Henk 'm!

Rednas_N

Topicstarter

Mooi het is inmiddels gelukt, ik heb met behulp van "z-index" precies gekregen wat ik wil.

Ook heeft dit mij erg goed geholpen:

code:

1	-moz-box-shadow: 00px 10px 10px rgba(10,10,10,7);

Bedankt iedereen!

Just do it.

maandag 1 november 2010 18:25

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Je hebt nog steeds een alpha channelwaarde van 7 in plaats van .7.

[ Voor 15% gewijzigd door NMe op 01-11-2010 18:25 ]

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

maandag 1 november 2010 19:09

Acties:

0 Henk 'm!

Rednas_N

Topicstarter

Ja, hier heb je inderdaad gelijk in. Ik denk dat ik nog een beetje moet spelen met die kleuren, en dan komt het helemaal goed. Maar bedankt voor je opmerking!

Just do it.

dinsdag 2 november 2010 11:36

Acties:

0 Henk 'm!

DiSiLLUSiON

"00px" kun je vervangen door "0". Nul is namelijk niets.

[ Voor 38% gewijzigd door DiSiLLUSiON op 02-11-2010 11:36 ]

Pagina: 1

Reageer

Onderwerpen