[PS/CSS] Patroon-achtergrond icm transparante schaduw - Softwareontwikkeling

zondag 17 juli 2005 21:31

Acties:

Verwijderd

Topicstarter

Hoi, ik zit met een heel vervelend probleem.

Ik heb patroon pattern van 3x3 px, die ik over de gehele achtergrond van mijn website wil herhalen. Dit gaat tot nu goed met:

Cascading Stylesheet:

body
{
 background: url("pattern.jpg");
}

Vervolgens heb ik een div, #container, van 600px breed die ik gecentreerd wil hebben met achtergrond bg. Dit doe ik zo:

Cascading Stylesheet:

html,
body
{
 height: 100%;
}
div#container
{
 height: 100%;
 width: 600px;
 position: absolute;
 left: 50%;
 margin-left: -300px;
 background: url("bg.jpg") center repeat-y;
}

Uiteindelijk wil ik het er zo uit laten zien: voorbeeld.

Het probleem is de schaduw. Hoe laat ik de schaduw van bg mooi overlopen op het herhalende pattern?

Wat ik al heb geprobeerd:

• pattern óók als achtergrond gebruiken bij bg: resultaat #1. Zoals je ziet sluiten pattern en bg niet goed op elkaar aan.

• pattern alléén als achtergrond gebruiken bij bg, maar bg zo breed maken dat het zich over het hele beeldscherm spreidt: resultaat #2. Er is opeens sprake van rare vervormingen in de achtergrond.

• De achtergrond van bg transparant maken en als GIF ipv JPEG opslaan: resultaat #3. De schaduw van bg.gif is opeens weg.

En nu kan ik niks meer bedenken. Ik wacht met spanning af. $_/-\o_$

zondag 17 juli 2005 22:20

Acties:

Verwijderd

transparente png

zondag 17 juli 2005 22:21

Acties:

HunterPro

grijns, probleem heb ik destijds ook gehad. Geloof dat Cheatah daar wat op had verzonnen, not sure though.

* HunterPro roept de Khat

zondag 17 juli 2005 22:27

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op zondag 17 juli 2005 @ 22:20:
transparente png

Ja, maar daar heeft Internet Explorer toch moeite mee?

zondag 17 juli 2005 22:30

Acties:

HunterPro

Verwijderd schreef op zondag 17 juli 2005 @ 22:27:
[...]

Ja, maar daar heeft Internet Explorer toch moeite mee?

dan bouw je een browserdetector in en krijgen mensen gewoon een niet 100% kloppende schaduw als ze IE gebruiken?

* HunterPro doet niet zo aan rekening houden met

zondag 17 juli 2005 22:39

Acties:

sjaakaq

It might get loud

Jup en je hebt wel heel veel script voor transparante PNG in IE, maar dat werkt weer niet in combinatie met "background"; dan moet de PNG in een IMG tag staan

leoaq.fm // Jeune Loop

zondag 17 juli 2005 22:41

Acties:

Verwijderd

Topicstarter

leokennis schreef op zondag 17 juli 2005 @ 22:39:
Jup en je hebt wel heel veel script voor transparante PNG in IE, maar dat werkt weer niet in combinatie met "background"; dan moet de PNG in een IMG tag staan

Ja, dat is dus geen optie. Maar is hier echt geen 'simpele' oplossing voor? Het lijkt me toch een veelvoorkomend dilemma.

maandag 18 juli 2005 10:18

Acties:

Verwijderd

WalfredGeesink schreef op zondag 17 juli 2005 @ 21:31 redelijk veel..

Ik zou btw het zwarte middenstuk wit maken.. Staat ook best stylish volgs mij... Sorry ik kan je niet helpen met je probleem..

[ Voor 87% gewijzigd door Verwijderd op 18-07-2005 10:19 ]

maandag 18 juli 2005 10:40

Acties:

Verwijderd

http://homepage.ntlworld.com/bobosola/

je kan ook style met die ie code maken, en dan met die filter anders verneukt hij het voor ff

maandag 18 juli 2005 10:50

Acties:

Verwijderd

Verwijderd schreef op zondag 17 juli 2005 @ 22:41:
Ja, dat is dus geen optie. Maar is hier echt geen 'simpele' oplossing voor? Het lijkt me toch een veelvoorkomend dilemma.

