Whether you are working on a video and struggling to choose the right color for title OR working on an image to choose the right color for captions, you have to scratch your head all the time. You final one color and when look at it again you just feel that the text is not readable. So, How to make a readable text as caption over any video or picture.
Well, it’s quite simple but may be you haven’t thought of it. Text With a Outline.
Light and dark combination is always great to make things visible. Often dark color is outlined to make other color more visible. Do you remember your school days when your painting teacher had told you to outline everything you make with a dark color. The same old school technique we will follow here.
We will type the caption in light color and then outline it with dark color.
How to Outline Text with Dark Color (CSS – For Web):-
This is relatively simple. You just need to know about text-shadow css.
The above given sample is a beautiful example of what we are discussing here. Although we have applied text-shadow css property in a little nontraditional and tricky way. Let me explain it.
Code used to generate above shade is this:
<span style=”font-size: 20px; text-shadow: 0px -1px black, -1px 0px black, 1px 0px black, 0px 1px black; color: #fff; background: #abc; padding: 5px;”>Sample TEXT</span>
Have a look at the text-shadow property. I have applied it to print the border of text from top, bottom, left and right.
Syntax :- text-shadow: horizontal-shadow vertical-shadow color;
So, technically above code will generate 4 shadows of text and we align then horizontally and vertically to get the desired effect.
Suggested Read: Record Screen Activity as animated gif
How to do it in Photoshop:-
This is the same way what we were doing with the web version. I hope you must have got the basic idea behind it.
Always make a dark color border with light color inside. It will make a nice readable text caption for image, video and web content.