✅ Как добавить видео внутрь текста?
Чтобы привлечь внимания к особому тексту, нужно сделать к нему особый эффект, обычно для этого используется CSS свойство text-shadow, но с помощью него нельзя создавать живые эффекты. Также можно делать и анимации для привлечения внимания, тем не менее это нельзя назвать текстовым эффектом. ⬇️
☑️ Это не простая задача, поэтому мы делимся уже готовым HTML & CSS кодом ниже для добавления видео внутрь текста:
HTML ⤵️
Чтобы привлечь внимания к особому тексту, нужно сделать к нему особый эффект, обычно для этого используется CSS свойство text-shadow, но с помощью него нельзя создавать живые эффекты. Также можно делать и анимации для привлечения внимания, тем не менее это нельзя назвать текстовым эффектом. ⬇️
☑️ Это не простая задача, поэтому мы делимся уже готовым HTML & CSS кодом ниже для добавления видео внутрь текста:
HTML ⤵️
<div class="wrapper">
<video autoplay playsinline muted loop preload poster="http://i.imgur.com/xHO6DbC.png">
<source src="https://storage.coverr.co/videos/7RzPQrmB00s01rknm8VJnXahEyCy4024IMG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6Ijg3NjdFMzIzRjlGQzEzN0E4QTAyIiwiaWF0IjoxNjI5MTg2NjA0fQ.M8oElp5VNO8bWEWmdF2nGiu3qDOOYRFfP8wkKvl8I20"/></video>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 285 80" preserveaspectratio="xMidYMid slice">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%"/>
<text x="72" y="50">Simon</text>
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%"/>
</svg>
</div>
SCSS ⤵️.wrapper {
position: relative;
width: 100%;
margin: 0 auto;
max-width: 1000px;
video {
width: 100%;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
text-transform: uppercase;
font-size: 40px;
}
> rect {
-webkit-mask: url(#mask);
mask: url(#mask);
}
rect {
fill: #fff;
}
}
}
#практика #html #css