In the last Web Design for Dommies, we reviewed a site with some unique blobs using cutout images and accent elements. The problem was the whole thing was done in Photoshop:
I discussed the disadvantages of doing it in Photoshop:
- You can’t easily change the blob color based on context.
- You can’t easily change the accent blob color based on context.
- You can’t add additional design elements to any of the blobs or the image.
- Can’t animate anything
- Not scalable/maintainable — if you need to make wholesale changes to how these look after a site is done, you have to edit, re-export, and re-import every image.
I mentioned a key principle in that episode: “If it can be done with CSS and not in Photoshop/Illustrator/etc., then you should do it with CSS.”
I mentioned that you could do it with a mask, but there might be some drawbacks.
In this video I was actually too conservative with the blob structure with this method. You can definitely get more aggressive than I showed simply by getting more aggressive with the percentage values (higher percentages is more aggressive). Here’s an example of a more aggressive one:
When I say this is a CSS-only solution, I mean it. It doesn’t use SVGs or masks. No clip paths, either.
Pros:
- Very small HTML footprint. it’s one image with a <figure> tag with a wrapper div.
- No masks, which would require SVGs and Illustrator and pre-determined blob shapes.
- The circles can also be blobs. Or squares. Or any shape capable of being made with a clip-path.
- All three blobs can be background images if desired (instead of colored shapes).
- They can be any size as well. Everything can be any color, including gradients and transparency. The circle accent blobs can be animated. It supports drop shadow. It supports any cutout image.
- Everything is controllable via locally scoped variables.
- Everything can be adjusted globally, individually, or contextually.
Cons:
- Limitations to the aggressiveness of the blob shape.
- Image and central blob can’t be animated independently.
Mask Version
The mask version can definitely get more aggressive with the blob structure:
Pros:
- More radical custom shapes.
- The image and blob can be animated independently.
Cons:
- Requires an extra DOM element & a code block.
- More technical setup is required, including SVG manipulation.
- Blob shape isn’t easily editable.
- Gradient support is more complicated.
- Gradient support creates huge limitations with locally scoped variables (I realized after I finished recording that using locally scoped variables to change the gradient won’t work because SVG gradients use an ID reference).
Remember, you can continue to get even crazier with how you approach these. I didn’t even begin to explore the use of clip paths, for example. Clip path shapes instead of blobs are possible. Clip paths or blob shapes for the accent elements are also possible.
I showed enough in the video to get your creativity flowing, though.
