Text Outline

Обводка текста CSS: создание эффекта контурного текста

Обводка текста CSS основана на свойстве -webkit-text-stroke , которое принимает в качестве значений ширину и цвет:

Значение width указывает, какой толщины будет контур. Значение color определяет цвет контура. Все довольно просто. Пример применения этого свойства:

Следует отметить, что у свойства text-stroke есть префикс webkit . Это может показаться странным, но это единственная версия, поддерживаемая всеми браузерами. Даже браузеры, не использующие webkit , такие как Firefox и Edge , поддерживают это свойство.

Размещаем все вместе

Мы рассмотрели свойство -webkit-text-stroke и его использование. Теперь проиллюстрируем все это.

Перед тем, как сделать обводку текста CSS , создайте новый документ HTML и добавьте в него следующую разметку:

     body < background-color: #0F1020; padding: 100px; >#textContainer p  
Did you know that your fingerprint is unique? Of course you did!
 
  

Сохраните веб-страницу, а затем откройте ее в браузере. Вы должны увидеть примерно следующее:

Взгляните на разметку, отвечающую за CSS обводку текста белым цветом, который мы видим:

 
Did you know that your fingerprint is unique? Of course you did!
 

Мы хотим разместить текст внутри элемента span и отобразить его с эффекта контура, о котором говорили ранее. Обводка должна быть шириной 1 пиксель и иметь зеленовато-лимонный цвет. Для этого добавьте следующий код в нижнюю часть блока style ( ниже существующих правил стиля ):

После этого сохраните веб-страницу и откройте ( обновите ) ее в браузере. Вы должны увидеть появившийся контур:

Если хотите отобразить только контур текста, все, что нужно сделать, это присвоить CSS свойству color значение transparent :

После этого текст « Of course you did! » будет отображен только с помощью контура!

Работа со старыми браузерами

Свойство text-stroke поддерживается браузерами хорошо . Но, возможно, вы захотите отобразить альтернативный вариант для тех пользователей, которые используют старые версии браузеров. В этих случаях нужно « закрасить » текст сплошным цветом. Это можно сделать, комбинируя свойства color и -webkit-fill-color :

В этом случае текст будет отображаться сплошным цветом для старых свойств ( с помощью свойства color ). Если поддерживаются свойства -webkit-text , то webkit-text-fill-color переопределит свойство цвета и отобразит контур с прозрачным цветом заливки.

Заключение

Свойство -webkit-text-stroke упрощает создание обводки текста CSS . Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!

МЛ Мария Логутенко автор-переводчик статьи «

Источник

Set Font Border in CSS

1. Use the -webkit-text-stroke Property to Apply Borders to Font in CSS
2. Use the text-shadow Property to Apply Borders to Font in CSS

This tutorial will introduce methods to apply border and color to the font in CSS.

Use the -webkit-text-stroke Property to Apply Borders to Font in CSS

We can use the text-stroke property on a text to apply borders to a font in CSS. We need to use the webkit prefix ahead of the text-stroke property to use the feature. However, it only works on the web-kit based browsers like Safari and Chrome. The text-stroke property lets us decorate the text in vector drawing applications like Adobe Illustrator. The property is the shorthand of the other two properties, text-stroke-width and text-stroke-color . Thus, we can define the width and color of a text’s border with text-stroke property.

For example, write some text inside the h1 tag in HTML. In CSS, select the h1 tag and apply the -webkit-text-stroke property. Set the width to 1px and color to red . Then, set the font to arial using the font-family property and give the green color.

The example below will display a green-colored text which has a border of red color. This is how we can set borders in a font with a different color.

h1>The green font has red borderh1> 

h1   -webkit-text-stroke: 1px red;  font-family: arial; color: green; > 

Use the text-shadow Property to Apply Borders to Font in CSS

We can emulate the text-stroke property using the text-shadow property to apply a border to the font in CSS. The text-shadow property is used to create a shadow to a text. The first two values denote the h-shadow and v-shadow properties. They denote the position of horizontal and vertical shadow. We can set the blur-radius value as the third value in the text-shadow property. It will blur the shadow from the given position with the given radius. We can specify the colour of the shadow, making it the fourth value in the text-shadow property. This method works on most browsers.

For example, write some text inside the h1 tag in HTML. In CSS, select the h1 tag and write the property text-shadow . Give the value 0 for both the h-shadow and v-shadow properties. Write 2px for blur-radius and give the red color.

We emulated the border feature on a font using the text-shadow property in the example below. We set the value 0 for horizontal and vertical radius so that the shadow looks like a border when giving the color to the shadow.

h1>The black font has red borderh1> 

h1   text-shadow: 0 0 2px red; > 

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

Related Article — CSS Font

Источник

CSS Text Decoration

In this chapter you will learn about the following properties:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

Add a Decoration Line to Text

The text-decoration-line property is used to add a decoration line to text.

