Adding Blobs

Video Transcript

Hello, and welcome to LiveCanvas!
In this video, we're going to talk about blobs.

As you can see, this is our own homepage on livecanvas.com.

Here we are using this purple rounded graphical element called blob on the background, to give some extra spice and appeal to the page.

Adding a touch of decoration and curviness with a blob helps to give some personality to the website.

So let's see how we can easily create a blob and insert it into your layout.

Let's create a brand new web page with LiveCanvas and add a couple ready made elements.

We'll add the first section with some centered hero and another section with a video.
It looks fine. But it's really plain - it looks a bit boring.

Let’s see how we can add a blob to make things better.

Let's go to blobs dot app, which is basically a free tool where you can create a blob, customize it how you want, and grab the corresponding SVG code.

By the way, the SVG format is so great because it adds minimal weight to the web page, while being vector graphics - so they always look sharp.

SVG graphics can be used directly in the page’s HTML so the browser does not need to load an additional resource.
And that’s pretty awesome.

So I'm going to click on the copy code button and grab the SVG code.
Now let's go back to the live Canvas editor.
I want to place the blob right here in the section.

So I open the HTML editor and inside the container. Let’s create an empty div element

I'll paste the SVG code inside this new element.

As you can see, the blob appears but it’s pushing down all the content that we have on the page.

So here we need to switch to absolute positioning: we're going to use the position dash absolute bootstrap class to do it quickly.

Then we're going to set the size of the blob.
Let’s say that this blob is 50% of the parent container with W dash 50.

Let’s add some inline style to control the opacity property, to make the blob lighter, almost transparent, so it blends better, and use the left property to tweak the blob’s position and move it a little bit on the right.

I'm not making this perfect - but you got the basic idea of how to get started.

I am not showing this in the video but you’ll probably want to move the blob behind the other elements. This can be done with the Z index CSS property. So adding a z index of minus one to the inline style will do the trick.

So you have this blob in the page, which looks kinda cool, but maybe on mobile, it does not visually make sense and it’s a bit messy.

Let’s say that we want to show the blob only on the desktop.

So let's just go back to the code editor; we'll use the D dash none class to hide it - display none - and add the D LG BLOCK class to show it on the large breakpoint and beyond.

And there you go. Right now on mobile there is no blob, and reappears on desktop.

So basically this is just the beginning of this adventure. If you want to try other blobs, it's very very easy to change it.

You can tweak things in blobs dot app: You can even use gradients instead of colors.

Grab the code, copy and substitute the SVG element.

Just paste, and boom, the blob is changing.

Okay, so have fun with blobs. See you next time bye