[CSS] Opacity & Borders

[Mopperman]

Ik ben nu bezig om mijn nieuwe website af te maken, hiervoor heb ik een divje die eigenlijk transparant moet zijn.
Nu is me dit gelukt met "opacity: 0.6;" echter gaat ook de border over in de opacity.

Op t web is er eigenlijk niets over te vinden, maar de border zal 100% zichtbaar moeten zijn.
Iemand enig idee welke mogelijkheden er zijn dit voor elkaar te krijgen?

Voor de rest werkt het toppie, dus als het niet nodig is wil ik eigenlijk ook geen "exotische" methodes gaan gebruiken...

[ Voor 15% gewijzigd door Mopperman op 28-12-2010 19:30 . Reden: typo ]

[dcm360]

Ik kan me zo snel even 2 methodes bedenken, beiden niet ideaal, maargoed:
- Een 60% transparante png als achtergrond gebruiken
- 2 div's gebruiken: 1 voor de border en de andere voor het transparante vlak

[Bosmonster]

Transparante achtergrondafbeelding of kleur gebruiken (rgba). Of een tweede element nesten die de transparante achtergrondkleur verzorgd (maar dan heb je nog het probleem met de content daarin).

Opacity op een element werkt op dat gehele element, inclusief alles erin.

Beste oplossing is natuurlijk rgba, maar dat ondersteunt niet elke browser.

[ Voor 12% gewijzigd door Bosmonster op 28-12-2010 19:37 ]

[Mopperman]

zal eens naar de png's kijken.

als ik een apparte div pak voor de borders bijv. dan gooit hij de opcaity ook daar overheen...

[mcDavid]

Mopperman schreef op dinsdag 28 december 2010 @ 19:47:


als ik een apparte div pak voor de borders bijv. dan gooit hij de opcaity ook daar overheen...

Euh, nee?

[Bosmonster]

Ligt eraan of die de div met border in die div met opacity zet

Andersom is een beter plan

[ Voor 20% gewijzigd door Bosmonster op 29-12-2010 00:34 ]

[Verwijderd]

Als je een png van 50% opacity gebruikt als achtergrond.
En de border gewoon normaal?
De tekst in een extra div plaatst die 50% opacity krijgt.

[mcDavid]

Verwijderd schreef op woensdag 29 december 2010 @ 11:29:
Als je een png van 50% opacity gebruikt als achtergrond.
En de border gewoon normaal?
De tekst in een extra div plaatst die 50% opacity krijgt.

...Dan heb je alsnog een extra div, hoef je ook dat plaatje niet meer te doen lijkt me... Of je moet de tekstkleur ook in rgba defineren. Dat kan ook gewoon in alle browsers behalve IE.

[Flowmo]

Png is op dit moment de beste optie, scheelt weer code in je markup en werkt in alle browsers (behalve IE6, maar dat beschouw ik niet als een browser ).

[OkkE]

Het hangt er af van je ontwerp en wat je wil bereiken, maar ik denk dat dit wel een mooie oplossing is:

code:

.mydiv {
    background: url('bg-mydiv.png');
    background: rgba(10,20,30,0.4);
    border: 5px solid #000;
}
.mydiv * {
    /* browser specific opacity code here */
    opacity: 0.6;
}

Zit je alleen met IE6, maar die geef je dan gewoon een solid background-color.

[R4gnax]

Flowmo schreef op woensdag 29 december 2010 @ 16:33:
Png is op dit moment de beste optie, scheelt weer code in je markup en werkt in alle browsers (behalve IE6, maar dat beschouw ik niet als een browser ).

PNG is alleen wel weer een extra request. Voor IE 6/7/8 heb je nog een andere workaround die geen plaatjes vereist, op basis v/d gradient DXImageTransform. Normaal maak je daar simpele RGB verloop tinten mee, maar een minder bekend detail is dat dit filter ook ARGB kleurwaardes accepteert.En een verloop tint van en naar dezelfde kleur is simpelweg die ene solide kleur...

Cascading Stylesheet:

.mydiv {
    background: rgba(10,20,30,0.4);
    border: 5px solid #000;
}

/* [[ Inside a conditionally included IE.css ]] */
.mydiv {
  background: none;
  position: relative; /* fix ClearType w/ DXImageTransform active */
  zoom: 1;

  /* #660a141e == rgba(10,20,30,0.4) */
  -ms-filter:progid: DXImageTransform.Microsoft.gradient(startColorstr=#660a141e,endColorstr=#660a141e);
  filter:progid: DXImageTransform.Microsoft.gradient(startColorstr=#660a141e,endColorstr=#660a141e);
}

[mcDavid]

Hey da's wel een sjieke minst lelijke oplossing inderdaad! Werkt dat ook in IE6?

-edit- Oh, dat staat er al bij...

[ Voor 18% gewijzigd door mcDavid op 29-12-2010 19:23 ]

[dB90]

Het is gewoon een keuze.. De ene oplossing zorgt voor extra elementen, de andere voor een extra request en DXImageTransform zorgt voor performance verlies. Het is maar net wat in jouw situatie belangrijk is.

[Verwijderd]

een mooi voorbeeld hier is een website die ik heb gemaakt.
http://freedomofstudents.nl

hier heb ik een div met een PNG background die een witte border heeft (en een schaduw)
is dit wat je zoekt?

[ZpAz]

dB90 schreef op donderdag 30 december 2010 @ 01:05:
Het is gewoon een keuze.. De ene oplossing zorgt voor extra elementen, de andere voor een extra request en DXImageTransform zorgt voor performance verlies. Het is maar net wat in jouw situatie belangrijk is.

Om die PNG te fixen in IE6 heb je zo en zo al DXImageTransform nodig, dus voor IE6 kan het nog wel een betere oplossing zijn. Hoewel DXImageTransform soms andere bugs met zich meebrengt. (Niet aan te klikken hyperlinks enzo)

[Bosmonster]

Voor IE6 is het beter dan in een losse stylesheet gewoon een vaste kleur te gebruiken, of gewoon de PNG fout te laten renderen (over het algemeen zal die dat doen als vaste kleur). Met DX gaan zitten prutsen om iets in IE6 goed te krijgen met PNG's is een klein drama en nergens voor nodig.

zo en zo?

[ Voor 13% gewijzigd door Bosmonster op 03-01-2011 10:49 ]