Softstuff Consulting
My occasional musings of a technical nature
  • Send us a message
  • About Softstuff Consulting
  • Privacy Policy
  • Main Website
CSS

Shadowed text in CSS

by Ian Blair February 6, 2020 No Comments

In CSS there is a hardly known formatting feature for text called text-shadow and this will do exactly as it sounds and display a shadow against the text. This can be quite useful when overlaying text on a textured or image background.

This command can be used in place of a graphic with a corresponding increase in page load and render speed.

 

CSS Usage:

text-shadow: left-offset bottom-offset [optional blur] colour

In this block of HTML I have added the tag as inline CSS for simplicity but it should ideally be added in a style sheet. The example below will show various permutations of the tag.

<h1 style="text-shadow: 2px 2px #ff0000">This is text with a tight red shadow</h1>
<h1 style="text-shadow: 4px 4px #00ff00">This is text with a wide green shadow</h1>
<h1 style="text-shadow: -4px -4px #0000ff">This is text with a wide blue shadow</h1>
<br />
<h1 style="text-shadow: 2px 2px 2px #ff0000">This is text with a blurred red shadow</h1>
<h1 style="text-shadow: 4px 4px 4px #00ff00">This is text with a wide blurred green shadow</h1>
<h1 style="text-shadow: -4px -4px 4px #0000ff">This is text with a wide blurred blue shadow</h1>

The above code will produce output like

Shadow Text Example
Shadow Text Example

While some may feel that this is a step back to the golden age of web pages in the 1980s where everything had a grey background and it was almost mandatory for text to be displayed in rainbow colours, this CSS function does have at least one practical use.

For example:

Blog text shadowed
Blog text shadowed

In the above example the white text has a black shadow which makes it easier to read against the ‘busy’ background. This is simpler and cleaner to do in CSS than add the shadow and text to the image as if the layout is responsive it will resize gracefully.

It should work on most browsers although any IE versions below 10 might struggle.

      

  • Previous Throw exceptions in Dynamics365 workflow plugins, or don’t12 months ago
  • Next Add a responsive logo to a bootstrap web application12 months ago

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • A Dynamics365 plugin thought experiment
  • Registering a Dynamics365 plugin and I get an error
  • Going back in time with Dynamics365
  • Make using Windows for people with eyesight issues easier
  • Lets not forget VB script

Categories

  • Bootstrap
  • C#
  • CSS
  • Dot Net Core
  • Dynamics365
  • JavaScript
  • T-SQL
  • Thoughts
  • VBScript
  • Visual Studio
  • Windows
  • Xamarin

Recent Comments

  • TC Sharpe on Throw exceptions in Dynamics365 workflow plugins, or don’t
  • BigOwl on Throw exceptions in Dynamics365 workflow plugins, or don’t
  • CRMGod on Access a Dynamics365 embedded webresource
  • Mike M on Access a Dynamics365 embedded webresource

Archives

  • May 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • October 2019
  • June 2019
  • May 2019
  • February 2019
2021 Softstuff Consulting. Donna Theme powered by WordPress
  • Twitter
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.I am happy