De meest simpele oplossing is een GIF gebruiken voor IE die de PNG benaderd. De meeste mensen zien het verschil toch niet.

Afbeeldingslocatie: http://www.mennovanslooten.nl/gfx/got/png_vs_gif.gif

Afbeeldingslocatie: http://www.mennovanslooten.nl/gfx/got/png_vs_gif.gif

[ Voor 12% gewijzigd door Verwijderd op 18-07-2005 10:56 ]

maandag 18 juli 2005 12:14

Acties:

imp4ct

'k Zou zowiezo geen .jpg gaan gebruiken voor achtergronden. Want echt je verspilt er gewoon al ten eerste traffic mee en je site laad trager, t'is misschien maar een klein verschil zou je zeggen, maar als je van de instelling blijft om .jpg files te gebruiken loopt dit toch aardig op.

Ik kan verkeerd zijn eh, maar werk eens zonder procenten, 'k weet dat IE hier soms problemen rond maakt, qua achtergrond images heb'k nooit echt probs gehad, 'k zal sebiet even iets proberen te fixen.

gefixed, denk ik. Zowel in IE als in FF krijg ik toch hetzelfde resultaat.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>walfredgeesink.nl</title>
        <style type="text/css">
            html, body { 
             height: 100%; 
            }
            body { 
             margin: auto; 
             padding: auto;
             background-image: url("pattern.jpg"); 
             background-repeat: repeat;
            }
            div#container { 
             position: absolute; 
             left: 50%; 
             margin-left: -300px; 
             width: 600px; 
             height: 100%; 
             background-color: #FFFFFF; /*maak dit gewoon zwart*/
        </style>
    </head>
    <body>
        <div id="container">&nbps;</div>
    </body>
</html>

link : http://got.zionweb.be

