text-shadow alternative for color around text

157 Views Asked by At

I'm using the css below to have a thick black border around all my text, so it can still be read whatever the background image is. (even mix of light and dark color)

text-shadow:
  -3px -3px 1px black,-3px -2px 1px black,-3px -1px 1px black,
  -3px 0px 1px black,-3px 1px 1px black,-3px 2px 1px black,
  -3px 3px 1px black,-2px -3px 1px black,-2px -2px 1px black,
  -2px -1px 1px black,-2px 0px 1px black,-2px 1px 1px black,
  -2px 2px 1px black,-2px 3px 1px black,-1px -3px 1px black,
  -1px -2px 1px black,-1px -1px 1px black,-1px 0px 1px black,
  -1px 1px 1px black,-1px 2px 1px black,-1px 3px 1px black,
  0px -3px 1px black,0px -2px 1px black,0px -1px 1px black,
  0px 0px 1px black,0px 1px 1px black,0px 2px 1px black,
  0px 3px 1px black,1px -3px 1px black,1px -2px 1px black,
  1px -1px 1px black,1px 0px 1px black,1px 1px 1px black,
  1px 2px 1px black,1px 3px 1px black,2px -3px 1px black,
  2px -2px 1px black,2px -1px 1px black,2px 0px 1px black,
  2px 1px 1px black,2px 2px 1px black,2px 3px 1px black,
  3px -3px 1px black,3px -2px 1px black,3px -1px 1px black,
  3px 0px 1px black,3px 1px 1px black,3px 2px 1px black,
  3px 3px 1px black;

Unfortunately, the code seems to require a lot of computing power, when i use it in Atom for example, it is stuttering significantly when I'm scrolling on my weak laptop.

Is there an alternative or a better way to do the same thing ?

EDIT : https://jsfiddle.net/7etozcrp/

0

There are 0 best solutions below