Create a Ladybug Icon With CSS and a Single Div Element

It’s possible to build a surprising amount of graphics with CSS alone. Let’s create a cute ladybug icon with just a single div element!

A Single Div Demo

Here’s our cute ladybug (hover over it). And take a look at the HTML markup; just one single <div> element!

We’ll use a combination of CSS gradients, pseudo elements, and box shadows to build our graphic. Let’s jump in!

How to Get Creative With a Single Div

Before we begin, there are some CSS skills you’ll need. The main problem with single elements resides in the fact that we’re limited to the number of “building blocks” we can use. Luckily, there are some tricks:

Pseudo Elements

Pseudo elements (also referred to as generated content) don’t exist in the document markup itself (the DOM) but are created by the CSS. They offer you the possibility to add to your default element two others which can (more or less) use the same properties.

For example, take this markup:

1	<div class="square"></div>

Then apply the following style rules:

.square {
	position: relative;
	background: blue;
	width: 50px;
	height: 50px;
}
.square::before {
	position: absolute;
	left: -50px;	
	content: '';
	height: 50px;
	width: 50px;
	display: block;
	background: green;
}
.square::after {
	position: absolute;
	left: 50px;
	content: '';
	height: 50px;
	width: 50px;
	display: block;
	background: red;	
}

For the purpose of this exercise we’ll use pixel values, though it’s often advisable to use flexible units of measurement such as ems.

So there we go: one single div, but three building blocks:

The double colon (::), as opposed to a single colon, is CSS3 syntax. It differentiates pseudo elements from pseudo selectors, such as :hover.

One thing to note is that pseudo elements will be displayed on top of the default element, unless you give them a lower z-index value than the parent. Browsers interpret them as if they are located within the default element. If we were to represent the pseudo elements with actual markup the code would look like this:

1	<div class="square">
2	<div class="before"></div>
3	<div class="after"></div>
4	</div>

Box Shadows

If pseudo elements alone don’t give you enough blocks to build your icon, you can also use box shadows. This technique will allow you to create as many clones as you want. Let’s look at an example with a circle:

.circle {
	position: relative;
	background: blue;
	width: 50px;
	height: 50px;
	border-radius:50%;
	box-shadow: -110px 0 0 -20px purple,
                -60px 0 0 -10px red,
                80px 0 0 10px green,
                180px 0 0 20px orange;
}

As you can see, the box shadows allow you to reduce or increase the size of your inital shape and place it where you want.

The property detail box-shadow: 80px 5px 1px 10px green can be broken up as follows:

80px offset-x This allows you to place your shadow along the x axis, taking as origin the center of your original shape
5px offset-y This allows you to place your shadow along the y axis, taking as origin the center of your original shape
1px blur-radius The larger this value, the bigger the blur, so the shadow becomes bigger and lighter
10px spread-radius Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink
green color The color of your shape 🙂

The first shadow defined will always appear above subsequent shadows.

The inset value also gives us various possibilities:

.ball {
	position: relative;
	background: blue;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	box-shadow: inset 20px 0 0 -10px yellow,
                inset -20px 0 0 -10px red;
}

Gradients

Like shadows, CSS gradients can be combined and placed independently. Using gradients to create shapes is a bit more complicated than the previous properties, so let’s focus on a “simple” example.

In this example we will create four different circles using radial gradients and we’ll distribute them within the parent element.

.background {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 10%,transparent 10%,transparent 100%),
				radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%,transparent 32%,transparent 100%),
				radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 52%,transparent 100%),
				radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 60%,transparent 62%,transparent 100%);
	background-color: red;
	background-repeat: no-repeat;
	background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;
	background-size: 50px 50px;
	width: 100px;
	height: 100px;
	position: relative;
}

To understand this demo you have to imagine a grid on the element. Each cell of the grid would be a different gradient. In this case cells are 50px by 50px (background-size: 50px 50px;). I have deliberately spread them within the element but be aware that they can also be superimposed. Each cell can be placed on a separate x and y axis, with origin in the upper left corner of the base element (background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;).

The Gradient property in detail: background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1)

ellipse shape: Could be circle or ellipse, in this example both do the same things.
at center position: Could also be expressed as background-position(center = 50% 50%).
rgba(0, 0, 0, 1) 10% color and limit: Increase the limit value to enlarge the circle.
transparent 10% color and limit: This limit value defines the end of your previous color. Specify a limit slightly higher than the previous limit to allow for smoother edges.
transparent 100% color and limit: The gradient will then be transparent from 10 to 100%.

To help with creation of CSS gradients, you can use a generator such as Collorzilla’s Gradient Editor.

Now that we have seen how to create a maximum of building blocks from a single div, let’s build our ladybug!

How to Create an Icon With a Single div

Step 1: The Body