Tip: You can combine more than one value, like overline and underline to display lines both over and under a text.

Example

h1 <
text-decoration-line: overline;
>

h2 text-decoration-line: line-through;
>

h3 text-decoration-line: underline;
>

p text-decoration-line: overline underline;
>

Note: It is not recommended to underline text that is not a link, as this often confuses the reader.

Specify a Color for the Decoration Line

The text-decoration-color property is used to set the color of the decoration line.

Example

h1 <
text-decoration-line: overline;
text-decoration-color: red;
>

h2 text-decoration-line: line-through;
text-decoration-color: blue;
>

h3 text-decoration-line: underline;
text-decoration-color: green;
>

p text-decoration-line: overline underline;
text-decoration-color: purple;
>

Specify a Style for the Decoration Line

The text-decoration-style property is used to set the style of the decoration line.

Example

h1 <
text-decoration-line: underline;
text-decoration-style: solid;
>

h2 text-decoration-line: underline;
text-decoration-style: double;
>

h3 text-decoration-line: underline;
text-decoration-style: dotted;
>

p.ex1 text-decoration-line: underline;
text-decoration-style: dashed;
>

p.ex2 text-decoration-line: underline;
text-decoration-style: wavy;
>

p.ex3 text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
>

Specify the Thickness for the Decoration Line

The text-decoration-thickness property is used to set the thickness of the decoration line.

Example

h1 <
text-decoration-line: underline;
text-decoration-thickness: auto;
>

h2 text-decoration-line: underline;
text-decoration-thickness: 5px;
>

h3 text-decoration-line: underline;
text-decoration-thickness: 25%;
>

p text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
>

The Shorthand Property

The text-decoration property is a shorthand property for:

• text-decoration-line (required)
• text-decoration-color (optional)
• text-decoration-style (optional)
• text-decoration-thickness (optional)

Example

h1 <
text-decoration: underline;
>

h2 text-decoration: underline red;
>

h3 text-decoration: underline red double;
>

p text-decoration: underline red double 5px;
>

A Small Tip

All links in HTML are underlined by default. Sometimes you see that links are styled with no underline. The text-decoration: none; is used to remove the underline from links, like this:

Example

All CSS text-decoration Properties

Property	Description
text-decoration	Sets all the text-decoration properties in one declaration
text-decoration-color	Specifies the color of the text-decoration
text-decoration-line	Specifies the kind of text decoration to be used (underline, overline, etc.)
text-decoration-style	Specifies the style of the text decoration (solid, dotted, etc.)
text-decoration-thickness	Specifies the thickness of the text decoration line

Источник

How to Set Font Border in CSS

With CSS, you can style fonts in several ways. For instance, we can set the border for a font to make it more attractive with respect to its looks. A font border is also added when it is required to outline some text. It also permits you to style the text and add color and width according to your preferences.

In this guide, we will learn about setting a font border in CSS.

How to Set Font Border in CSS?

In CSS, we can use the following properties to set font border:

Method 1: Use -webkit-text-stroke CSS Property to Set Font Border

The text-stroke property is specially introduced to set the border at fonts. However, the property text-stroke is not included in the W3c standards. This is why the keyword “-webkit” is added to it to perform the specified functionality. The -webkit-text-property works on Safari, Google Chrome, and Firefox browser.

Check out the following example to know more about setting the font border using the -webkit-text-stroke property.

Here is the text for which we want to set the border:

Within our HTML file, we have added a text as a heading using the “ “ tag and placed it into the body:

To set the border around the font, we will use the CSS “-webkit-text-stroke“ property with “1px” border and give it the “red” color. We will also specify the text color as blue, using the “color” property:

Now, we will save the code and open the HTML file in browser:

It can be seen that the font border has been applied successfully using the -webkit-text-stroke property and the added text looks stylish.

Method 2: Use text-shadow Property to Set Font Border

“text-shadow” property is itself a self-explanatory term as it is used for adding shadows in texts. However, it can be manipulated to set the font border efficiently.

So, let’s apply this CSS property on the same text to set the border around it.

Here, we will make the red shadow pop out “1px” from each side using the text-shadow property, “-1px 0px 0px” will specify the left side shadow, “1px 0px 0px” will specify the right-side shadow, “0px -1px 0px” will specify the shadow of top side and “0px 11px 0px” will specify the shadow of bottom side:

h2 {
text-shadow:
-1px 0px 0px red ,
1px 0px 0px red ,
0px -1px 0px red ,
0px 1px 0px red ;color: blue;
}

We have compiled different approaches for setting font borders in CSS.

Conclusion

To set the font border in CSS, the “-webkit-text-stroke” property and the “text-shadow” property can be used to add the font border in certain ways. The property text-stroke is not included in the W3c standards; however, it can be utilized with the -webkit keyword. This write-up has explained two methods that can assist you in setting font borders in CSS.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник