: What techniques can I use to bring out text on B&W images? 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,

@Becky351

Three ideas immediately spring to mind:


Add a black outline outside the letter shape :

Add a black 'glow' around the text :

Add a soft edged box around the text area which darkens the background :



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

Vote Up Vote Down

@Turnbaugh909

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...

Vote Up Vote Down

@Murphy569

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.

Vote Up Vote Down