[CSS] Border met dubbel "shaduw" effect

[posttoast]

Ik zit hier fijn een beetje te CSSen en loop tegen een probleempje aan. Direct even een plaatje om te laten zien wat ik wil:



Heel simpel dus: een image met 2 "shaduwrandjes" eromheen. Nou ja, simpel; ik zou eigenlijk niet weten hoe ik dit op een nette manier (dus zonder allerhande overbodige HTML elementen en eventueel zelfs vieze JS trucs) op kan lossen. Om het plaatje heen staat een <a>, dus die kan op zich prima ge- of misbruikt worden.

Ik heb al van alles geprobeerd met borders, outlines en backgrounds, en ik kom op zich een heel eind op deze manier:

Cascading Stylesheet:

img{
  padding-right: 4px;
  padding-bottom: 4px;
  background: #97928c;
  border-right: 4px solid #595552;
  border-bottom: 4px solid #595552;
}

Maar de oplettende lezer ziet natuurlijk direct dat dit niet gaat werken, omdat de borders een stukje in moeten springen.

Belangrijk detail in deze puzzel is dat de formaten van de afbeelding variabel zijn (ja, anders was het makkelijk geweest natuurlijk he ).

Wie kan mij een stukje verder helpen?

[mithras]

Met css3: gebruik dropshadow en met pseudo-element :after voeg je nogmaals een dropshadow toe

Maar dat staat of valt met support van browsers

[posttoast]

Hmmm, helemaal geen gek idee eigenlijk. Voor de minder intelligente browsers maak ik wel een alternatief dat er minder mooi uit ziet. Ik kom er alleen niet uit met het psuedo-element. Want dit zou moeten werken toch?

Cascading Stylesheet:

img{
  -moz-box-shadow: 4px 4px 0 #97928c;
}

img:after{
  -moz-box-shadow: 8px 8px 0 #595552;
}

(ik pak hier alleen even de Mozilla-CSS-codes, ik realiseer me dat dit niet in andere browsers gaat werken).
Hij toont nu alleen maar de eerste dropshadow, namelijk degene die ik definieer bij img. Die van img:after wordt niet gepakt!

[RedStar85]

Je zou ook met <DIV> elementen kunnen werken...

html:
<DIV ID="DIV1"></DIV>
<DIV ID="DIV2"></DIV>
css:
#DIV1{
background: #595552;
width: 20px;
height: 20px;
position: absolute;
margin-top: 0px;
margin-left: 0px;
z-index: 1;
}

#DIV2{
background: #97928c;
width: 20px;
height: 20px;
position: absolute;
margin-top: 4px;
margin-left: 4px;
z-index: 0;
}

Je hebt dan alleen de vlakken en dan zul je zelf een oplossing moeten vinden voor het plaatje (en de daarbij behorende variabele groottes)

[posttoast]

Ja, maar dan doe ik dus iets wat ik niet wil: extra elementen toevoegen zonder semantische waarde. En bovendien moet ik dan op de een of andere manier de maten van die <div>'s aanpassen, waarschijnlijk met een javascript. Dat vind ik allemaal een beetje vies

[mithras]

posttoast schreef op vrijdag 15 oktober 2010 @ 20:56:
Hmmm, helemaal geen gek idee eigenlijk. Voor de minder intelligente browsers maak ik wel een alternatief dat er minder mooi uit ziet. Ik kom er alleen niet uit met het psuedo-element. Want dit zou moeten werken toch?

Cascading Stylesheet:

img{
  -moz-box-shadow: 4px 4px 0 #97928c;
}

img:after{
  -moz-box-shadow: 8px 8px 0 #595552;
}

(ik pak hier alleen even de Mozilla-CSS-codes, ik realiseer me dat dit niet in andere browsers gaat werken).
Hij toont nu alleen maar de eerste dropshadow, namelijk degene die ik definieer bij img. Die van img:after wordt niet gepakt!

Lege elementen (ook gecreëerd door pseudo elementen) worden afaik niet gerendered wanneer ze leeg zijn. Een aanvulling met:

Cascading Stylesheet:

img:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  visibility: hidden;
}

Zou het op moet lossen.

[RedStar85]

Helemaal juist maar ik dacht ik gooi even een balletje op.

Good luck!

[posttoast]

RedStar85 schreef op vrijdag 15 oktober 2010 @ 21:02:
Helemaal juist maar ik dacht ik gooi even een balletje op.

Good luck!

