Search code examples
javascriptjqueryhtmlcsstypography

Split text effect

I am trying to mimic this look of the text split, I found the codepen.io for it but it uses SCSS and I am looking for it to be CSS only if possible. If someone could help me translate the code or make it so that is CSS, that would be great. Thanks for the help in advance. enter image description here

Solution

  • While I am not going to write out all of the code for you I will suggest a method of doing it:

    I suggest you make two div boxes, one for the filled in or solid text and one for the outlined text.

    Then you set the color, font-family (Google Fonts is a good resource), font-size, and font-weight, to suit your needs for the first div.

    On the second div again set the font-family, font-size, and font-weight to the same values, except set the color to transparent and add a colored border to the text. This will simulate the sort of outlined effect in the codepen.

    Oh, and to make the two divs appear on the same line look at this answer.

    While this will not automatically split the text between the two texts, it is a simple way to get a similar effect to what you want.