Как добавить текстовое поле градиента в Weebly? »WebNots

В нашей предыдущей статье мы видели, как добавить цветное текстовое поле или абзац на сайт Weebly. Это было обычное цветное поле, и есть еще один тип цветного текстового поля для использования нескольких цветов в качестве фона. Это называется градиентом, и в этой статье мы обсудим, как добавить текстовое поле градиента на сайт Weebly, чтобы оживить ваш контент.

Добавить текстовое поле градиента в Weebly

Текстовое поле градиента может быть смешанным из нескольких цветов в зависимости от ваших потребностей. Есть два типа градиентов:

• Линейные градиенты, которые используются для создания цветового сочетания влево, вправо, вверх, вниз и по диагонали.
• Радиальные градиенты, которые используются для создания цветового микса от центра.

Мы подробно объясним оба случая, используя 3-х цветное сочетание.

Текстовое поле с линейным градиентом

Для создания градиента требуется как минимум два цвета, а линейный градиент по умолчанию будет течь сверху вниз. В этом примере мы будем использовать 3 цвета, и вы можете использовать столько цветов, сколько вам нужно:

Это образец текстового поля с 3 цветами, используемыми в линейном направлении (сверху вниз). Вы можете использовать много цветов для создания градиентного микса.

Вы можете добавить это текстовое поле с линейным градиентом, вставив приведенный ниже код в элемент «Код для внедрения» на своем сайте Weebly.

<style>
.linear-gradient {
background: -webkit-linear-gradient(lightgrey, lightyellow, skyblue); /* For Safari */
background: -o-linear-gradient(lightgrey, lightyellow, skyblue); /* For Opera */
background: -moz-linear-gradient(lightgrey, lightyellow, skyblue); /* For Firefox */
background: linear-gradient(lightgrey, lightyellow, skyblue); /* Standard */
padding: 15px;
font-size:20px;
color: red;
margin: 5px;
border-radius:8px;
}
</style>
<p class="linear-gradient">This is a sample text box with 3 colors used.
 You can use many colors to create a gradient mix.
</p>

<style>
.radial-gradient {
background: -webkit-radial-gradient(red, green, blue); /* Safari */
background: -o-radial-gradient(red, green, blue); /* For Opera */
background: -moz-radial-gradient(lightgrey, lightyellow, skyblue); /* For Firefox */
background: radial-gradient(lightyellow, gold, lightgrey); /* Standard */
padding: 15px;
font-size:20px;
color: purple;
margin: 5px;
border-radius:8px;
text-align: justify;
}
</style>
<p class="radial-gradient">
This is a sample text box with 3 colors used in a radial direction (from center to outwards). 
You can use many colors to create a gradient mix.
</p>