0
399
VistasHow to achieve this 'behind text' effect in CSS?
How can I achieve this 'behind text' color effect with CSS?
·
Santiago Trujillo
2 Respuestas
Responde la pregunta0
These are the rough implementation of all the examples, and you can adjust it according to your need.
h1 span {
color: #FD1215;
background: #FFE0E0;
padding: 5px 10px;
border-radius: 4px;
font-size: 25px;
}
h2 {
color: #10284A;
margin-top: 40px;
font-size: 25px;
}
h2 span {
background: #FC6E6B;
padding: 5px 18px 5px 8px;
clip-path: polygon(3% 0, 100% 0%, 90% 100%, 0% 100%);
border-radius: 2px;
font-size: 25px;
}
h3 {
color: #353535;
margin-top: 40px;
position: relative;
font-size: 25px;
z-index: 1;
}
h3 span {
width: 100px;
height: 10px;
background: #FCC183;
position: absolute;
bottom: 0px;
left: 0px;
z-index: -1;
}<h1>Reach your own <span>goals</span></h1>
<h2>Accessbility <span>for everyone</span></h2>
<h3>The Benefits <span></span></h3>
·
Santiago Trujillo
Denunciar
0
<style>
h1 {
padding: 30px 0 8px;
position: relative;
}
h1::before {
content: "";
position: absolute;
left: 7%;
bottom: 16px;
width: 150px;
height: 14px;
transform: skew(-12deg) translateX(-50%);
background: rgba(238,111,87,0.5);
z-index: -1;
}
</style>
<h1>Sahan</h1>Try to learn about CSS ::bofre and ::after pseudo element, and skew, transform keywords, maybe background also will be helpful to you!
·
Santiago Trujillo
Denunciar
Responde la pregunta