With the advent of WEB 2.0 and CSS3 standards, the capabilities of web technologies have increased significantly. Now the developer can create any page elements using cascading style sheets. There is no need for separate modeling of headings, buttons or banners in graphic editors. When working only with CSS, text stroke, underline, glow or blur effects are created with a single line of code.
Two main properties when working with text
If you regularly use the Internet, you probably noticed how colorful banners, labels, headlines attract attention. Text is a powerful tool that helps visitors to your site point to advertisements or important information. Learning how to competently work with the font, its size and selection, you can significantly increase the conversion of the site and attract new readers.
One of the easiest ways to highlight any word using CSS is to stroke the text. To do this, you need to remember only two properties. The first is text-stroke, and the second is text-shadow. You can use one of them, or both at the same time, creating amazing effects.
Using the text-stroke property
Text-stroke is an incredibly easy way to decorate. It allows you to design headings and paragraphs no worse than Adobe graphic editors. To add text stroke with CSS, you need to specify only two parameters - width and color. The width is set in any values with which you are pleased or comfortable to work with. It can be pixels, percentages or rem.
With the color of the stroke, everything is also very simple. You can set the tone using standard HEX, RGB, or add an alpha channel and make the stroke translucent. To see the property in action, create a document in any text editor and write the following markup:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title> </title> <style> body{ background: rgb(247, 247,24); display: flex; justify-content: center; align-items: center; } h1{ color: #bbb; font: 4rem normal Helvetica, sans-serif; -webkit-text-stroke: 4px #333; text-stroke: 4px #333; } </style> </head> <body> <h1> - !</h1> </body> </html>
Save the document in html format and open it using Google or Firefox.
What could go wrong
If you open the previous document in Explorer, you will be very disappointed. This browser will leave all your efforts unattended and display plain text without a hint of a stroke. That's because the property is still experimental and is not included by the W3W consortium in official standards.
Also pay attention to vendor prefixes:
-webkit-text-stroke: 2rem yellow; text-stroke: 2 rem yellow;
Separately, the 2018 Mozilla, Opera, and Explorer prefixes do not exist. Therefore it is advisable to use CSS text stroke very carefully. Do not assign text-stroke to the vital elements of the page, on which the meaning of the site will depend. Add decoration to secondary content and be sure to conduct cross-browser testing of your pages.
How to add a stroke using text-shadow
Initially, text-shadow was designed as a property to add shadow. But if you know how to add values correctly, then text-shadow will begin to successfully simulate the behavior of text-stroke. If you pay attention to CSS text stroke generators, you will see that they work only with text-shadow.
The property takes four values:
- vertical offset along the X axis;
- the second is the Y-coordinate, which is responsible for the horizontal displacement;
- the third value is the value of the blur radius and the smaller it is, the sharper the shadow becomes and vice versa;
- the last value sets the color.
In an HTML document, styles are written as follows:
.h1{ text-shadow: 0px 2px 2px rgba(15, 86, 61,.2); }
The first two quantities responsible for the displacements along the coordinate axes take both positive and negative values. For example, the entry below will create a gray shadow six pixels lower and five pixels to the left of the main text.
h1{ text-shadow: 6px 5px 0px rgba(0,0,0,.2); }
In order to achieve full visual correspondence of the text stroke, the CSS property of text-shadow can add several values, create not one shadow, but several at once. So the site’s pages will be enriched with elements with 3D effects, glow or indented text. Open the following code in a browser to see everything that is written in practice:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title> </title> <style> body{ background: rgba(0, 105, 255, 1); display: flex; justify-content: center; align-items: center; } h1{ color: #FFF; font: bold 4rem Arial, sans-serif; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } </style> </head> <body> <h1>TEXT WITH 3D</h1> </body> </html>
Typographers use this property as their favorite toy to work with typography. The possibilities of the created effects are limited only by the wizard’s imagination. A nice bonus is that text-shadow is included in the specification, no longer requires vendor prefixes and is supported by all browsers, including the infamous Explorer.