2

My website at the moment consists mainly of B&W images with some text over each one. At the moment the text is just white, which of course looks fine when the background is mainly black, but when the image is white, you can't see the text.

I've tried adding a 'background' to the text which looks like this enter image description here

But I am just wondering if anyone else has some ideas on what I else I could do in regards to having text over top of B&W images? (without using ridiculous text colours).

4

Crop a portion of the background image, blur it, and slightly darken it, and add a slight shadow to both the box and the text...

enter image description here

1
  • I like this, its quite subtle.
    – oneman
    Nov 18 '16 at 5:00
3

Three ideas immediately spring to mind:

  1. Add a black outline outside the letter shape : enter image description here
  2. Add a black 'glow' around the text : enter image description here
  3. Add a soft edged box around the text area which darkens the background : enter image description here

Hopefully those images preview a bit better in other people's browsers than they do in mine! If not, give them a click.

2

Using the text-shadow property, you can achieve an outline effect on your text. A black outline should make white text standout against a white background, whereas it is barely noticable against a black background. (The class name could be chosen "better" so that html does not dictate the appearance, but that is slightly beyond the point of this answer).

.outline
{
  text-shadow:  1px  0px #000,
               -1px  0px #000,
                0px  1px #000,
                0px -1px #000;
}

Another option is to use mix-blend-mode:difference;. This causes the text to appear in the negative color of the background. This method has a few issues though. The negative of grey is grey, making it hard to read (same applies for some other colors). Not to mention the support for this method is slightly underwhelming.

Lastly you can look at the article "The Art Of The SVG Filter And Why It Is Awesome". They use SVG-filters to create a wide variety of cool effects you simply cannot achieve (yet) using css.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.