Text Blend Effect in CSS Part 5
Text Blend Effect in CSS
/*CSS*/
*,*::before,*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
min-height: 100vh;
font-family: sans-serif;
}
section{
position: relative;
width: 100%;
min-height: 100vh;
}
.container{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
clip: rect(auto, auto, auto, auto);
background-size: cover;
background-position: fixed;
}
h1, .container::before{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
padding: 1rem;
font-weight: 900;
background: #FFF;
mix-blend-mode: lighten;
z-index: 9999;
}
.container::before{
content: '';
background: red;
width: 15rem;
height: 7rem;
mix-blend-mode: darken;
}
section.one .container{
background-image: url(https://source.unsplash.com/1920x1080...
}
section.two .container{
background-image: url(https://source.unsplash.com/1920x1080...
}
section.three .container{
background-image: url(https://source.unsplash.com/1920x1080...
}
section.four .container{
background-image: url(https://source.unsplash.com/1920x1080...
}
section.two .container::before{
background-color: green;
}
section.three .container::before{
background-color: blue;
}
section.four .container::before{
background-color: yellow;
}
Смотрите видео Text Blend Effect in CSS Part 5 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Masters In Web Design 27 Январь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 14 раз и оно понравилось 2 людям.