Archief - Sliding doors met transparante png

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

Bram

Legacy Member
Hullo

Ik ben bezig aan een navigatie en zou willen gebruiken maken van sliding doors (1 sprite met verschillende states voor de knoppen, die breed genoeg voorzien is).

Nu gebruikte ik volgende code

Code:
<ul>
    <li><a><span>tekst</span></a></li>
</ul>

En dan als html
Code:
nav li a {
	display: block;
	background: url('../images/buttons.png') top left;
	padding: 0 0 0 0.7em 
}
nav li a span {
	display: block;
	line-height: 33px;
	background: url('../images/buttons.png') top right;
	padding: 0 0.7em 0 0
}
Het probleem is: m'n buttons maken gebruik van transparantie. Sliding doors heeft z'n naam niet gestolen en de 2 achtergrondafbeeldingen overlappen dus, waardoor de schaduwen dus donkerder zijn in de overlap.

Iemand die dat probleem herkent en hier reeds een elegante oplossing voor gevonden heeft? Ik ben momenteel zelf iets aan het samenhacken, maar proper is het niet, so far.

Wel al oplossingen gevonden met 2 images, maar daar ben ik ook niet onmiddellijk fan van. Die oplossing gebruikt ook pixels, terwijl ik em's gebruik (enfin, niet dat dat zo'n grote hindernis is).

Zero Grav

Legacy Member
Sliding doors overlappen toch niet, die verplaatsen zich zodat een andere afbeelding zichtbaar wordt. http://labs.chezfre.be/mouseover-met-1-afbeelding/ Bij u moet gewoon die span niet verplaatst worden zoals in dit voorbeeld.

Bij u is het geen sliding doors maar gewoon layeren wat ge doet. Ge verplaatst de afbeelding namelijk niet, maar ge legt er een span over met een andere state.

Dastardly

Legacy Member
geen mogelijkheid om die li als bg die shade te geven en die weg te doen bij uw sliding images ?

ik gebruik altijd 3 images bij tabs of andere zaken met ronde hoeken. gewoon links rechts de hoekjes en 't midden een standaard kleur of andere image als er wat verloop in zit.

voordeel aan die 3 images is dat je ook met een schuinere slagschaduw kan werken itt enkel die loodrechte die je nu moet gebruiken.

Bram

Legacy Member
Dastardly zei:
geen mogelijkheid om die li als bg die shade te geven en die weg te doen bij uw sliding images ?

ik gebruik altijd 3 images bij tabs of andere zaken met ronde hoeken. gewoon links rechts de hoekjes en 't midden een standaard kleur of andere image als er wat verloop in zit.

voordeel aan die 3 images is dat je ook met een schuinere slagschaduw kan werken itt enkel die loodrechte die je nu moet gebruiken.

Beetje scrhik da als ik het zo doe, het niemer in elke browser gelijk gaat zijn. Ma kga het idd gewoon opsplitsen in meerdere afbeeldingen en gewoon met een sprite werken. Da ik ton mee pixels moe werken, fuck it.

Heb je ergens een voorbeeldje van jouw werkwijze online staan?

Bram

Legacy Member
Merci voor de bump :p Ondertussen werkende gekregen. Gewoon buttons opgekapt in de sprite. Nav wordt nu toch al correct weergegeven.

Ik ben eens aant proberen werken met 960.gs, iedereen is altijd zo lovend over CSS grid frameworks, maar ik heb het gevoel dat m'n HTML allemaal meer gecluttered wordt en ik niet de controle heb die ik wil. Waarschijnlijk ditch ik het framework en schrijf ik wel wat meer eigen CSS.

Ik vind die HTML5 boilerplate dan wel weer cool. Enorm handig wat er allemaal bij zit :D

Spacy2003

Legacy Member
border-top-left-radius:5px en border-top-right-radius:5px; (of border-radius in het algemeen als je geen speciale hoeken target) kan ook een grote hulp zijn. In combinatie met CSS3 gradients ben je helemaal klaar voor de toekomst.

Is er een speciale reden waarom je dit niet gebruikt?

Dastardly

Legacy Member
Bram zei:
Beetje scrhik da als ik het zo doe, het niemer in elke browser gelijk gaat zijn. Ma kga het idd gewoon opsplitsen in meerdere afbeeldingen en gewoon met een sprite werken. Da ik ton mee pixels moe werken, fuck it.

Heb je ergens een voorbeeldje van jouw werkwijze online staan?

ja, kan het helaas niet laten zien want dan gaan er wat mensen kwaad zijn :p

kort voorbeeldje :

Code:
<div class="Wrapper">
   <div class="Left"></div>
   <div class="Middle"></div>
   <div class="Right"></div>
</div>

^ is de HTML structuur, de div met klasse Middle is ook diegene waar ik mijn content in zet (tekst van menu-item of wat dan ook).

