Ik zag pas geleden een plaatje van de New York Times wat een vraag
bij me deed opdoemen

Als je een site maakt met html/css, dan maak je meestal een #wrapper
waar je al je content/menu's e.d. in zet. Deze #wrapper heeft wel eens
een background-image dus in dit geval dus ónder alle content ligt.

Maar weet iemand of het ook mogelijk is om een soort #wrapper bóvenop
al je content te zetten met een PNG-image? Dit om bijvoorbeeld een textuur
op je tekst te kunnen maken terwijl je de tekst verder ongemoeid laat.

Hier een plaatje met wat visuele uitleg:

Dit is het effect wat ik zou willen maken, maar dan op zo'n manier dat de
tekst die dus onder de textuur ligt óók de textuur krijgt terwijl ze nog
gewoon te selecteren is:
http://dribbble.com/shots/113184-5-Cent-Newspaper?list=popular&offset=2

Mvg,
Joram

Niemand die een tipje van de sluier kan lichten met dit
html/css vraagje?

Leuk idee Joram!

http://www.webdesignerwall.com/demo/css-gradient-text/

Ik ga ook eens op zoek.

Ja he, dat dacht ik nou ook

Ik ken de gradient effects e.d. met CSS3, maar als je een mooi sluitend
en uniforme textuur over heel je site wilt hebben is zo'n repeatable png'tje
het mooist, omdat je dan altijd en overal exáct hetzelfde textuurtje hebt,
in plaats van dat je zo'n plaatje in je tekst uitmaskert en in Photoshop over
je foto's plakt.

Moet eerlijk zeggen dat ik 't nog nooit gezien heb, maar 't zou me niets
verbazen als 't niet mogelijk is omdat je dan al je interactieve elementen
zoals buttons overdekt met een niet-klikbaar element. We zoeken even
verder en wachten eventuele geniale ingevingen nog even af!

Zou het niet een html5 optie zijn?

Volgens mij niet. Ik weet dat je met html5 en css3 meerdere
backgrounds kunt plaatsen, maar dat zijn allemaal backgrounds
in dezelfde #div. Er wordt nergens gerept over het plaatsen van
een background over je hele site (of wrapper) helaas

Nou ik zat meer te denken in de zin van dat je aan de tekst een opacity met bv hue, colorburn of multiply zou kunnen toekennen (zoals in Photoshop). Ik doe maar een gooi

Mijn zoekacties leveren helaas weinig op

Ik heb een soortvan voorbeeldje kunnen vinden en maken:
http://jsfiddle.net/EvqNb/2/

In de css kun je zien dat er 2 classes zijn gemaakt;
- 1 voor text
- 1 voor een background

De background heeft in dit geval geen plaatje maar een solide kleur,
en is bóven de class met de text gezet. Dit voorbeeld komt in de buurt
van wat ik bedoel en wil, zei het dat ik 't met een plaatje wil doen.
Maar in dit kleine voorbeeldje kun je goed zien dat je tegen 2 mogelijke
problemen aan loopt:
- Text is niet te selecteren
- Als je een handvol div's hebt en daar overheen een div zet, dan
 moet je héél moeilijk doen om dit in alle browsers goed te krijgen
 zonder dat de overlay-div alle andere div's wegdrukt.

Lastig probleem, maar ik blijf volhouden dat zoiets toch wel zou moeten
kunnen...

In [dit...] voorbeeld is de tekst wel selecteerbaar. Maar hoe het dan werkt voor een overlay over de gehele pagina.....

Laat maar geen goed voorbeeld....

(Bewerkt door Feek om 17:42, 11-02-2011)

Ik denk niet dat je er in gaat slagen om de tekst selecteerbaar te houden al je er iets overheen legt: het effect bestaat al lang (denk maar aan een lightbox).

Dit is ook logisch: als je iets bedekt kun je het niet meer pakken, ook niet als je er door heen kan kijken.

Je kunt een vergelijkbaar effect bereiken door alle elementen een opacity waarde te geven en er dan voor te zorgen dat ze elkaar niet overlappen: werkt natuurlijk niet in IE7.

Ik was stiekum al bang dat er iemand zou zijn die de bubbel zou
laten barsten, hehe. Bedankt in ieder geval
't Kan misschien inderdaad een beter idee zijn om de tekst en
elementen die een textuur moeten krijgen transparant te maken,
óf de textuur in de tekst e.d. uit te maskeren (wat met css gelukkig
kan). De overige elementen zoals icoontjes en achtergrondjes zal
ik dan maar een gewone background-image moeten geven.

Ik had stilletjes gehoopt dat het misschien mogelijk zou zijn met
een stukje Javascript, maar dat feest gaat blijkbaar niet op

Mvg,
Joram

moah: ik ben geen Javascript expert (to say the least...), maar ik denk dat het wel mogelijk zou moeten zijn om met coördinaten de focus naar een element onder een ander element te krijgen, zelfs als dat een onderliggend element is.

Punt is dat de gebruiker van de website dan helemaal gek wordt omdat hij/zij geen idee heeft wat er aan de hand is: naast uiterlijk is gebruiksgemak ook wel iets om rekening mee te houden!