Create a Ladybug Icon With CSS and a Single Div Factor

It’s attainable to construct a shocking quantity of graphics with CSS alone. Let’s create a cute ladybug icon with only a single div component!

The way to Get Artistic With a Single Div

Earlier than we start, there are some CSS expertise you’ll want. The primary drawback with single components resides in the truth that we’re restricted to the variety of “constructing blocks” we are able to use. Fortunately, there are some methods:

Pseudo Components

Pseudo components (additionally known as generated content material) don’t exist within the doc markup itself (the DOM) however are created by the CSS. They give you the chance so as to add to your default component two others which may (kind of) use the identical properties.

For instance, take this markup:

1

<div class="sq."></div>

Then apply the next fashion guidelines:

1

.sq. {

2

	place: relative;

3

	background: blue;

4

	width: 50px;

5

	top: 50px;

6

}

7

.sq.::earlier than {

8

	place: absolute;

9

	left: -50px;	

10

	content material: '';

11

	top: 50px;

12

	width: 50px;

13

	show: block;

14

	background: inexperienced;

15

}

16

.sq.::after {

17

	place: absolute;

18

	left: 50px;

19

	content material: '';

20

	top: 50px;

21

	width: 50px;

22

	show: block;

23

	background: pink;	

24

}

So there we go: one single div, however three constructing blocks:

At this stage it’s price noting that some CSS3 properties gained’t work with generated content material:

One other issues to know is that generated content material shall be displayed on high of the default component, until you give them a decrease z-index worth than the mother or father. Browsers interpret them as if they’re situated inside the default component. If we had been to symbolize the pseudo components with precise markup the code would appear like this:

1

<div class="sq.">

2

	<div class="earlier than"></div>

3

	<div class="after"></div>

4

</div>

Field Shadows

If pseudo components alone don’t provide you with sufficient blocks to construct your icon, you can too use field shadows. This method will mean you can create as many clones as you need. Let’s take a look at an instance with a circle:

1

<div class="circle"></div>

1

.circle {

2

	place: relative;

3

	background: blue;

4

	width: 50px;

5

	top: 50px;

6

	border-radius:50%;

7

	box-shadow: -110px 0 0 -20px purple,

8

                -60px 0 0 -10px pink,

9

                80px 0 0 10px inexperienced,

10

                180px 0 0 20px orange;

11

}

As you’ll be able to see, the field shadows mean you can scale back or enhance the scale of your inital form and place it the place you need.

The property element box-shadow: 80px 5px 1px 10px inexperienced will be damaged up as follows:

• 80px offset-x This lets you place your shadow alongside the x axis, taking as origin the middle of your unique form
• 5px offset-y This lets you place your shadow alongside the y axis, taking as origin the middle of your unique form
• 1px blur-radius The bigger this worth, the larger the blur, so the shadow turns into greater and lighter
• 10px spread-radius Constructive values will trigger the shadow to increase and develop greater, adverse values will trigger the shadow to shrink
• inexperienced colour The colour of your form 🙂

The inset worth additionally provides us varied prospects:

1

<div class="ball"></div>

1

.ball {

2

	place: relative;

3

	background: blue;

4

	width: 50px;

5

	top: 50px;

6

	border-radius: 50%;

7

	box-shadow: inset 20px 0 0 -10px yellow,

8

                inset -20px 0 0 -10px pink;

9

}

Gradients

Like shadows, CSS gradients will be mixed and positioned independently. Utilizing gradients to create shapes is a little more sophisticated than the earlier properties, so let’s give attention to a “easy” instance.

On this instance we are going to create 4 completely different circles utilizing radial gradients and we’ll distribute them inside the mother or father component.

1

<div class="background"></div>

1

.background {

2

    background: radial-gradient(ellipse at heart, rgba(0, 0, 0, 1) 10%,clear 10%,clear 100%),

3

				radial-gradient(ellipse at heart, rgba(0, 0, 0, 1) 30%,clear 32%,clear 100%),

4

				radial-gradient(ellipse at heart, rgba(0, 0, 0, 1) 50%,clear 52%,clear 100%),

5

				radial-gradient(ellipse at heart, rgba(0, 0, 0, 1) 60%,clear 62%,clear 100%);

6

	background-color: pink;

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

	top: 100px;

12

	place: relative;

13

}

To grasp this demo you need to think about a grid on the component. Every cell of the grid can be a unique gradient. On this case cells are 50px by 50px (background-size: 50px 50px;). I’ve intentionally unfold them inside the component however bear in mind that they will also be superimposed. Every cell will be positioned on a separate x and y axis, with origin within the higher left nook of the bottom component (background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;).

