Coding for Beginners: How to Add a Shadow to Your Text (text-shadow)

Опубликовано: 15 Октябрь 2024
на канале: Designers Learn Code
91
0

Coding for Beginners: How to Add a Shadow to Your Text (text-shadow)

Drop shadows can be applied to text using the text-shadow property. The property can take up to four values to represent the horizontal offset, the vertical offset, the blur radius, and the base color of the shadow.

The offset properties are required and can accept most length and size units but pixels are most commonly used. Positive values move the shadow right or down while negative values move the shadow left or up.

The blur radius controls the dispersal of the shadow. A higher value means the shadow is dispersed more widely and will appear blurry. If it is not provided, the default value is 0 which means no blur.

The base color can be represented by any color system. If it is not provided, the base color will default to the element's color property.

More than one shadow can be applied to the same text by adding multiple shadow values separated by commas.

Check out Moonlighting with CSS Text Shadow from the website Sitepoint.com (https://www.sitepoint.com/moonlightin...) for interesting text shadow examples to review.

Jumpstart Your Learning of HTML and CSS is now LIVE! If you’ve been enjoying The Daily Code Snippet and want to accelerate your learning of HTML and CSS, be sure to check out this workshop: http://get.designerslearncode.com/jum...

In this coding bootcamp, you will not only learn about code but also have hand’s on practical and by the end of the course, you will have coded your first web page. This course is suitable for beginners as we go over the basics. The course does touch upon topics that may be more familiar to those who are designers. This may be helpful to those who want to learn how to create websites with design in mind.