Here comes the one single HTML line of this tutorial:

1	<div class="ladybug"></div>

To allow our icon to be easily resizable we will use flexible units of measurement; em and %. Thanks to this you will be able to resize as you wish, simply by altering the font-size on the element. All modern browsers support the CSS we’re using, so I’ll let you change the vendor prefixes depending on your needs.

We’ll start by giving shape and color to our ladybug’s body:

.ladybug {
	position: relative;
	font-size: 60px;
	width: 1.8em;
	height: 2em;
	border-radius: 50%;
	background-color: #E11;
}

Now let’s apply the points on the body using the radial-gradient property.

.ladybug {
	position: relative;
	font-size: 60px;
	width: 1.8em;
	height: 2em;
	border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%,transparent 33%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%);	background-color: #E11;
	background-repeat: no-repeat;
	background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
	background-size: 0.5em 0.5em;
}

Excellent work – we’ve finished with the body for the moment.

Step 2: The Head

This part is the quickest. We’ll draw a half circle black and place it on top of the body. For this we will use the pseudo element ::before.

.ladybug::before {
	content: '';
	position: absolute;
	display: block;
	height: 0.5em;
	width: 1.2em;
	top: -0.24em;
	background: black;
	left: 0.3em;
	border-radius: 50% 50% 0% 0% / 100% 100% 0 0;
}

Step 3: The Eyes

Here we will create eyes using the pseudo element ::after and the CSS box-shadow property. We begin by creating our basic circle (the pupil) then we will “clone” this element to create the white of the eye, the outline and the other eye.

.ladybug::after {
	content: '';
	position: absolute;
	display: block;
	height: 0.1em;
	width: 0.1em;
	background: black;
	top: -0.1em;
	left: 0.5em;
	border-radius: 50%;
	box-shadow: 0 0 0 0.1em white,0em 0 0 0.13em black,0.7em 0 0 0 black,0.7em 0 0 0.1em white,0.7em 0 0 0.13em black;
}

Step 4: The Legs

You must be thinking “we have a left over element”. Don’t worry, we will reuse the same box shadow used for eyes.

1	.ladybug::after {
2	content: '';
3	position: absolute;
4	display: block;
5	height: 0.1em;
6	width: 0.1em;
7	background: black;
8	top: -0.1em;
9	left: 0.5em;
10	border-radius: 50%;
11	box-shadow: 0 0 0 0.1em white,0em 0 0 0.13em black,0.7em 0 0 0 black,0.7em 0 0 0.1em white,0.7em 0 0 0.13em black,1.2em 0.5em 0 0.02em black,1.35em 1.1em 0 0.02em black,1.2em 1.65em 0 0.02em black,-0.5em 0.5em 0 0.02em black,-0.65em 1.1em 0 0.02em black,-0.5em 1.65em 0 0.02em black;
12	}

Our ladybug icon is finally finished!

Step 5: The Bonus!

We’re actually not quite finished. Here is the bonus CSS code to animate our ladybug on hover:

1	@keyframes ladybug
2	{
3	0% {
4	background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
5	}
6
7	50% {
8	background-position: 0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em;
9	}
10
11	100% {
12	background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
13	}
14	}
15
16	.ladybug:hover {
17	animation: ladybug 1s;
18	}

We begin by defining some keyframes which we name ladybug. We then trigger those keyframes into action on the hover state of our icon. The keyframes each alter the background position of our ladybug’s spots

Final Result

Here’s a reminder of what we’ve created:

Conclusion

Through this tutorial I hope I’ve shown you the potential of CSS, and what’s possible with a single HTML element. It’s always wise to consider browser support for the CSS properties discussed in this tutorial, making sure that they degrade gracefully.

More Inspiration

a.singlediv.com

Post date January 20, 2014

This content originally appeared on Envato Tuts+ Tutorials and was authored by Vincent Durand

It’s possible to build a surprising amount of graphics with CSS alone. Let’s create a cute ladybug icon with just a single div element!

A Single Div Demo

Here’s our cute ladybug (hover over it). And take a look at the HTML markup; just one single <div> element!

We’ll use a combination of CSS gradients, pseudo elements, and box shadows to build our graphic. Let’s jump in!

How to Get Creative With a Single Div

Pseudo Elements

For example, take this markup:

1	<div class="square"></div>

Then apply the following style rules:

.square {
	position: relative;
	background: blue;
	width: 50px;
	height: 50px;
}
.square::before {
	position: absolute;
	left: -50px;	
	content: '';
	height: 50px;
	width: 50px;
	display: block;
	background: green;
}
.square::after {
	position: absolute;
	left: 50px;
	content: '';
	height: 50px;
	width: 50px;
	display: block;
	background: red;	
}

For the purpose of this exercise we’ll use pixel values, though it’s often advisable to use flexible units of measurement such as ems.