The Gradient property intimately: background: radial-gradient(ellipse at heart, rgba(0, 0, 0, 1)

• ellipse form: Might be circle or ellipse, on this instance each do the identical issues.
• at heart  place: Is also expressed as background-position(heart = 50% 50%).
• rgba(0, 0, 0, 1) 10% colour and restrict: Enhance the restrict worth to enlarge the circle.
• clear 10% colour and restrict: This restrict worth defines the top of your earlier colour. Specify a restrict barely increased than the earlier restrict to permit for smoother edges.
• clear 100% colour and restrict: The gradient will then be clear from 10 to 100%.

To assist with creation of CSS gradients, you should use a generator comparable to Collorzilla’s Gradient Editor.

Now that we now have seen how you can create a most of constructing blocks from a single div, let’s construct our ladybug!

The way to Create an Icon With a Single div

Step 1: The Physique

Right here comes the one single HTML line of this tutorial:

1

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

To permit our icon to be simply resizable we are going to use versatile models of measurement; em and %. Because of this it is possible for you to to resize as you want, just by altering the font-size on the component. All fashionable browsers assist the CSS we’re utilizing, so I’ll allow you to change the vendor prefixes relying in your wants.

We’ll begin by giving form and colour to our ladybug’s physique:

1

.ladybug {

2

	place: relative;

3

	font-size: 60px;

4

	width: 1.8em;

5

	top: 2em;

6

	border-radius: 50%;

7

	background-color: #E11;

8

}

Now let’s apply the factors on the physique utilizing the radial-gradient property.

1

.ladybug {

2

	place: relative;

3

	font-size: 60px;

4

	width: 1.8em;

5

	top: 2em;

6

	border-radius: 50%;

7

    background: radial-gradient(ellipse at heart, rgba(0, 0, 0, 1) 30%,clear 33%,clear 100%),

8

		radial-gradient(ellipse at heart, rgba(0, 0, 0, 1) 50%,clear 55%,clear 100%),

9

		radial-gradient(ellipse at heart, rgba(0, 0, 0, 1) 50%,clear 55%,clear 100%),

10

		radial-gradient(ellipse at heart, rgba(0, 0, 0, 1) 40%,clear 43%,clear 100%),

11

		radial-gradient(ellipse at heart, rgba(0, 0, 0, 1) 40%,clear 43%,clear 100%),

12

		radial-gradient(ellipse at heart, rgba(0, 0, 0, 1) 45%,clear 50%,clear 100%),

13

		radial-gradient(ellipse at heart, rgba(0, 0, 0, 1) 45%,clear 50%,clear 100%);	background-color: #E11;

14

	background-repeat: no-repeat;

15

	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;

16

	background-size: 0.5em 0.5em;

17

}

Glorious work – we’ve completed with the physique for the second.

Step 2: The Head

This half is the quickest. We’ll draw a half circle black and place it on high of the physique. For this we are going to use the pseudo component ::earlier than.

1

.ladybug::earlier than {

2

	content material: ’’;

3

	place: absolute;

4

	show: block;

5

	top: 0.5em;

6

	width: 1.2em;

7

	high: -0.24em;

8

	background: black;

9

	left: 0.3em;

10

	border-radius: 50% 50% 0% 0% / 100% 100% 0 0;

11

}

Step 3: The Eyes

Right here we are going to create eyes utilizing the pseudo component ::after and the CSS box-shadow property. We start by creating our primary circle (the pupil) then we are going to “clone” this component to create the white of the attention, the define and the opposite eye.

1

.ladybug::after {

2

	content material: ’’;

3

	place: absolute;

4

	show: block;

5

	top: 0.1em;

6

	width: 0.1em;

7

	background: black;

8

	high: -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;

12

}

Step 4: The Legs

You have to be pondering “we now have a left over component”. Don’t fear, we are going to reuse the identical field shadow used for eyes.

1

	.ladybug::after {

2

	content material: ’’;

3

	place: absolute;

4

	show: block;

5

	top: 0.1em;

6

	width: 0.1em;

7

	background: black;

8

	high: -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 lastly completed!

Step 5: The Bonus!

We’re really not fairly completed. Right 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 start by defining some keyframes which we identify ladybug. We then set off these keyframes into motion on the hover state of our icon. The keyframes every alter the background place of our ladybug’s spots

Ultimate Outcome

Right here’s a reminder of what we’ve created:

Conclusion

Via this tutorial I hope I’ve proven you the potential of CSS, and what’s attainable with a single HTML component. It’s all the time sensible to think about browser assist for the CSS properties mentioned on this tutorial, ensuring that they degrade gracefully.

Extra Inspiration