✅ Как создать движущею тень для текста?
Интересно стилизованные тени, всегда делали красивее и улучшали любые текста. Сегодня мы рассмотрим очень эффективную движущею тень, которая запомнится надолго! Работает данная тень достаточно сложно, поэтому сейчас разберем только как делается сама тень. ⬇️
☑️ Мы должны создать с помощью свойства data-shadow так называемый второй текст, для того чтобы позже поставить его за наш главный текст. Обязательно текста должны быть одинаковы, или же движущая тень не будет совпадать с главным текстом. После этого останется только правильно стилизовать тень.
Чтобы вы не мучались, мы делимся уже готовым кодом для создания крутой движущей тени:
HTML ⤵️
CSS ⤵️
#обучение #html #css
Интересно стилизованные тени, всегда делали красивее и улучшали любые текста. Сегодня мы рассмотрим очень эффективную движущею тень, которая запомнится надолго! Работает данная тень достаточно сложно, поэтому сейчас разберем только как делается сама тень. ⬇️
☑️ Мы должны создать с помощью свойства data-shadow так называемый второй текст, для того чтобы позже поставить его за наш главный текст. Обязательно текста должны быть одинаковы, или же движущая тень не будет совпадать с главным текстом. После этого останется только правильно стилизовать тень.
Чтобы вы не мучались, мы делимся уже готовым кодом для создания крутой движущей тени:
HTML ⤵️
<h1 data-shadow='code_ready'>code_ready</h1>CSS ⤵️
body {
text-align: center;
background-color: hsla(230,40%,50%,1);
}
h1 {
position: relative;
display: inline-block;
color: white;
font-family: cursive;
font-size: 100px;
text-shadow: .03em .03em 0 hsla(230,40%,50%,1);
}
h1:after {
content: attr(data-shadow);
position: absolute;
top: .06em; left: .06em;
z-index: -1;
text-shadow: none;
background-image:
linear-gradient( 45deg, transparent 45%,hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0);
background-size: .05em .05em;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: dang 25s linear infinite;
}
@keyframes dang {
0% {background-position: 0 0}
0% {background-position: 100% -100%}
}#обучение #html #css