1 tekst dubbel tonen

Status
Niet open voor verdere reacties.

ecross

Gebruiker
Lid geworden
4 mrt 2009
Berichten
638
hallo,
ik had het idee om een 3d website te maken (voor zo'n brilletje) en ik heb wat gelezen en hier komt het kort op neer:
de zelfde tekst (of afbeelding) word 2 keer laten zien maar de ene iets naast de ander en in een andere kleur.
dus omdat ik geen afbeeldingen wil gebruiken en ook niet alle tekst dubbel wil typen heb ik de volgende vraag:

hoe kun je 1 tekst dubbel weergeven, de ene iets naar rechts ten opzichte van de ander en de ene rood en de ander cyaan (of blauw)?

ik ben zelf niet zo goed in css dus ik hoop dat julie mij kunnen helpen.
 
Wellicht is het voor bijvoorbeeld een tekst wel te doen, door twee div's absolute te positioneren, de één een stukje naar rechts t.o.v. de ander, en met JavaScript de inhoud van de ene div naar de andere div te kopieren.

De kleuren, rood en cyaan, leg je dan gewoon in de CSS vast.
 
daar dacht ik zelf ook aan. en dat kan ik zelf ook maken.
maar ik vond het wel de moeite waard om te kijken of er ook een andere oplossing was.
 
Ja, die twee <div>'s was ik ook mee bezig: voorbeeldje was al bijna klaar toen ik plots onverklaarbaar niet meer kon uploaden. :confused:
Mijn idee was het te doen met het 2x oproepen van dezelfde php-include, waarin dan de tekst enz. zit. Dan hoeft die ook maar 1x aangemaakt te worden. Dat werkt, maar het voorbeeld moet dus nog even wachten.

Wordt vervolgd!
CSShunter

[Edit]
Met css kan het (nog) niet goed cross-browser gedaan worden.
In deze draad zit Goeroeboeroe's verklaring met link naar voorbeelden van de pure css-methode.[/edit]
 
Laatst bewerkt:
Yeps,
Gelukkig had ik nog een reserve-site om dingetjes op te parkeren:
[Edit]Maar intussen doet ie 't weer; links aangepast[/edit]
Ben benieuwd wat er gebeurt met "4. More shadowed text", als je je 3D brilletje opzet! :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
jaah, dit ziet er goed uit,
jammer dat er geen css manier is om een schaduw te maken met 1 tekst (je snapt wel dat ik niet een include bedoel) maar dit werkt ook prima.
bedankt
 
Geen extra extern bestand met de tekst nodig, en eigenlijk wel zo snel ! :)
Het enige is, dat bezoekers met uitgeschakeld javascript de schaduwen moeten missen.

Met vriendelijke groet,
CSShunter
 
nog maals bedankt!
maar is het de moeite waard om te checken of javascript aan staat en zo niet het include script te gebruiken of word het daar niet veel sneller op?
 
Hoi ecross,
is het de moeite waard om te checken of javascript aan staat en zo niet het include script te gebruiken of word het daar niet veel sneller op?
Goeie vraag, daar heb ik voor een ander doel ook al eens vre-se-lijk-erg-hevig op zitten broeden: dat zou heel mooi zijn, als dat kon. Maar met mijn kennis & slimheid (voor zover aanwezig) kwam ik tot de conclusie ... :shocked:
Ik denk dat het niet kan, want als je alles op één pagina wilt zetten (zowel de javascript-aanroep als de php-aanroep) dan lukt het niet:
  • Met een <noscript>tag kan je de php-include niet alléén laten verschijnen als javascript uit staat. De php-include wordt altijd gedownload, want voordat de browser bij de bezoeker kan kijken of javascript aan of uit staat, heeft de server al de include ingebakken en meegestuurd.
    Zie dit voorbeeld: no-noscript.

  • Met "uitzetten van de div van de include" met css, via { display: none; }, gaat het ook niet; dus dan kan je ook niet al/niet met javascript die div alsnog oproepen.
    Zie dit voorbeeld: no css.
De enige manier die ik kan verzinnen, is een vooraf-pagina te maken, die bekijkt of javascript aan staat. Zo ja, dan wordt doorgeschakeld naar een htm-pagina met de javascript-variant (zonder de php-include). En zo nee, dan wordt doorgeschakeld naar de php-variant met de include erin.
Nadeel is dan dat je:
  • een opsplitspagina extra moet maken,
  • een script-variant pagina moet maken,
  • een php-variant pagina moet maken,
  • en ook nog het aparte php-include fragment.
Behalve veel werk, betekent dit ook nog:
  • de opsplitspagina moet zo kort mogelijk zijn, en mag geen inhoud hebben;
  • en zal daarom niet erg hoog in zoekmachines scoren;
  • maar de opsplitspagina is de "link-pagina" zowel voor intern als voor extern gebruik;
  • en de twee varianten van de vervolgpagina (met de zoekmachine-gevoelige content) moeten juist geen indexering krijgen, want je mag er niet direct naar toe.
Al met al: opsplitsen lijkt me geen werkbare oplossing.
Dan lijkt me de javascript-variant het beste: die werkt clientside, terwijl de php-variant eerst de include moet ophalen, en dan een groter bestand naar de bezoeker moet sturen. En meer werk voor de fabricage betekent.

