Fondo de texto redondeado con filtros SVG
| Autor: | Ines Montani |
|---|---|
| Views Total: | 1,135 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 28, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Aplica una curva suave y redondeada al fondo del texto usando filtros SVG.
Funcionamiento
Envuelva el texto en un contenedor DIV.
<div class="goo">wikicss.com</div>
Crea el efecto pegajoso usando filtros SVG.
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg>
Los estilos CSS necesarios.
.goo {
font-size: 3rem;
line-height: 1.35;
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background: var(--color-highlight);
padding: 0.5rem 1rem;
-webkit-filter: url('#goo');
filter: url('#goo');
}
.goo:focus {
outline: 0;
}
