I'am beginner at frontend, and got some design-layout to train. Designer expects that on hover part of string or even letter will change color Example
I thought about CSS 'clip', but doubt
CodePudding user response:
I change the snippet. Play with font-size.
body {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
width: 100vw;
height: 50vh;
top: 50%;
transform: translateY(-50%);
font-size: 3em;
font-weight: bold;
font-family: sans-serif;
background-color: red;
}
.wrapper1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: inset(0 50% 0 0);
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: inset(0 0 0 50%);
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
<div >
<div >Hello World!</div>
<div >Hello World!</div>
</div>
CodePudding user response:
As G-Cyrillus has pointed out, background-clip with value text can be used, it will 'cut out' characters from the background.
In this simple snippet the background is half white, half black and the blue/white background is supplied in a pseudo before element.
Note that the property requires a -webkit- prefix in some browsers.
* {
margin: 0;
}
div::before {
background-image: linear-gradient(to right, blue 0 50%, white 50% 100%);
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
div {
position: relative;
width: 100vw;
height: 500px;
font-size: 50px;
text-align: center;
rmix-blend-mode: difference;
rcolor: white;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-image: linear-gradient(to right, white 0 50%, black 50% 100%);
}
<div>Hello how are you?</div>