[ Voor 75% gewijzigd door imp4ct op 18-07-2005 12:30 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

maandag 18 juli 2005 12:17

Acties:

HunterPro

imp4ct schreef op maandag 18 juli 2005 @ 12:14:
'k Zou zowiezo geen .jpg gaan gebruiken voor achtergronden. Want echt je verspilt er gewoon al ten eerste traffic mee en je site laad trager, t'is misschien maar een klein verschil zou je zeggen, maar als je van de instelling blijft om .jpg files te gebruiken loopt dit toch aardig op.

Ik kan verkeerd zijn eh, maar werk eens zonder procenten, 'k weet dat IE hier soms problemen rond maakt, qua achtergrond images heb'k nooit echt probs gehad, 'k zal sebiet even iets proberen te fixen.

een jpeg hoeft niet groter te zijn dan een gif.

maandag 18 juli 2005 12:29

Acties:

imp4ct

HunterPro schreef op maandag 18 juli 2005 @ 12:17:
[...]

een jpeg hoeft niet groter te zijn dan een gif.

Tuurlijk niet, t'is gewoon te zien op welke kwaliteit dat je, je bestand opslaat. Maar toch, 't is volgens mij toch een algemene standaard om .gif te gebruiken bij je images bij webdesign.
Enkel bij images die een grote kwaliteit moeten hebben, of die meer kleuren hebben dan een .gif bestand kan weergeven, dan zou'k .jpg gebruiken, voor de rest lijkt het mij vrij nutteloos. Maar 't zal ook een manier van werken zijn gewoon.

'k Mag trouwens .png ook niet vergeten

, komt ook meer en meer op.

[ Voor 14% gewijzigd door imp4ct op 18-07-2005 12:32 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

maandag 18 juli 2005 12:54

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op maandag 18 juli 2005 @ 10:18:
[...]

Ik zou btw het zwarte middenstuk wit maken.. Staat ook best stylish volgs mij... Sorry ik kan je niet helpen met je probleem..

Dat was ook mijn plan hoor, maar ik wil eerst dit probleem gefixed hebben voordat ik verder ga.

imp4ct schreef op maandag 18 juli 2005 @ 12:14:
'k Zou zowiezo geen .jpg gaan gebruiken voor achtergronden. Want echt je verspilt er gewoon al ten eerste traffic mee en je site laad trager, t'is misschien maar een klein verschil zou je zeggen, maar als je van de instelling blijft om .jpg files te gebruiken loopt dit toch aardig op.

Ik kan verkeerd zijn eh, maar werk eens zonder procenten, 'k weet dat IE hier soms problemen rond maakt, qua achtergrond images heb'k nooit echt probs gehad, 'k zal sebiet even iets proberen te fixen.

gefixed, denk ik. Zowel in IE als in FF krijg ik toch hetzelfde resultaat.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>walfredgeesink.nl</title>
        <style type="text/css">
            html, body { 
             height: 100%; 
            }
            body { 
             margin: auto; 
             padding: auto;
             background-image: url("pattern.jpg"); 
             background-repeat: repeat;
            }
            div#container { 
             position: absolute; 
             left: 50%; 
             margin-left: -300px; 
             width: 600px; 
             height: 100%; 
             background-color: #FFFFFF; /*maak dit gewoon zwart*/
        </style>
    </head>
    <body>
        <div id="container">&nbps;</div>
    </body>
</html>
link : http://got.zionweb.be

Ehm, klopt het dat ik nu gewoon pattern herhaald zie over de gehele achtergrond? Ik wil ook nog bg erbij hebben, he.

Verwijderd schreef op maandag 18 juli 2005 @ 10:50:
[...]

De meest simpele oplossing is een GIF gebruiken voor IE die de PNG benaderd. De meeste mensen zien het verschil toch niet.

[afbeelding]

Ja oke, maar dat is wat mij betreft ook geen optie. Ik zie toch wel duidelijk een kwaliteitsverschil.

Verwijderd schreef op maandag 18 juli 2005 @ 10:40:
http://homepage.ntlworld.com/bobosola/

je kan ook style met die ie code maken, en dan met die filter anders verneukt hij het voor ff

Nog steeds hetzelfde probleem, je bent verplicht om een img-tag te gebruiken.

[ Voor 11% gewijzigd door Verwijderd op 18-07-2005 12:55 ]

maandag 18 juli 2005 13:10

Acties:

imp4ct

Misschien moet je wat wikken en wegen, want je wilt veel

. Soms moet je gewoon je design wat aanpassen om in IE en FF goed te werken. Allé normaal kan "alles" wel, maar toch, dit gaat een beetje ver

. Je kan het wel snel oplossen denk ik moest je met tables gaan werken, maar jah dat is niet meer zo up-to-date voor velen, hoewel ik het toch nog veel gebruik, maakt soms dingen een pak makkelijker.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

maandag 18 juli 2005 13:25

Acties:

Verwijderd

Topicstarter

imp4ct schreef op maandag 18 juli 2005 @ 13:10:
Misschien moet je wat wikken en wegen, want je wilt veel . Soms moet je gewoon je design wat aanpassen om in IE en FF goed te werken. Allé normaal kan "alles" wel, maar toch, dit gaat een beetje ver . Je kan het wel snel oplossen denk ik moest je met tables gaan werken, maar jah dat is niet meer zo up-to-date voor velen, hoewel ik het toch nog veel gebruik, maakt soms dingen een pak makkelijker.

Nou, het is natuurlijk inderdaad geen zaak van leven of dood, maar het zat me dwars omdat het (vind ik dan) simpel opgelost moet kunnen worden. Ik dacht dus ook dat de oplossing redelijk simpel was, maar niet dus.

.

maandag 18 juli 2005 14:54

Acties:

Verwijderd

je kan hetzelfde filter op een css style gebruiken...

maandag 18 juli 2005 16:03

Acties:

Verwijderd

Topicstarter

Hoi, ik heb nu een goed voorbeeld gevonden van wat ik wil: http://www.woedend.nl
Daar hebben ze ook een achtergrond die overloopt in een schaduw. Ik kom er alleen niet uit hoe ze dat nou hebben gedaan...

maandag 18 juli 2005 16:26

Acties:

Jorick

Verwijderd schreef op maandag 18 juli 2005 @ 16:03:
Hoi, ik heb nu een goed voorbeeld gevonden van wat ik wil: http://www.woedend.nl
Daar hebben ze ook een achtergrond die overloopt in een schaduw. Ik kom er alleen niet uit hoe ze dat nou hebben gedaan...

Volgens mij is dit stukje van belang:

Cascading Stylesheet:

#randlinks {
    width: 20px;
    background: transparent url(../visuals/iface/bg_01_leftShad.jpg) repeat scroll top left;
}
#randrechts {
    width: 20px;
    background: transparent url(../visuals/iface/bg_01_rightShad.jpg) repeat scroll top right;
}
#midden {
    padding: 0 4px;
    vertical-align: top;
    background: #FFF url(../visuals/iface/wave.gif) no-repeat scroll bottom left;
}

