user profile image


  1. Nice work. A little fix to make it work in Firefox. Add this to ".drop" CSS:

    width: 0px;
    height: 0px;

    For some reason Firefox won't render the element if it doesn't have an initial height/width. Even if you set them in the keyframes sequence.

  2. @pmk Thanks, I added those lines to .drop.

  3. Now it works in Firefox too :)

    BTW: If you use a SVG filter, you can get the same gooey effect as the SVG version.

    You just include the SVG filter code in your HTML, and reference if from your CSS. An example can be seen here: http://codepen.io/lbebber/pen/OPjxZL

  4. @pmk The goal of this pen was to do it without SVG, though :)

  5. You can do it with blur & contrast filters too, but then you are stuck with using base colors.

    Example: http://codepen.io/pmk/pen/EaLMvj

  6. @pmk Ah right, I see what you're saying. That's a great suggestion, and I'd like to do it, but there's no way to make the colors look right if I do that :/
    (also, sorry I didn't see your comment until now)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.