3

I have to show the text on webpage which looks like:

enter image description here

The font has two alternate colors. Is it even possible? The solution should work for all the browsers.

adnan kamili
  • 8,967
  • 7
  • 65
  • 125
  • Possible duplicate of [Dotted text in css?](http://stackoverflow.com/questions/24140013/dotted-text-in-css) – Haibara Ai May 11 '16 at 10:27

2 Answers2

5

Yes, it's possible if you have proper font file that can be included in your page.

@font-face {
    font-family: myFirstFont;
    src: url(dashed_font.woff);
}
Justinas
  • 41,402
  • 5
  • 66
  • 96
  • You mean I need to develop a custom font for the same, where my graphics team will have to create each character in SVG for all the ascii characters atleast – adnan kamili May 11 '16 at 10:31
  • It might be worth mentioning that an `eot` font would also be needed for some versions of Internet Explorer. Also this solution won't work if two colours are needed, both different to the background colour. – Candy Gumdrop May 11 '16 at 11:05
1

This can be done natively in CSS without using a custom font in Google Chrome and other WebKit browsers using -webkit-background-clip.

h1 {
    font-family: sans-serif;
    font-size: 300%;
    background: repeating-linear-gradient(
        135deg,
        #3f3f3f,
        #3f3f3f 2px,
        #7f7f7f 2px,
        #7f7f7f 4px
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<h1>Your text here</h1>

Note that this will just display as text in front of a rectangular stripy background in other browsers such as Firefox or IE.

This article explains -webkit-background-clip and a few fallbacks for other browsers.

This article explains making striped backgrounds in plain CSS3.

Candy Gumdrop
  • 2,745
  • 1
  • 14
  • 16