So there we go: one single div, but three building blocks:

The double colon (::), as opposed to a single colon, is CSS3 syntax. It differentiates pseudo elements from pseudo selectors, such as :hover.

1	<div class="square">
2	<div class="before"></div>
3	<div class="after"></div>
4	</div>

Box Shadows

.circle {
	position: relative;
	background: blue;
	width: 50px;
	height: 50px;
	border-radius:50%;
	box-shadow: -110px 0 0 -20px purple,
                -60px 0 0 -10px red,
                80px 0 0 10px green,
                180px 0 0 20px orange;
}

As you can see, the box shadows allow you to reduce or increase the size of your inital shape and place it where you want.

The property detail box-shadow: 80px 5px 1px 10px green can be broken up as follows:

80px offset-x This allows you to place your shadow along the x axis, taking as origin the center of your original shape
5px offset-y This allows you to place your shadow along the y axis, taking as origin the center of your original shape
1px blur-radius The larger this value, the bigger the blur, so the shadow becomes bigger and lighter
10px spread-radius Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink
green color The color of your shape :)

The first shadow defined will always appear above subsequent shadows.

The inset value also gives us various possibilities:

.ball {
	position: relative;
	background: blue;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	box-shadow: inset 20px 0 0 -10px yellow,
                inset -20px 0 0 -10px red;
}

Gradients

In this example we will create four different circles using radial gradients and we’ll distribute them within the parent element.

.background {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 10%,transparent 10%,transparent 100%),
				radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%,transparent 32%,transparent 100%),
				radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 52%,transparent 100%),
				radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 60%,transparent 62%,transparent 100%);
	background-color: red;
	background-repeat: no-repeat;
	background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;
	background-size: 50px 50px;
	width: 100px;
	height: 100px;
	position: relative;
}

The Gradient property in detail: background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1)

ellipse shape: Could be circle or ellipse, in this example both do the same things.
at center position: Could also be expressed as background-position(center = 50% 50%).
rgba(0, 0, 0, 1) 10% color and limit: Increase the limit value to enlarge the circle.
transparent 10% color and limit: This limit value defines the end of your previous color. Specify a limit slightly higher than the previous limit to allow for smoother edges.
transparent 100% color and limit: The gradient will then be transparent from 10 to 100%.

To help with creation of CSS gradients, you can use a generator such as Collorzilla’s Gradient Editor.

Now that we have seen how to create a maximum of building blocks from a single div, let’s build our ladybug!

How to Create an Icon With a Single div

Step 1: The Body

Here comes the one single HTML line of this tutorial:

1	<div class="ladybug"></div>

We’ll start by giving shape and color to our ladybug’s body:

.ladybug {
	position: relative;
	font-size: 60px;
	width: 1.8em;
	height: 2em;
	border-radius: 50%;
	background-color: #E11;
}

Now let’s apply the points on the body using the radial-gradient property.

.ladybug {
	position: relative;
	font-size: 60px;
	width: 1.8em;
	height: 2em;
	border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%,transparent 33%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%);	background-color: #E11;
	background-repeat: no-repeat;
	background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
	background-size: 0.5em 0.5em;
}

Excellent work - we’ve finished with the body for the moment.

Step 2: The Head

This part is the quickest. We’ll draw a half circle black and place it on top of the body. For this we will use the pseudo element ::before.

.ladybug::before {
	content: '';
	position: absolute;
	display: block;
	height: 0.5em;
	width: 1.2em;
	top: -0.24em;
	background: black;
	left: 0.3em;
	border-radius: 50% 50% 0% 0% / 100% 100% 0 0;
}

Step 3: The Eyes

.ladybug::after {
	content: '';
	position: absolute;
	display: block;
	height: 0.1em;
	width: 0.1em;
	background: black;
	top: -0.1em;
	left: 0.5em;
	border-radius: 50%;
	box-shadow: 0 0 0 0.1em white,0em 0 0 0.13em black,0.7em 0 0 0 black,0.7em 0 0 0.1em white,0.7em 0 0 0.13em black;
}

Step 4: The Legs

You must be thinking “we have a left over element”. Don’t worry, we will reuse the same box shadow used for eyes.

1	.ladybug::after {
2	content: '';
3	position: absolute;
4	display: block;
5	height: 0.1em;
6	width: 0.1em;
7	background: black;
8	top: -0.1em;
9	left: 0.5em;
10	border-radius: 50%;
11	box-shadow: 0 0 0 0.1em white,0em 0 0 0.13em black,0.7em 0 0 0 black,0.7em 0 0 0.1em white,0.7em 0 0 0.13em black,1.2em 0.5em 0 0.02em black,1.35em 1.1em 0 0.02em black,1.2em 1.65em 0 0.02em black,-0.5em 0.5em 0 0.02em black,-0.65em 1.1em 0 0.02em black,-0.5em 1.65em 0 0.02em black;
12	}

