HTML background color

 
 
 
  

 
 
 
HTML background color
 
In this lesson you will have color codes at the end of this page
 
 
 Here we have a strong Paragraph 
 
 Here we have an italic Paragraph 
 
Visit our HTML tutorial - this is a link 
 
 
 

Note: In the above example I used inline CSS, but it is better to avoid and use external CSS
Note: HTML colors supports 140 standard color names.

HTML text color — using inline CSS

To put a text in a certain color can be done in several ways, as:
1. inside a paragraph

,
2. inside a box

Let’s have an example using:

 
 
 
  

 
 
Colored HTML text
 
 
your description here colored in green
 
 
your description here colored in red
 
 
 

Note: In the above example I used inline CSS, but it is better to avoid and use external CSS

More examples for a better understanding text color

 
 
 
  

 
 
Colored HTML text
 
 
your description here RGB colored
 
 
your description here HEX colored
 
 
your description here HSL colored
 
 
your description here colored in red
 
 
 

HTML border color — using inline CSS

To put border color to a text can be done in several ways, as:
1. border inside a paragraph

,
2. border for a box

Let’s have an example using:

 
 
 
 
 
 
HTML border color - using inline CS
 
 
your text here red color
 
 
your text here green color
 
 
 

Note: In the above example I used inline CSS, but it is better to avoid and use external CSS

HTML colors, Text color, Border Color, background color
HTML colors, background, text and border color — html tutorial

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.

Источник

Обводка текста 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 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; > 

Источник