Author: | Ines Montani |
---|---|
Views Total: | 1,811 views |
Official Page: | Go to website |
Last Update: | December 28, 2017 |
License: | MIT |
Preview:

Description:
Apply a smooth, gooey, rounded corners to the background of your text using SVG filters.
How to use it:
Wrap your text in a DIV container.
<div class="goo">CSSScript.com</div>
Create the gooey effect using SVG filters.
<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>
The needed CSS styles.
.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; }