Code:
.Wrapper { width:X; height:X; background-color:#FFF; }
.Wrapper .Left { float:left; width:X; height:X; background:X; }
.Wrapper .Middle { float:left; }
.Wrapper .Right { float:right; width:X; height:X; background:X; }

geen idee of dit dé manier is om dit te doen, maar ik weet dat het werkt in alle browsers en in >= IE7 (wij zijn gestopt met IE6 ondersteuning onlangs).

ik weet dat veel mensen niet graag elementen floaten, maar ik zie geen nadelen zoals in dit voorbeeld als de container rond die items netjes gepositioneerd staat.

Bram

Legacy Member
Spacy2003 zei:
border-top-left-radius:5px en border-top-right-radius:5px; (of border-radius in het algemeen als je geen speciale hoeken target) kan ook een grote hulp zijn. In combinatie met CSS3 gradients ben je helemaal klaar voor de toekomst.

Is er een speciale reden waarom je dit niet gebruikt?
Grootste deel van ons publiek zit op IE7 en 8 (60%), de nieuwe homepage moet modern zijn, maar ook goed weergegeven worden in elke browser. Liever m'n sprite wat verdelen en meteen alles goed hebben in elke browser, dan prutsen met niet ondersteunde css.
DieselPower zei:
Wat is er zo grappig?

DieselPower

Legacy Member
Spacy2003 is zo grappig, er van uit gaan dat iedereen de nieuwste browser gebruikt is gewoon erg naief. Ge zijt immers goed bezig, maak u maar geen zorgen :)

Zero Grav

Legacy Member
Spacy2003 gaat er niet vanuit dat iedereen de nieuwste browser gebruikt. Waar hij wel vanuit gaat is dat mensen die dat niet doen ook zelf de keuze (al dan niet bewust) maken om ook niet te genieten van de nieuwste features of de best mogelijke opmaak.

Het ergste dat gebeurt bij een browser zoals Internet Explorer 8 bij het gebruik van border-radius is dat de gebruiker rechte hoeken krijgt. En dan stel ik me ook de vraag in welke mate de gemiddelde gebruiker echt het verschil zal opmerken tussen rounded en rechte hoeken.

Ik zal er alleszins de moeite niet meer voor nemen om in persoonlijke projecten met allemaal tijdrovende technieken iets te bouwen dat perfect op veel minder tijd mogelijk is met code in nieuwe browsers en nog steeds mooi, doch iets minder mooi, rendert in verouderde browsers.

DieselPower

Legacy Member
Geloof mij, geen border radius + schadow + gradient, dat valt enorm op. En mensen zijn enerzijds idioten en anderzijds vaak gebonden aan de resources van hun bedrijf. Alsof Jan met de pet ook maar enig benul heeft van html5/css3. Ik zou zelfs geloven dat mensen eerder van browser ruilen om securityredenen dan om de nieuwste features te hebben. IE9 schijnt best goed te zijn trouwens :p

Over tijd valt te praten, IE tijd gaat evenzeer van een budget af.

Spacy2003

Legacy Member
Ik stel me gewoon de vraag, is het de moeite.
Als je het artikel van a list apart bekijkt dateert deze van 2003, dan stel ik me toch een aantal vragen, op zich is er niets mis met deze techniek maar is er dan geen enkele vooruitgang sinds toen?

Als we allemaal gaan redeneren dat alles pixel perfect moet zijn in alle browsers vrees ik dat het de vooruitgang een beetje belemmerd.

Aan de andere kant, client = king.

Just my 2 cents.

Bram

Legacy Member
Zero Grav zei:
Ik zal er alleszins de moeite niet meer voor nemen om in persoonlijke projecten met allemaal tijdrovende technieken iets te bouwen dat perfect op veel minder tijd mogelijk is met code in nieuwe browsers en nog steeds mooi, doch iets minder mooi, rendert in verouderde browsers.
Ik ook niet, maar dit is voor m'n werk. We gaan om met scholen. In het secundair valt alles wel nog mee en de meeste scholen (op buso na) hebben vaak wel de kennis en het budget om dingen up te date te houden. Ga je echter naar het lager of het kleuter, dan begint het al wat triestiger te worden.

Even wat statistieken:
- 48 % van onze gebruikers gebruikt Windows XP
- 23,87 % heeft een schermresolutie van 1024*768
- Flash versie 5 en 6 komen nog voor
- 60 % gebruikt IE, waarvan 25 % nog versie 7

Ik geloof dat de meesten ondertussen begrijpen dat designer voor mij niet het meest lolligste ter wereld is :p Enfin, hier en daar zit er wel een folietje in hoor, en ik gebruik ook wel wat border-radius hier en daar, maar dat gaat om accenten.

M'n nieuwe collega deed in het begin ook z'n best om alles mee div'kes en ul's te doen. Ondertussen heeft hem het al afgeleerd en grijpen wij vrolijk terug naar tables (enfin, waar verantwoord, de layout zelf is wel redelijk geoptimaliseerd).

-BVR-

Legacy Member
Hmm, n/o maar je gaat designen in tables en je noemt jezelf webdesigner... Dat terwijl anderen er zo veel moeite in steken.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan