7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)
  • Q:
    Bijdrager
    Domtoren

    Tekst om ronde vorm laten lopen

     
    	for ( $i = -90; $i <= 90; $i++ ) {
     
    		$j = round(137 * cos($i * M_PI / 180) );
     
    		print "<div style='float:left; clear:left; height:3px; width:{$j}px;'><!-- $i en $j --></div>\n";
     
    	}
     

    Vond ik wel leuk bedacht van mezelf: met PHP een een heel stel zwevende div’s maken die tekst om een rond plaatje laten lopen… Het getal 137 en de hoogte van de div’s moet je uiteraard aan de maten van jouw ronde plaatje aanpassen

    Bijdrager
    Jakko Westerbeke

    Hoe zorg je dat dit blijft werken als de gebruiker een smaller venster heeft dan waar je op rekende, of een ander lettertype of lettergrootte gebruikt?

    Bijdrager
    Domtoren

    Het cirkelvormige plaatje verandert niet met de grootte van het venster of het lettertype en de DIVjes die ik er overheen leg evenmin. Dus de tekst blijft mooi om het plaatje heen lopen.

    Ik heb de bewuste site bijna online, zal tzt een linkje plaatsen

    Bijdrager
    computer space

    Doe het dan meteen met CSS en met de optie om tekst te roteren. Kan het echt de cirkel volgen.

    Bijdrager
    Domtoren
    computer op 15 maart 2014

    Doe het dan meteen met CSS en met de optie om tekst te roteren. Kan het echt de cirkel volgen.

    En hoe laat je met CSS tekst om een rond plaatje heen lopen? Ik ben benieuwd naar een voorbeeld.

    Bijdrager
    Shmoo

    Met Lettering.js doe je (nu nog) zoiets maar het zal niet lang meer duren voordat we dit gewoon in HTML en CSS hebben zitten. Adobe is met CSS shapes hard aan de weg aan het timmeren, ook Regions zijn van die dingen die we over een jaartje heel normaal gaan vinden.

    OT,
    Lettering.js – wrapped elke letter in een span tag en daarna kun je dus met elke letter iets anders doen via CSS.
    Zie hier een mooi voorbeeld, en dat is ook nog responsive te bouwen.
    http://trentwalton.com/2011/11/18/workspace/

    Bijdrager
    Wyodor

    Voorbeeld om tekst langs een willekeurige lijn te laten lopen :

    http://responsive.2kool4u.net/tech/svg/

    Was een hoop reken- en typewerk.

7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.