Kosten |
Среда, 22 Апреля 2020, 18:04 | Сообщение 1 |
|
В этой статье рассмотрим, как вы можете самостоятельно использовать свойство CSS text-shadow для создания действительно красивых и оригинальных текстов, которые идут в 3D по своей структуре. Вы можете подумать о тени текста как о возможности применить размытый, градиентный цвет за текстом, в чем безусловно будите правы. Но так же, как box-shadow вы можете управлять тем, насколько размыта тень, в том числе уменьшая ее до минимума или сделать наоборот, а значить увеличить.
Это все идет в сочетании с тенями, которые разделены запятыми. А вот их укладка или установка под знаки, вот хитрость CSS, которую в этом мануале как можно шире раскроем, а точнее будет представлен материал. И вам остается выбрать тот формат, который вам по стилистике больше подходит, где далее можно с ним подработать до уникального вида.
Создание глубины с большим количеством теней
HTML
Код <h1 class="tekstovaya_zatemnenos">
ZorNet.Ru
</h1>
CSS
Код :root {
--background: #E4FFF7;
--shadow: #E485F8;
--text: #5362F6;
}
.tekstovaya_zatemnenos {
color: var(--text);
text-shadow: 6px 6px var(--shadow),
5px 5px var(--shadow), 5.5px 5.5px var(--shadow), 5.25px 5.25px var(--shadow), 5.75px 5.75px var(--shadow),
4px 4px var(--shadow), 4.5px 4.5px var(--shadow), 4.25px 4.25px var(--shadow), 4.75px 4.75px var(--shadow),
3px 3px var(--shadow), 3.5px 3.5px var(--shadow), 3.25px 3.25px var(--shadow), 3.75px 3.75px var(--shadow),
2px 2px var(--shadow), 2.5px 2.5px var(--shadow), 2.25px 2.25px var(--shadow), 2.75px 2.75px var(--shadow),
1px 1px var(--shadow), 1.5px 1.5px var(--shadow), 1.25px 1.25px var(--shadow), 1.75px 1.75px var(--shadow),
0.5px 0.5px var(--shadow), 0.25px 0.25px var(--shadow), 0.75px 0.75px var(--shadow);
}
h1 {
font-size: 65px;
text-transform: uppercase;
font-family: "Archivo Black", "Archivo", sans-serif;
font-weight: normal;
display: block;
width: 666px;
max-width: 80vw;
min-height: 90px;
height: auto;
text-align: center;
margin: 10rem auto;
margin: calc(50vh - 5rem) auto;
}
Чем больше шагов мы добавим, тем более детальным будет конечный результат. В этом примере мы начнем с 6px 6px и постепенно будем наращивать с шагом 0,25px, пока не достигнем 0.
Демонстрация
|
| [ RU ] |
|
|
