0
393
Views¿Cómo lograr este efecto 'detrás del texto' en CSS?
¿Cómo puedo lograr este efecto de color 'detrás del texto' con CSS?
·
Santiago Trujillo
2 answers
Answer question0
Esta es la implementación aproximada de todos los ejemplos, y puede ajustarla según sus necesidades.
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
Report
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> Trate de aprender sobre CSS ::bofre y ::after del pseudo elemento, y skew , transform palabras clave, ¡quizás background también le sea útil!
·
Santiago Trujillo
Report
Answer question