Staat in de http://www.woedend.nl/css/deluxe.css. Staat als commentaar bij:
Sophisticated CSS is hidden from Netscape 4.x, Win IE 3, Win IE 4 (not 4.72), Mac IE 4.01, Mac IE 4.5, Konqueror 2.1.2, Win Amaya 5.1 */

maandag 18 juli 2005 16:37

Acties:

Verwijderd

Topicstarter

Jorick schreef op maandag 18 juli 2005 @ 16:26:
[...]

Volgens mij is dit stukje van belang:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
#randlinks {
    width: 20px;
    background: transparent url(../visuals/iface/bg_01_leftShad.jpg) repeat scroll top left;
}
#randrechts {
    width: 20px;
    background: transparent url(../visuals/iface/bg_01_rightShad.jpg) repeat scroll top right;
}
#midden {
    padding: 0 4px;
    vertical-align: top;
    background: #FFF url(../visuals/iface/wave.gif) no-repeat scroll bottom left;
}
Staat in de http://www.woedend.nl/css/deluxe.css. Staat als commentaar bij:
Sophisticated CSS is hidden from Netscape 4.x, Win IE 3, Win IE 4 (not 4.72), Mac IE 4.01, Mac IE 4.5, Konqueror 2.1.2, Win Amaya 5.1 */

Ohw, ik zie het al ja. Maar dat voorbeeld klopt tóch niet (

), want het is geen patroon-achtergrond.

maandag 18 juli 2005 22:05

Acties:

madwizard

Missionary to the word of ska

Verwijderd schreef op maandag 18 juli 2005 @ 16:37:
[...]

Ohw, ik zie het al ja. Maar dat voorbeeld klopt tóch niet (), want het is geen patroon-achtergrond.

Je kunt toch wel ongeveer hetzelfde doen, de streep-achtergrond in de divs links en rechts doen, de linkerachtergrond rechts uitlijnen, de rechterachtergrond links uitlijnen. Zo zit het patroon altijd op dezelfde manier tegen het midden aan. Dan nog het stukje met de schaduw ernaast of eroverheen.

www.madwizard.org

maandag 18 juli 2005 22:29

Acties:

sjaakaq

It might get loud

Ze hebben het heel slim gedaan

De achtergrond is zilvergrijs met een heel vaag patroontje, de schaduw is gewoon een JPG van een schaduw die overloopt in dezelfde kelur grijs van de achtergrond. Dus het sluit niet echt overal heel mooi aan, maar ja, dat ziet dus niemand

leoaq.fm // Jeune Loop

maandag 18 juli 2005 23:09

Acties:

Verwijderd

Topicstarter

madwizard schreef op maandag 18 juli 2005 @ 22:05:
[...]

Je kunt toch wel ongeveer hetzelfde doen, de streep-achtergrond in de divs links en rechts doen, de linkerachtergrond rechts uitlijnen, de rechterachtergrond links uitlijnen. Zo zit het patroon altijd op dezelfde manier tegen het midden aan. Dan nog het stukje met de schaduw ernaast of eroverheen.

Dit stukje begrijp ik niet echt; maar volgens mij blijf je altijd het aansluit-probleem houden, omdat de kans dat het patroon niet aansluit op de schaduw altijd 2 op 3 blijft.

maandag 18 juli 2005 23:30

Acties:

madwizard

Missionary to the word of ska

Ik bedoel dit:

Cascading Stylesheet:

