All geek questions in one place

Can CSS render text twice in two different fonts or colors?

In this jsfiddle, the same text is drawn twice:

  • first in white, in solid font
  • then in black as a font

Two fonts, Londrina Solid and Londrina Shadow, are designed to have exactly the same performance and be used together in this way.

Is there a way to use CSS to achieve this effect without putting two copies of the text in the HTML? (Of course, I also do not want to put a copy of the text in CSS.)

+4
source share
3 answers

Five text-shadow almost identical 1 :

 text-shadow: 0.03em 0.03em 0 black, -1.25px 0 0 black, 1.25px 0 0 black, 0 -1.25px 0 black, 0 1.25px 0 black;

Here is a demo!

1 Yes, I know this is an oxymoron.

+4
source

You can try: after and use the content attribute:

 h1:after, h1 > span.shadow:after { content: "Nashville hack day is November 11"; font-size: 700%; }

And html could be:

 <body> <h1><span class="shadow"></span></h1> </body>

I understand that this can be cumbersome, but at least you only need to write the content once.

See jsfiddle .

+2
source

If you are trying to create text shadows, check out W3C: Css: text shadows .

They are not compatible with incompatible IE and lt. 10 though.

-1
source

Source: https://habr.com/ru/post/1433922/

More articles:


All Articles