login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Grote blob naar kleine blob met behoud scherpte

Offline GroundZero - 19/06/2016 14:52 (laatste wijziging 20/06/2016 10:34)
Avatar van GroundZeroLid 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 

  1. <div class="banner" style="margin-top:24px">
  2. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="621" height="206">
  3. <defs>
  4. <filter id="blob">
  5. <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
  6. <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" />
  7. </filter>
  8. </defs>
  9. <circle cx="70" cy="70" r="70" stroke="green" stroke-width="0" filter="url(#blob)" />
  10. <circle cx="200" cy="70" r="50" stroke="green" stroke-width="0" filter="url(#blob)" />
  11. </svg>
  12. </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 :/

2 antwoorden

Gesponsorde links
Offline Thomas - 20/06/2016 17:49
Avatar van Thomas Moderator
Citaat:
Ohja, als ik tekst in de linker ballon plaats krijg ik deze ook niet te zien helaas trouwens

Was dit al opgelost? Dit zou te maken kunnen hebben met het feit dat de blob geen daadwerkelijke inhoud heeft. De hele cirkel is enkel border. Je zult dus een absolute gepositioneerd element over deze blob heen moeten zetten ofzo, dit gebeurt ook op die knab-site, de textbox heeft een aparte div blob__container--text.
Bedankt door: GroundZero
Offline GroundZero - 29/06/2016 13:12
Avatar van GroundZero Lid Ik heb het inmiddels op kunnen lossen. Ik zal vanavond even mijn code hier plaatsen. Was toch nog een heel gedoe. MorphSVG nodig en wat andere plug-ins. Vervolgens twee vectors maken in Illustrator met het zelfde aantal punten en dan werkt het prima Mijn code volgt vanavond voor de mensen die interesse hebben.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.192s