Dank je wel

mithras schreef op vrijdag 15 oktober 2010 @ 21:02:
[...]
Lege elementen (ook gecreëerd door pseudo elementen) worden afaik niet gerendered wanneer ze leeg zijn. Een aanvulling met:

Cascading Stylesheet:

img:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  visibility: hidden;
}

Zou het op moet lossen.

Heel vreemd, maar ook dat werkt niet. Zelfs niet als ik de visibility: hidden en de font-size weg haal.

Het lijkt wel alsof de :after pseudo-class sowieso niet werkt op <img>'s.

[ Voor 22% gewijzigd door posttoast op 15-10-2010 21:10 ]

[X-Lars]

De img:after selector blijkt inderdaad niet altijd goed geimplementeerd door browsers: [google=img after]

Maar je had juist nog een container element beschikbaar, dus het kan zonder psuedo selectors trickery:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Anchored image with double-border</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
            a {
                -moz-box-shadow: 8px 8px 0 green;
                display:inline-block;
                font-size:0;
            }
            img {
                border:none;
                -moz-box-shadow: 4px 4px 0 blue;
                background-color:red;
            }
        </style>
    </head>
    <body>
        <a href="#">
            <img src="dummy.gif"/>
        </a>
    </body>
</html>

[posttoast]

Yes, dat is hem hoor! Ik had zelf ook al wat geklooid met die a, maar kwam er niet uit. De inline-block bleek de magische oplossing. Heel veel dank

Nu nog even zorgen dat het er in de fossielere browsers ook nog een beetje uit ziet, maar dat komt wel goed.

[Bosmonster]

posttoast schreef op zaterdag 16 oktober 2010 @ 11:22:

Nu nog even zorgen dat het er in de fossielere browsers ook nog een beetje uit ziet, maar dat komt wel goed.

Dat strookt niet helemaal met CSS3 middels progressive enhancement.

De afbeelding is functioneel, de schaduwen een extra. De afbeelding alleen lijkt me genoeg voor oudere browsers.

[posttoast]

Bosmonster schreef op zaterdag 16 oktober 2010 @ 13:48:
[...]


Dat strookt niet helemaal met CSS3 middels progressive enhancement.

De afbeelding is functioneel, de schaduwen een extra. De afbeelding alleen lijkt me genoeg voor oudere browsers.

Ja, in een ideale wereld heb je gelijk. Maar helaas kan ik een opdrachtgever daar niet altijd van overtuigen. Dus is het zo dat ik, middels conditional comments, een aparte IE6 en IE7 stylesheet heb. Maar die kan ik dus prima gebruiken om middels een filter (ongeveer) hetzelfde effect te bereiken.

Allemaal niet fantastisch, maar ik houd mijn basis CSS schoon van allerhande IE-hacks en kan toch zorgen dat ook zij die niet upgraden (vaak ongewenst, denk aan medewerkers van grote bedrijven) nog een enigszins fatsoenlijke websitebeleving hebben.

[X-Lars]

posttoast schreef op zaterdag 16 oktober 2010 @ 18:02:
[...] een enigszins fatsoenlijke websitebeleving hebben.

Het is natuurlijk wat off-topic, maar het is wat mij betreft altijd vrij lastig om dat ideale punt te bepalen. Vergeet niet dat je van een toch al tragere browser ook nog extra downloads en processing gaat verlangen voor wat optische verfraaiingen. En ik denk dat juist de mensen waar jij het over hebt over het algemeen al blij zijn dat de website goed functioneert, dus dat dan het liefst zo soepel mogelijk.

[posttoast]

X-Lars schreef op zaterdag 16 oktober 2010 @ 18:16:
[...]


Het is natuurlijk wat off-topic, maar het is wat mij betreft altijd vrij lastig om dat ideale punt te bepalen. Vergeet niet dat je van een toch al tragere browser ook nog extra downloads en processing gaat verlangen voor wat optische verfraaiingen. En ik denk dat juist de mensen waar jij het over hebt over het algemeen al blij zijn dat de website goed functioneert, dus dat dan het liefst zo soepel mogelijk.

Mee eens. Ik leg in mijn offertes de grens altijd bij IE7. In IE6 moet het functioneel zijn, maar "mooi" is niet zo relevant. Tenzij de klant expliciet aangeeft dat het er ook in IE6 "redelijk" uit moet zien. En dan zijn dit soort oplossingen natuurlijk redelijk simpel te realiseren.

