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’t3 years ago
  • Next Add a responsive logo to a bootstrap web application3 years ago

Leave a Reply Cancel reply

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

Recent Posts

  • How to make your Powershell scripts more annoying
  • What motherboard is in my PC
  • A Dynamics365 plugin thought experiment
  • Registering a Dynamics365 plugin and I get an error
  • Going back in time with Dynamics365

Categories

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

Recent Comments

  • S0ftStuffB055 on Call a Dynamics365 workflow from JavaScript
  • Siva on Call a Dynamics365 workflow from JavaScript
  • 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

Archives

  • January 2021
  • May 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • October 2019
  • June 2019
  • May 2019
  • February 2019
2023 Softstuff Consulting. Donna Theme powered by WordPress
  • Twitter