Tekst om afbeelding heen met transparante delen
ik vraag me het volgende af: is er een manier om tekst om een afbeelding heen te laten lopen, ook door het transparante gedeelte. Bijvoorbeeld:
Links de tekst, gewoon in html. Rechts de afbeelding met transparantie en float right.
Is het mogelijk om dit te realiseren met php, html of css? Net zoals in Indesign bijvoorbeeld mogelijk is met de tekstomloop...
Ik heb gedacht aan z-index en de afbeelding als background te zetten maar dan loopt de tekst er voor zover ik weet niet omheen (om de landsgrens in het geval van het voorbeeld). Ik heb ook online ernaar gezocht maar kom vooral uit op de css background-image property.
Iemand ideeen?
Alvast bedankt :)
Gewijzigd op 10/12/2015 13:26:43 door L deB
Het probleem is dat de afbeelding sowieso een rechthoekige vorm heeft. Ook al is de afbeelding uitgesneden en heeft die een transparante achtergrond je webbrowser ziet er een omlijning omheen.
Daarom is het heel erg lastig om dit uit te voeren. Ik weet niet of het om statische tekst gaat of dynamisch?
Maar als de tekst onveranderd blijft dan kan je het volgende doen: http://jsfiddle.net/16vt5ejm/2/
Ik heb het plaatje als achtergrond in een div toegevoegd en dan de tekst erbovenop geplaatst. Met linebreaks kan je dan netjes om het landschap heen.
Ik heb de div en p een width gegeven zodat de tekst zo blijft in elke resolutie.
Maarja wanneer deze tekst continue veranderd zoals bijvoorbeeld in een nieuwsbericht dan heb je er weinig aan.
Ik denk dat je er beter een afbeelding van kunt maken.
Iets met 'sandboxing', 'union' dacht ik.
Wel een oud artikel (2005?), maar werking blijft hetzelfde.
Je kan PHP namelijk prima het contrast van de afbeelding laten bekijken, dan <div>s maken van 10x10 pixels waar het donkerder (of juist lichter) is dan de rest. En daar moet je tekst omheen gaan.
Maar ik kan het artikel niet 1-2-3 vinden.
Toevoeging op 13/12/2015 08:54:41:
Edit: toch gevonden! Zie http://alistapart.com/article/sandbags
Uit 2006! Dus wellicht is er nu met HTML5 en polygon-dingen veel meer gemakkelijk mogelijk. Even CSS-tricks vragen?
De breedte blijft altijd hetzelfde ookal heb je een kleiner scherm, maar kan aan mij liggen.
Sowieso is de oplossing niet valide.
Kijk hier eens naar;
http://jsfiddle.net/zh4brvot/2/
Maar bekijk wel of dit daadwerkelijk al te gebruiken is, heb er bij een bijeenkomst over gehoord.
Euh ... waarom zou ik het dan zeggen? Ik heb het gewoon getest hoor. In het voorbeeld zijn handmatig linebreaks ingevoerd op basis van de medium fontgrootte. Als je in je browser de fontgrootte aanpast werkt het niet meer.
Maar ik zou in dit geval een simpelere techniek gebruiken, die bijvoorbeeld Eric Meyer jaren geleden al gebruikte om hoeken af te ronden: verdeel de afbeelding in een stapel slices met ongelijke breedte (wel het land maar niet de zee erin).
Ozzie PHP op 14/12/2015 10:40:21:
>> Wat Ozzie zegt klopt niet volgens mij.
Euh ... waarom zou ik het dan zeggen? Ik heb het gewoon getest hoor. In het voorbeeld zijn handmatig linebreaks ingevoerd op basis van de medium fontgrootte. Als je in je browser de fontgrootte aanpast werkt het niet meer.
Euh ... waarom zou ik het dan zeggen? Ik heb het gewoon getest hoor. In het voorbeeld zijn handmatig linebreaks ingevoerd op basis van de medium fontgrootte. Als je in je browser de fontgrootte aanpast werkt het niet meer.
De font grootte in de browser aanpassen? Wie doet dat? Zoomen werkt in zijn geheel tegenwoordig en niet meer bepaalde elementen.
De font-size die jij opgeeft blijft geldig. Welk apparaat je ook gebruikt.
Als je zelf met de DOM gaat kloten dan ben je aan het softhacken en kunnen er dingen omvallen maarja dat doe je dan ook zelf, toch?
In Internet Explorer kun je onder "View->Text size" het formaat van letters aanpassen. Zelf heb ik dat niet nodig, maar ik heb het wel eens gezien bij wat oudere mensen die het lettertype vergroten omdat ze het anders niet (goed) kunnen lezen. Dit is gewoon een standaard-optie in Internet Explorer en heeft dan ook weinig met softhacken te maken. De oplossing is daarmee dus niet waterdicht en zal bij sommige personen een ongewenst resultaat opleveren. De oplossing van Ward is een betere.
Toevoeging op 14/12/2015 14:03:43:
Die ouwekes die zien het soms niet zo goed hè ... ;-)
Hoe meer developers het negeren hoe beter en sneller het doodgaat :P
Ben het eens hoor, maar hoe de f*ck gaat die ouwe baas dat text-size vinden als hij nieteens weet dat hij meerdere tabbladen kan openen in IE.
Oudjes gewoon spuitje geven, ben je er ook vanaf hahah
Enne, Firefox kan het kunstje natuurlijk ook en heeft daarnaast een handige optie om een minimumlettergrootte in te stellen.