[Bosmonster]

Zoals Dan Rubin zei over dit onderwerp, leg het je opdrachtgever uit hoe internet anno 2010 werkt (CSS3 en progressive enhancement dus) en dat het nooit ten koste gaat van functionaliteit.

Het scheelt de klant ook tijd en geld in ontwikkeling.

[posttoast]

Bosmonster schreef op zaterdag 16 oktober 2010 @ 18:46:
Zoals Dan Rubin zei over dit onderwerp, leg het je opdrachtgever uit hoe internet anno 2010 werkt (CSS3 en progressive enhancement dus) en dat het nooit ten koste gaat van functionaliteit.

Het scheelt de klant ook tijd en geld in ontwikkeling.

Geloof me, dat doe ik ook echt wel. Maar soms houdt iemand voet bij stuk en dan is het voor mij gewoon: wie betaald, bepaald. Voorbeeldje: ik heb hiervoor bij het buro gewerkt dat de website voor Albert Heijn maakt. Heel Ahold zit nog met IE6 te werken. Dan kun je met nog zulke goede argumenten komen, als de directie van zo'n bedrijf de eigen site bekijkt moet het er gewoon uitzien zoals in het ontwerp.

In dit concrete voorbeeld: box-shadow wordt zelfs nog niet door IE8 ondersteunt. Dat zou dus betekenen dat geen enkele IE gebruiker (op de enkeling met IE9 beta na) de site ziet zoals in het ontwerp. Dat kan ik gewoon niet verkopen, en al helemaal niet als het met een relatief eenvoudige handeling te verhelpen is.

Natuurlijk is progressive enhancement heel erg mooi, en natuurlijk wil je vooruitstrevend te werk gaan. Maar soms moet je gewoon even pragmatisch zijn.

Nog een ander voorbeeld (helemaal offtopic, maar ik vind het wel een interessante discussie, dus ik hoop dat het OK is): het gebruik van target="_blank" in hyperlinks. Ik heb er een bloedhekel aan, ben absoluut tegen het gebruik ervan. Maar bijna iedere klant zeurt er over als er een link naar een externe pagina op de site staat die niet in een nieuw venster opent. Dan probeer ik de klant er van te overtuigen dat dit toch echt de betere manier is (hier wordt het allemaal duidelijk en helder uiteen gezet), maar er zitten altijd klanten bij die stug vol blijven houden. Tja, wat moet je in zo'n geval doen? Mijn motto is in dat geval: "pick your battles" en ik laat het maar varen. Uiteindelijk wil ik toch dat de klant aan het eind van het project gewoon mijn factuur betaalt.

Edit: Oh, de ironie. GoT opent blijkbaar links naar externe pagina's ook in een nieuw venster...

[ Voor 27% gewijzigd door posttoast op 16-10-2010 19:07 ]

[Bosmonster]

Ik heb het ook niet over IE6, dat is een verhaal apart. Ik heb het over het gebruik van CSS3.

Je moet je werkwijze en communciatie daar ook op aanpassen. Persoonlijk heb ik nog geen enkele keer meegemaakt dat een klant het niet snapt, MITS je het goed uitlegt. Of wat ook gebeurt bij sommige klanten, waarvan we toch weten dat ze het verschil niet zien, het gewoon doen.

Daarnaast moet je dus iets meer oppassen met het presenteren van kant-en-klare designs.

Ik denk dat als een klant "stug vol blijft houden" en je het al hebt over "battles", dat er iets schort aan je manier van communiceren. Bovendien is het alternatief heel makkelijk. Dan krijgt niemand die extra features, of de offerte gaat omhoog. M.a.w. het is van belang dat het vanaf het begin al duidelijk gecommuniceerd wordt.

Het is belangrijk dat de klant weet dat uiteindelijk iedereen, klant (tijd/geld/performance/kwaliteit) EN bezoeker (gebruikservaring/looks), er beter van wordt.

[ Voor 14% gewijzigd door Bosmonster op 16-10-2010 19:28 ]

[posttoast]

Bosmonster schreef op zaterdag 16 oktober 2010 @ 19:26:
Ik heb het ook niet over IE6, dat is een verhaal apart. Ik heb het over het gebruik van CSS3.

Je moet je werkwijze en communciatie daar ook op aanpassen. Persoonlijk heb ik nog geen enkele keer meegemaakt dat een klant het niet snapt, MITS je het goed uitlegt. Of wat ook gebeurt bij sommige klanten, waarvan we toch weten dat ze het verschil niet zien, het gewoon doen.

