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 . Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!

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

Источник

How To Add HTML Border Around Text

In HTML, you can add a box around text, or a border around text and change it to any color or thickness.

This can be achieved using some CSS.

CSS is applied to HTML elements to alter the look of the elements.

In the below examples, we will see two ways we can add HTML border around text and can colorize it.

Add HTML Border Around Text Using Inline CSS

You can add inline css to your HTML elements and add a border around your text elements.

Using the style attribute on HTML elements, you can give the border property and add a border.

This is an example of a HTML border around some text.

Let’s look at some HTML code

This is an example of a HTML border around some text.

In the above example, we can see that we used the style attribte and used the border styles to add a border around the text.

Add HTML Border Around Text Using External CSS

The concept remains the same weather you are applying inline CSS or external CSS.

We make use of the CSS border property to assign a border to any element.

This is an example of a HTML border around some text using external css.

Let’s look at some the HTML code for the above

This is an example of a HTML border around some text using external css.

Recent Posts

HTML Option Selected Attribute

In this blog post, we will learn about the Selected attribute in HTML Option element. A dropdown list is created using the Select tag in HTML.

Create A REST Web API In ASP.NET Core 3.1 — ASP.NET Core CRUD Web API

In this blog post, we will create an ASP.NET Core Web API from scratch step by step. We will follow RESTful principles and create CRUD operations and create an ASP.NET Core Web API in .NET Core version 3.1.

During the implementation, we install and use Entity Framework Core to connect to our SQL Server database and perform CRUD operations.

Char Array To String In C#

In this blog post, we will learn how to convert a Char Array To String in C#. A char array is an array of character types. That means they hold a single character value in each of its elements.

C# Dictionary Foreach — Iterate Over Dictionary C#

In this blog post, we will learn how to iterate over a dictionary in C#. We will use a few different ways to iterate over the dictionary.

Convert List To IEnumerable In C# — AsEnumerable Method In C#

In this blog post, we will see how we can convert a List to IEnumerable in C#. A List in C# already implements an IEnumerable but you may still feel the need to convert a List to IEnumerable in C#.

Источник

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.

Источник

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; > 

Источник