Lid |
|
Beste,
ik ben al 2 dagen aan het proberen om een blob effect te krijgen. Met puur CSS krijg ik het niet 100% mooi en scherp en het blijft lastig.
Een perfect voorbeeld van wat ik graag wil:
https://www.knab.nl/
In de banner, links onder een grote ronde die een tweede kleinere balletje maakt.
Is er iemand die mij op een simpele manier kan uitleggen hoe dit gedaan word? want ik krijg het niet voor elkaar zelf helaas
Ik heb het ook met CSV geprobeerd maar daar kom ik ook niet uit. In de tutorial zitten de rondjes aan elkaar vast maar bij mij gebeurd dat dus niet
<div class="banner" style="margin-top:24px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="621" height="206">
<defs>
<filter id="blob">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="blob" />
</filter>
</defs>
<circle cx="70" cy="70" r="70" stroke="green" stroke-width="0" filter="url(#blob)" />
<circle cx="200" cy="70" r="50" stroke="green" stroke-width="0" filter="url(#blob)" />
</svg>
</div>
<div class="banner" style="margin-top:24px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="621" height="206">
<defs>
<filter id="blob">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="blob" />
</filter>
</defs>
<circle cx="70" cy="70" r="70" stroke="green" stroke-width="0" filter="url(#blob)" />
<circle cx="200" cy="70" r="50" stroke="green" stroke-width="0" filter="url(#blob)" />
</svg>
</div>
Edit:
Heb het nu "redelijk" voor elkaar, echter wil ik graag dat alles één kleur is. Nu zie je het gedeelte tussen de twee balletjes een andere kleur hebben helaas.
Iemand enig idee hoe dit op te lossen? en ook hoe de "border" te verwijderen. Heb deze nergens toegevoegd maar er zit wel een 1px border omheen
https://jsfiddle.net/skLd9j8p/
EDIT:
De feBlend moest weg nu is het wel één kleur. Nu nog wat meer de vorm en schepte krijgen zoals die van knab.nl en opacity en dan heb ik het gewenste resultaat
Ohja, als ik tekst in de linker ballon plaats krijg ik deze ook niet te zien helaas trouwens
Tips zijn welkom!
Edit: heb het eindelijk voor elkaar op één klein ding na.
Ik zie het ding niet!!! als ik in mijn CSS nu "filter: url("#shadowed-goo");" weg haal dan werkt het wel :/
|