<style>
    .left
    {
        float:left;
        width: 20%;
        background: url(pattern.jpg) top right;
    }
    .center
    {
        float:left;
        width: 600px;
        background: url(bg.jpg);
    }
    .right
    {
        float:left;
        width:20%;
        background: url(pattern.jpg) top left;
    }
</style>
<body>

    <div class='left'>
        &nbsp;
    </div>
    <div class='center'>
        &nbsp;
    </div>
    <div class='right'>
        &nbsp;
    </div>

</body>

Nu sluit alles goed aan, ondanks dat left en right van grootte veranderen als je browser resized. Alleen heb je nou het probleem om het horizontaal samen op 100% te krijgen, dat weet ik zo even niet maar kan vast wel op een of andere manier. woedend.nl doet het trouwens met tabellen, dan krijg je natuurlijk makkelijk de boel 100% breed maarja tabellen zou je eigenlijk niet moeten gebruiken.

[ Voor 31% gewijzigd door madwizard op 18-07-2005 23:33 ]

www.madwizard.org

dinsdag 19 juli 2005 12:30

Acties:

Verwijderd

Topicstarter

madwizard schreef op maandag 18 juli 2005 @ 23:30:
Ik bedoel dit:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style>
    .left
    {
        float:left;
        width: 20%;
        background: url(pattern.jpg) top right;
    }
    .center
    {
        float:left;
        width: 600px;
        background: url(bg.jpg);
    }
    .right
    {
        float:left;
        width:20%;
        background: url(pattern.jpg) top left;
    }
</style>
<body>

    <div class='left'>
        &nbsp;
    </div>
    <div class='center'>
        &nbsp;
    </div>
    <div class='right'>
        &nbsp;
    </div>

</body>
Nu sluit alles goed aan, ondanks dat left en right van grootte veranderen als je browser resized. Alleen heb je nou het probleem om het horizontaal samen op 100% te krijgen, dat weet ik zo even niet maar kan vast wel op een of andere manier. woedend.nl doet het trouwens met tabellen, dan krijg je natuurlijk makkelijk de boel 100% breed maarja tabellen zou je eigenlijk niet moeten gebruiken.

Nu zie ik het inderdaad. Dat is wel een hele slimme oplossing eigenlijk.

Heel erg bedankt!

woensdag 20 juli 2005 17:59

Acties:

Verwijderd

wat is er mis met mijn png oplossing... is ook makkelijker als je ooit eens een bg aan gaat passen, want de schaduw schijnt erdoorheen...

code:

<!--[if IE]>
   <style type="text/css">
   /*<![CDATA[*/ 
    .stijl {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/contentBg.png');
        background-image: none;
        background-repeat: repeat; 
    }
   /*]]>*/
   </style>
<![endif]-->

woensdag 20 juli 2005 19:08

Acties:

sjaakaq

It might get loud

Volgens mij werkt dit niet...ik dacht dat dat filter ("Microsoft.AlphaImageLoader" dus) alleen op <img>'s werkte, dus alleen als het in de HTML staat en van toepassing op een IMG tag, en dus niet als 't in de CSS staat en van toepassing is op een "background" tag...

Maar ik kan het fout hebben

leoaq.fm // Jeune Loop

woensdag 20 juli 2005 19:31

Acties:

Passenger

http://www.alistapart.com/articles/pngopacity/

werkt perfect!

donderdag 21 juli 2005 13:50

Acties:

Verwijderd

Je hebt het fout

leokennis schreef op woensdag 20 juli 2005 @ 19:08:
Volgens mij werkt dit niet...ik dacht dat dat filter ("Microsoft.AlphaImageLoader" dus) alleen op <img>'s werkte, dus alleen als het in de HTML staat en van toepassing op een IMG tag, en dus niet als 't in de CSS staat en van toepassing is op een "background" tag...

Maar ik kan het fout hebben

donderdag 21 juli 2005 13:57

Acties:

Wacky

Dr. Lektroluv \o/

Je kan ook met een stukje javascript transparante PNG's gebruiken in IE hoor

Nu ook met Flickr account

donderdag 21 juli 2005 14:03

Acties:

Verwijderd

Maar niet in css..

Wacky schreef op donderdag 21 juli 2005 @ 13:57:
Je kan ook met een stukje javascript transparante PNG's gebruiken in IE hoor