With the advent of the WEB 2.0 and CSS3 standards, the possibilities 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 titles, buttons or banners in graphic editors. Working with CSS only, 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, inscriptions, headlines attract attention. Text is a powerful tool to help point site visitors to advertisements or important information. By learning how to correctly work with the font, its size and emphasis, you can significantly increase the conversion of the site and attract new readers.
One of the easiest ways to make any word stand out with CSS is to stroke the text. To do this, you only need to remember 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 for 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 graphics editors. To add a text stroke using CSS, you need to specify only two parameters - width and color. The width is set in any values that you are pleased or comfortable to work with. It can be pixels, percentages or rem.
The stroke color is also very simple. You can assign a tone using the standard HEX, RGB, or add an alpha channel and make the stroke semi-transparent. To see the property in action, create a document in any text editor and write the following markup:
Incredibly beautiful header with stroke 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; }
We are happy to decorate the web pages and will not get tired of doing it
Save the document as html and open it with Google or Firefox.
What could go wrong
If you open the previous document in Explorer, you will be very disappointed. This browser will ignore all your efforts and display plain text without a hint of a stroke. This is because the property is still experimental and is not included in the official standards by the W3W consortium.
Also note the vendor prefixes:
-webkit-text-stroke: 2rem yellow; text-stroke: 2 rem yellow;
There are no separate Mozilla, Opera and Explorer prefixes for 2018. Therefore, it is advisable to use CSS text stroke very carefully. Don't assign text-stroke to vital elements on the page that will affect the meaning of the site. Decorate secondary content and be sure to cross-browser test your pages.
How to add a stroke with text-shadow
Initially, text-shadow was designed as a property to add a shadow. But if you know how to correctly add values, then text-shadow will begin to successfully simulate the behavior of text-stroke. If you look at CSS text stroke generators, you will see that they only work with text-shadow.
Property takes four values:
- vertical offset along the X axis;
- the second is the Y-coordinate responsible for the horizontal offset;
- the third value is the value of the blur radius and the smaller it is, the clearer the shadow becomes and vice versa;
- last value sets color.
In an HTML document, styles are written as follows:
.h1{ text-shadow: 0px 2px 2px rgba(15, 86, 61,.2); }
The first two values responsible for offsets along the coordinate axes take both positive and negative values. For example, the entry below will create a gray shadow six pixels below and fivepixels to the left of the main text.
h1{ text-shadow: 6px 5px 0px rgba(0, 0, 0,.2); }
To achieve a complete visual match of the text stroke, you can add several values to the text-shadow CSS property, create not one shadow, but several at once. So the pages of the site will be enriched with elements with 3D effects, glow or indented text. Open the following code in a browser to see everything written in practice:
Incredibly beautiful header with stroke 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); }
TEXT WITH 3D
Typography designers use this property as their favorite toy. The possibilities of the created effects are limited only by the imagination of the master. A nice bonus is that text-shadow is included in the spec, no longer requires vendor prefixes, and is supported by all browsers, including the infamous Explorer.