Meer mogelijkheden kan ik niet bedenken. Wie het weet mag het zeggen! ;)

Met vriendelijke groet,
CSShunter

PS: kunnen we ook eens een 3D resultaat zien? Ga ik wel een brilletje kopen!
 
ik heb nu eindelijk mij 3d bril binnen en ik ben er achter gekomen dat het nog niet goed is.
behalve dat de tekst 2 keer getoond moet worden moet de overlapte tekst ook een andere kleur krijgen (bij zwarte tekst: zwart).
al je een voorbeeld wilt hoe de tekst er wel uit moet komen te zien kun je even hier kijken

ik denk dat dit een heel stuk moeilijker word maar alvast bedankt
 
Als ik het goed begrijp zou de tekst twee keer vlak naast elkaar moeten komen, maar dan in een verschillende kleur. Is in dat geval text-shadow (css3) niets? Dit werkt in Firefox vanaf 3.1, Opera, Safari en Google Chrome. Voor IE 6 en hoger kun je 'n filter gebruiken.
Je hoeft dan de tekst maar één keer te typen. En voor de 'schaduw' kun je ook 'n andere kleur gebruiken, afstand bepalen, enz.
Hier staat 'n uitgebreid voorbeeld:
http://www.css-voorbeelden.nl/schaduw/schaduw-070.html
Je kunt 't ook downloaden en gewoon de broncode bekijken. Lees alleen wel even de Bekende problemen, als het wat zou zijn, want het is mogelijk om op deze manier tekst volledig onzichtbaar te maken.

Edit: je voorbeeld even bekeken, had ik over het hoofd gezien. Volgens mij moet dit mogelijk zijn met text-shadow en 'n soortgelijk filter voor IE.
 
Laatst bewerkt:
kan text-shadow dan ook waar het overlapt nog een andere kleur geven,
ik wil namelijk de gewone text cyaan de schaduw rood en waar het over elkaar zit zwart
zoals dit:
ecross_3d.jpg
 
Ach, dat had ik niet gezien. Nee, dat kan niet. Jammer, had je veel werk gescheeld!
Heb nog even gekeken of text-shadow te combineren is met rgba(), maar dan zie je helemaal niets. Dat is wel heel ontspannend, maar niet helemaal de bedoeling, vrees ik...
 
Hoi,
Ik denk dat het wel een beetje kan in html met css, screenshot:

aaarrg3D_cyan-red.gif

Dit is bereikt door één van de twee tekstkleuren (hier het rood gebruikt) een transparantie mee te geven: { opacity: .5; }.
Het tragische is, dat je de donkerder overlapping alleen maar kunt bereiken met transparantie, terwijl het rood naast de overlapping eigenlijk gewoon 100% niet-transparant moet zijn. Dat kan niet tegelijk!
Maar misschien is het voldoende is om genoegen te nemen met wat fletse tinten?
  • Anders zou er een misschien bedreven scriptoloog aan te pas moeten komen die iets bedenkt om met javascript het 3D gedeelte pixel voor pixel op het scherm af te tasten, waarna elke mengkleur-pixel omgezet wordt naar knalzwart, en elke roze pixel omgezet wordt naar fel rood. Maar of een pagina dan door de vertraging (het script moet nadenken) nog binnen redelijke tijd getoond kan worden, weet ik niet.
Met vriendelijke groet,
CSShunter

PS:
Dat was even geleden, toen Pukkie Planta met z'n 3D brilletje boekjes uitdeelde bij de margarine. ;)
 
je voorbeeld is goed!
kun je het script daarvan posten
en werkt het in alle browsers?

ik had ook nog deze website gevonden, ik wist wel dat ik niet de eerste was die op het idee kwam, hier bij is de tekst op 'beeld niveau' en de achtergrond ' verder weg' en de uitspringende kopjes gewoon plaatjes
 
Hoi Ecross,
Ik was je zeker niet vergeten!
Het antwoord moet zijn, eh, ja & nee...:confused:

Toevallig ben ik namelijk "op de achtergrond" (tussen andere werkzaamheden door) een artikel aan het schrijven over dubbel-teksten en wat daarvoor de (on)mogelijkheden zijn. Daarvoor ben ik ook diverse test-experimenten aan het uitvoeren: 't is nog niet af, maar ik heb goede hoop dat het gaat lukken.
Maar jammer genoeg mag ik niets vrijgeven voordat het artikel gepubliceerd is. En omdat het tussendoor moet (gelukkig voor mij: zonder deadline), kan ik ook geen moment aangeven waarop het beschikbaar komt.
Maar als het klaar is, zal ik hier zeker de link neerzetten.
( Misschien had ik beter niks kunnen zeggen, maar ik kon natuurlijk mijn mond niet houden toen ik je vraag las... ;) )

Met vriendelijke groet,
CSShunter
 
bedankt over de tip over opacity, het is me gelukt om het te maken!
is het oké als ik hier mijn code post?
 
JAAA! Leuk! :thumb:
Dit soort experimenten mag ik wel. :)

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan