The -webkit-text-stroke-color CSS property specifies the stroke color of characters of text. This property is a shorthand for the longhand properties -webkit-text-stroke-width and -webkit-text-stroke-color. It allows you to specify a stroke color for text. If it is not set, then the color property will be used to do the stroke.

The -webkit-text-stroke-color CSS property specifies the stroke colour of characters of text

The `-webkit-text-stroke-color` CSS property specifies the stroke colour of characters of text. This property is used to set the colour of the stroke or outline of text characters. It is a shorthand property for the longhand property `-webkit-text-stroke-color`. The stroke colour can be specified using colour names, hexadecimal colour codes, RGB, RGBA, HSL, or HSLA values.

Css

P {

Margin: 0;

Font-size: 4em;

• Webkit-text-stroke-width: 3px;
• Webkit-text-stroke-color: #ff0000;

}

In this example, the `p` element has a margin of 0, a font size of 4em, a stroke width of 3px, and a stroke colour of #ff0000, which is red.

The `-webkit-text-stroke-color` property is useful when you want to apply a different colour to the stroke of the text than the fill colour. For example, you can stroke the edges of the glyphs with one colour and fill them with a different colour. By not filling the interior at all, you can achieve an outline effect.

The `-webkit-text-stroke-color` property is also used in conjunction with the `-webkit-text-stroke-width` property to specify the width of the stroke. The width can be specified using length values or the keywords "thin", "medium", or "thick".

The `-webkit-text-stroke-color` property is supported by WebKit, which includes browsers such as Safari and Chrome. However, it is important to note that this property is not standard CSS and may not be supported by all browsers. To ensure compatibility, it is recommended to use a vendor prefix, such as `-webkit-`.

The -webkit-text-stroke-color property is a shorthand for the two stroke properties

The -webkit-text-stroke-width property sets the width of the stroke, with possible values including thin, medium, and thick, or a custom length. The -webkit-text-stroke-color property specifies the colour of the stroke, with values including red, #e08ab4, and rgb(200 100 0).

By using these two properties together, you can create a variety of text stroke styles. For example, you can set the stroke width to be thin and the colour to be red, or you can use a thicker stroke with a different colour.

In addition to the stroke properties, there are also the -webkit-text-fill-color and text-fill-color properties. These properties allow you to specify the fill colour of the text characters. If this property is not set, the colour property will be used as the fill colour.

By combining the stroke and fill properties, you can create text with a variety of visual effects. For example, you can stroke the text with one colour and fill it with another, or you can leave the interior unfilled to achieve an outline effect.

The text-fill-color property allows you to specify a fill colour for text

The `text-fill-color` property in CSS allows you to specify a fill colour for text characters. This property is used to determine the foreground fill colour of the element's text content. If `text-fill-color` is not set, the value of the `colour` property will be used instead.

The `text-fill-color` property is particularly useful when you want to apply a specific colour to the text while keeping the stroke or outline of the text in a different colour. This can be achieved by using the `text-stroke-color` and `text-stroke-width` properties in conjunction with `text-fill-color`. By setting the stroke colour and width, you can create an outline effect around the text while filling the interior with a separate colour.

It's important to note that `text-fill-color` takes precedence over the `colour` property if both are specified. Additionally, this property is used with the `-webkit-` extension, but it has not been standardised yet. This means that it should not be used on production websites as it may not work for all users and there may be variances in implementation.

Css

P {

Margin: 0;

Font-size: 3em;

Webkit-text-fill-color: green;

}

In this example, the text will be filled with the colour green. You can specify the colour using colour names, hexadecimal colour codes, RGB values, or HSL values.

The text-stroke-width property allows you to specify the width of the stroke

The `text-stroke-width` property allows you to specify the width of the stroke for text characters. This property is used to create a stroking effect on text, where the edges of the glyphs are outlined with a specific width and colour. This can be achieved by using the `text-stroke-width` property in combination with the text-stroke-color property.

The `text-stroke-width` property is a part of the CSS specification and is used as a shorthand for the longhand property -webkit-text-stroke-width. It allows you to specify the thickness of the stroke, which can be set to values such as "thin", "medium", "thick", or a specific length value, such as "2px", "0.1em", or "1mm". By using this property, you can control the width of the stroke outline around your text.

The `text-stroke-width` property is particularly useful when you want to create text with a particular visual effect or style. For example, you can use it to create an outline effect by setting the text-fill-color to "transparent" and specifying a `text-stroke-width` and `text-stroke-color`. This will result in text that appears as hollow shapes with a coloured outline.

Additionally, the `text-stroke-width` property can be used in combination with other text-decoration properties, such as text-shadow, to create more complex and nifty effects. For instance, you can add a shadow to both the stroke and fill of the text, resulting in shadowed outlines. This property also works with the ::first-letter and ::first-line pseudo-elements, allowing you to apply different strokes and fills to specific parts of your text.

It's important to note that the `text-stroke-width` property is not supported by all browsers and may require a `-webkit` vendor prefix for compatibility. However, it is a valuable tool for web developers who want to enhance the appearance of their text with custom stroke widths and colours.

The text-shadow property can be used to simulate a stroke

Css

H1 {

Color: blue;

Text-shadow: 1px 0 0 white, /* right */

0 1px 0 white, /* top */

1px 0 0 white, / left /

0 -1px 0 white; /* bottom */

}

This will create a white "stroke" around the text with a blue fill. It is important to note that if the offset values are increased, gaps may appear in the corner areas. These can be fixed by adding more shadows, but it is a cumbersome process that is prone to errors. A SASS mixin can be created to handle the required math and provide a more manageable implementation.

Another method to simulate a stroke is by using a CSS pseudo-element. This involves creating a surrogate element to serve as the stroke and positioning it below the text with a lower z-index. The text content must be duplicated using a data-* custom attribute to make it available to the pseudo-element. For example:

Html

HI

In the CSS code, the ::after pseudo-element is positioned absolutely and given a lower z-index:

Css

H1:after {

Content: attr(data-text);

Position: absolute;

Left: 0;

Z-index: -1;

/* visible stroke is 10px because of alignment */

Webkit-text-stroke: 20px white;

/* is sized relative to h1 */

Font-size: 1em;

}

The stroke will actually appear to have a width of 10px, with the stroke aligned centrally. Changing the value to 1px will result in no visible stroke.

Frequently asked questions