Tekstomlijning / text stroke effect via CSS

  • kwaaiepier

    (@kwaaiepier)


    3 weken, 6 dagen geleden

    Ik ben een nieuw template voor berichten aan het maken. Ik heb een cover block met daarin de titel, en ik zou graag willen dat de letters van deze titel zwart omlijnd zijn (zoals in dit plaatje), zodat de letters goed leesbaar blijven tegen een lichtere omslagafbeelding.

    Ik heb een aantal manieren gezien om dit met CSS te doen, maar deze lijken niet te werken, dus ik hoop dat iemand kan uitleggen wat ik precies verkeerd doe. Dit is wat ik tot nu toe heb gedaan:

    Weergave editor > stijlen > Extra CSS > deze code:
    .Text-outline {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; }

    Daarna heb ik in het template “.Text-outline” toegevoegd aan de extra CSS klassen

    Volgens verschillende bronnen zou dit moeten werken, maar het werkt helaas niet.

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • maced

    (@maced)

    3 weken, 6 dagen geleden

    Heb je dit al geprobeerd?
    -webkit-text-stroke-width: 4px;
    Want volgens mij is die 1px niet altijd te zien met een klein corps tekst.

    Thread starter kwaaiepier

    (@kwaaiepier)

    3 weken, 5 dagen geleden

    Bedankt voor je antwoord. Ik heb verschillende groottes geprobeerd, maar het lijkt geen verschil te maken.

    maced

    (@maced)

    3 weken, 5 dagen geleden

    Dan klopt de css niet, maar is het geen oplossing om gewoon een lettertype met contour te gebruiken? Zoals bijvoorbeeld de Swiss 721 bold outline of black outline, zulke lettertypen zijn ook gemaakt om in outline de juiste letterspatie te bevatten, leest beter en geeft een rustiger beeld.
    Een outline genereren softwarematig daar wordt geen rekening gehouden met de visuele aspect en leesbaarheid.

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)

Je moet ingelogd zijn om op dit onderwerp te reageren.