Daarnaast moet je dus iets meer oppassen met het presenteren van kant-en-klare designs.

Ik denk dat als een klant "stug vol blijft houden" en je het al hebt over "battles", dat er iets schort aan je manier van communiceren. Bovendien is het alternatief heel makkelijk. Dan krijgt niemand die extra features, of de offerte gaat omhoog. M.a.w. het is van belang dat het vanaf het begin al duidelijk gecommuniceerd wordt.

Wat je zegt over die offerte: dat klopt. Als de klant wil dat het er allemaal in alle browser identiek uitziet, dan wordt daar voor geoffreerd en betaald.

Wat betreft het presenteren van kant-en-klare designs: ja, dat is een lastige. Het vereist in de wereld waarin ik vooral werk (samen met ontwerpers die zelf niet HTMLen en CSSen) best een andere manier van denken dan men nu gewend is. Maar ik ben absoluut met je eens dat je er bijna niet meer onderuit kan om het op die manier aan te pakken. Als je dat niet doet kun je gewoon niet gebruik maken van de nieuwste mogelijkheden en blijf je stil staan. En daar wordt niemand beter van.

Overigens valt het met mijn communicatie wel mee hoor (voor zover ik dat zelf kan zeggen natuurlijk). Ik heb zelden ruzie met mijn klanten Mijn opmerking over "battles" was natuurlijk een beetje gechargeerd. Het gaat er gewoon om dat sommige klanten heel eigenwijs zijn en op zich mogen ze dat ook van mij. Zo lang ze er maar voor betalen. En uiteindelijk moet ik zelf wel achter het product staan. En dat lukt tot nu toe prima gelukkig

[moozzuzz]

posttoast schreef op zaterdag 16 oktober 2010 @ 18:02:
(vaak ongewenst, denk aan medewerkers van grote bedrijven)hebben.

Merci!

offtopic:
Onze leverancier van online-reisbook-software (KDS; een webapp dus) informeerde ons vorige week dat ze vanaf nu langzaam aan support voor IE6x gaan afbouwen. Reactie van onze IT: IE6 wordt zeker niet voor mid 2011 geupgrade . Dit even melden ter uiting van frustratie. Wereldwijde stats binnen het bedrijf: 68% IE6, 20% IE7, 5% IE8, 5% FF, 2% Chrome. Alternatieven bestaan dus binnen ons bedrijf maar...

[ Voor 4% gewijzigd door moozzuzz op 18-10-2010 09:43 ]

[geert1]

mithras schreef op vrijdag 15 oktober 2010 @ 21:02:
Lege elementen (ook gecreëerd door pseudo elementen) worden afaik niet gerendered wanneer ze leeg zijn. Een aanvulling met:

Cascading Stylesheet:

img:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  visibility: hidden;
}

Zou het op moet lossen.

Stel dat je nu toch de pseudo-selector :after wilt gebruiken, dan zit volgens mij de fout in bovenstaande code erin dat de hoogte op nul staat (dan zou de dropshadow ook geen hoogte krijgen namelijk). Ik vermoed dat dit aangemaakte element een zelfde hoogte en breedte zou moeten krijgen als het "echte" element, en bijvoorbeeld met position: absolute ook dezelfde positie zou moeten krijgen (of iets naar rechts en naar onder). Dan via z-index het aangemaakte element achter het "echte" element plaatsen, en er een dropshadow op zetten. Een dropshadow is dan misschien zelfs niet nodig, je kunt ook het element zelf wat verder naar rechts en naar onderen verplaatsen en voorzien van een background-color. Dan fungeert het aangemaakte element zelf als dropshadow van het "echte" element.

Dit alles is hier niet nodig, maar zo zou het wel ongeveer moeten werken denk ik. Interessante mogelijkheden die :after biedt, en al vrij breed inzetbaar op dit moment, aangezien ie7+ het ondersteunt (de :after-selector dan, niet de dropshadow via css3).

[OkkE]

Niet het hele topic gelezen hoor, maar waarom dit oplossen via een extra :after, terwijl je ook gewoon meerdere box-shadows op één element kunt zetten?

.

Cascading Stylesheet:

-moz-box-shadow: 8px 8px 0 green, 16px 16px 0px red;

[posttoast]

Hey, ik wist niet dat je meerdere shadows kon plaatsen. Zometeen even testen, dank!