Our ladybug icon is finally finished!

Step 5: The Bonus!

We’re actually not quite finished. Here is the bonus CSS code to animate our ladybug on hover:

1	@keyframes ladybug
2	{
3	0% {
4	background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
5	}
6
7	50% {
8	background-position: 0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em;
9	}
10
11	100% {
12	background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
13	}
14	}
15
16	.ladybug:hover {
17	animation: ladybug 1s;
18	}

Final Result

Here’s a reminder of what we’ve created:

Conclusion

More Inspiration

a.singlediv.com

This content originally appeared on Envato Tuts+ Tutorials and was authored by Vincent Durand

Print Share Comment Cite Upload Translate Updates

APA

Vincent Durand | Sciencx (2014-01-20T01:50:05+00:00) Create a Ladybug Icon With CSS and a Single Div Element. Retrieved from https://www.scien.cx/2014/01/20/create-a-ladybug-icon-with-css-and-a-single-div-element/

MLA

" » Create a Ladybug Icon With CSS and a Single Div Element." Vincent Durand | Sciencx - Monday January 20, 2014, https://www.scien.cx/2014/01/20/create-a-ladybug-icon-with-css-and-a-single-div-element/

HARVARD

Vincent Durand | Sciencx Monday January 20, 2014 » Create a Ladybug Icon With CSS and a Single Div Element., viewed ,<https://www.scien.cx/2014/01/20/create-a-ladybug-icon-with-css-and-a-single-div-element/>

VANCOUVER

Vincent Durand | Sciencx - » Create a Ladybug Icon With CSS and a Single Div Element. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2014/01/20/create-a-ladybug-icon-with-css-and-a-single-div-element/

CHICAGO

" » Create a Ladybug Icon With CSS and a Single Div Element." Vincent Durand | Sciencx - Accessed . https://www.scien.cx/2014/01/20/create-a-ladybug-icon-with-css-and-a-single-div-element/

IEEE

" » Create a Ladybug Icon With CSS and a Single Div Element." Vincent Durand | Sciencx [Online]. Available: https://www.scien.cx/2014/01/20/create-a-ladybug-icon-with-css-and-a-single-div-element/. [Accessed: ]

rf:citation

» Create a Ladybug Icon With CSS and a Single Div Element | Vincent Durand | Sciencx | https://www.scien.cx/2014/01/20/create-a-ladybug-icon-with-css-and-a-single-div-element/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

1	.square {
2	position: relative;
3	background: blue;
4	width: 50px;
5	height: 50px;
6	}
7	.square::before {
8	position: absolute;
9	left: -50px;
10	content: '';
11	height: 50px;
12	width: 50px;
13	display: block;
14	background: green;
15	}
16	.square::after {
17	position: absolute;
18	left: 50px;
19	content: '';
20	height: 50px;
21	width: 50px;
22	display: block;
23	background: red;
24	}

1	.circle {
2	position: relative;
3	background: blue;
4	width: 50px;
5	height: 50px;
6	border-radius:50%;
7	box-shadow: -110px 0 0 -20px purple,
8	-60px 0 0 -10px red,
9	80px 0 0 10px green,
10	180px 0 0 20px orange;
11	}

1	.ball {
2	position: relative;
3	background: blue;
4	width: 50px;
5	height: 50px;
6	border-radius: 50%;
7	box-shadow: inset 20px 0 0 -10px yellow,
8	inset -20px 0 0 -10px red;
9	}

1	.background {
2	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 10%,transparent 10%,transparent 100%),
3	radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%,transparent 32%,transparent 100%),
4	radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 52%,transparent 100%),
5	radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 60%,transparent 62%,transparent 100%);
6	background-color: red;
7	background-repeat: no-repeat;
8	background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;
9	background-size: 50px 50px;
10	width: 100px;
11	height: 100px;
12	position: relative;
13	}

1	.ladybug {
2	position: relative;
3	font-size: 60px;
4	width: 1.8em;
5	height: 2em;
6	border-radius: 50%;
7	background-color: #E11;
8	}

1	.ladybug::before {
2	content: '';
3	position: absolute;
4	display: block;
5	height: 0.5em;
6	width: 1.2em;
7	top: -0.24em;
8	background: black;
9	left: 0.3em;
10	border-radius: 50% 50% 0% 0% / 100% 100% 0 0;
11	}

A Single Div Demo

Pseudo Elements

Box Shadows

Gradients

How to Create an Icon With a Single div

Step 1: The Body

Step 2: The Head

Step 3: The Eyes

Step 4: The Legs

Step 5: The Bonus!

Final Result

Conclusion

More Inspiration

Related Posts