Tekst om afbeelding heen met transparante delen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java Developer / Domotica / Public Cloud / Verbete

Functieomschrijving Wil jij als Java Developer een bijdrage leveren aan het ontwikkelen van innovatie Java applicaties die het levensgeluk van patiënten in diverse zorginstellingen aanzienlijk verbeterd? Lees dan snel verder! Ontwikkelen van nieuwe applicaties in Public Cloud; Optimaliseren en verbeteren van bestaande applicaties in Private Cloud; Meedenken over verbeterprojecten; Maken en uitvoeren van Stress Testing; Ontwikkelen en verbeteren van de Mobile app. Functie-eisen Hbo werk- en denkniveau; Minimaal 5 jaar relevante werkervaring; Ervaring in Java 8; Kennis van Linux, Public- en Private Cloudtechnieken; Je bent communicatief erg sterk en kan tegen de nodige stress. Bedrijfsomschrijving Deze organisatie is al ruim

Bekijk vacature »

L deB

L deB

10/12/2015 13:25:59
Quote Anchor link
Hallo beste mensen,

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:

http://static.afbeeldinguploaden.nl/1512/129691/wqVvDu5W.gif

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
 
PHP hulp

PHP hulp

13/12/2019 04:41:54
 
Danny von Gaal

Danny von Gaal

13/12/2015 00:05:36
Quote Anchor link
Hallo,

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.
 
Ozzie PHP

Ozzie PHP

13/12/2015 00:52:43
Quote Anchor link
Bovengenoemde oplossing werkt alleen indien iemand zijn/haar text size in de browser op medium heeft staan. Op het moment dat mensen afwijken van de standaard text size werkt het al niet meer.

Ik denk dat je er beter een afbeelding van kunt maken.
 
Eddy E

Eddy E

13/12/2015 08:53:15
Quote Anchor link
Ja, ik heb het wel eens gelezen op A List Apart.
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?
 

14/12/2015 09:44:49
Quote Anchor link
Wat Ozzie zegt klopt niet volgens mij.
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.
 
Ozzie PHP

Ozzie PHP

14/12/2015 10:40:21
Quote Anchor link
>> 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.
 
Ward van der Put
Moderator

Ward van der Put

14/12/2015 11:10:23
Quote Anchor link
Eens kijken. De kustlijn van Nederland volgt ongeveer de rechteronderhoek van een cirkel, dus je zou de tekst in een div met een afgeronde rechteronderhoek kunnen zetten.

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

Ozzie PHP

14/12/2015 12:12:51
Quote Anchor link
@Ward: dat lijkt me inderdaad de makkelijkste oplossing. De afbeelding in "laagjes" snijden met verschillende breedtes.
 

14/12/2015 13:18:20
Quote Anchor link
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.


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?
 
Ozzie PHP

Ozzie PHP

14/12/2015 13:58:34
Quote Anchor link
@Rickert

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è ... ;-)

http://i.imgur.com/bFwfswk.jpg?1
 

14/12/2015 14:16:36
Quote Anchor link
IE, de browser die ik dus nooit open.
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
 
Ward van der Put
Moderator

Ward van der Put

14/12/2015 14:25:47
Quote Anchor link
Joh, grote dtp-monitors met een extreem hoge resolutie zijn niet te genieten bij een standaardlettergrootte. Die gebruik ik al jaren in een stand voor grote of extra grote lettertypen, anders zit je de hele dag letterlijk en figuurlijk naar kleine lettertjes te turen.

Enne, Firefox kan het kunstje natuurlijk ook en heeft daarnaast een handige optie om een minimumlettergrootte in te stellen.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.