Categories
CSS Web development

CSS Doughnut

CSS Doughnut

Demo:

*to see the CSS Doughnut on the website click here.

What do you need to do?

To create the CSS Doughnut follow the steps below:

  1. Add HTML
  2. Add CSS

Step 1.

Add HTML

<div class="doughnut">
  <div class="cake"></div>
  <div class="sprinkles"></div>
</div>

Step 2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #2dc7ff;
}

.doughnut {
  position: relative;
}

Style the doughnut:

.doughnut:before {
  content:"";
  position: absolute;
  width:300px;
  height:50px;
  border-radius:50%;
  background-color: rgba(0,0,0,0.2);
  top:260px;
  left:120px;
  transform: skew(-55deg);
}

.doughnut:after {
  content:"";
  position: absolute;
  width:70px;
  height:10px;
  border-radius:50%;
  background-color: #2dc7ff;
  top:275px;
  left:250px;
  transform: skew(-55deg);
}

.cake {
  position: relative;
  width:300px;
  height: 300px;
  background-color: #eaba6b;
  border-radius:50%;
  box-shadow: 5px 5px #a68349;
}

.cake:before {
  position: absolute;
  content:"";
  background-color: #ea526f;
  width:100px;
  height:100px;
  border-radius: 50%;
  top:40px;
  left:40px;
  box-shadow:60px -20px #ea526f, 120px 0px #ea526f, 140px 40px #ea526f, 130px 100px #ea526f, 100px 140px #ea526f, 50px 150px #ea526f, 0px 120px #ea526f, -30px 60px #ea526f;
}

.cake:after {
  content:"";
  position: absolute;
  width: 100px;
  height:100px;
  border-radius:50%;
  background-color: #2dc7ff;
  top:100px;
  left:100px;
  box-shadow: inset 10px 5px #a68349;
}

Add some sprinkles:

.sprinkles {
  position: absolute;
  width: 5px;
  height: 20px;
  background-color: #ffe45e;
  border-radius:10px;
  top:60px;
  left:100px;
  transform: rotate(30deg);
  box-shadow: 100px 130px #2dc7ff, -10px 90px #7b1e7a, 150px 20px #d80032;
}

.sprinkles:before {
  content:"";
  position: absolute;
  width: 5px;
  height: 20px;
  background-color: #2dc7ff;
  border-radius:10px;
  top:60px;
  left:0px;
  transform: rotate(-30deg);
  box-shadow: 100px 130px #f49f0a, -10px 90px #d80032, 150px 20px #c5d86d;
}

.sprinkles:after {
  content:"";
  position: absolute;
  width: 5px;
  height: 20px;
  background-color: #2dc7ff;
  border-radius:10px;
  top:-50px;
  left:110px;
  transform: rotate(45deg);
  box-shadow: 30px 30px #ffe45e, 120px 90px #ef233c;
}

Enjoy coding!

Read also:

CSS Coffee Express Animation

CSS Ice cream

CSS Coffee Cup

Categories
Adobe Illustrator

How to make a doughnut in Adobe Illustrator?

Let’s have some fun with doughnuts! Today, in this tutorial step by step you’ll learn how to make a doughnut in Adobe Illustrator (CS6) using basic shapes and filters (watch also the video tutorial).

draw a doughnut in Adobe Illustrator

Step 1.

Create a new document, and by using Eclipse Tool draw a circle, and draw another smaller circle inside. Duplicate both paths.

draw a doughnut in Adobe Illustrator
draw a doughnut in Adobe Illustrator
draw a doughnut in Adobe Illustrator

Step 2.

Remove stroke from the bigger circles, make the front circle smaller, and set the light brown colour to the front circle and darker brown to the back circle.

draw a doughnut in Adobe Illustrator

We’ll do now similar thing to the small circles. Remove stroke from the smaller circles, make the front circle smaller, and set the white colour to the front circle and pink to the back one.

draw a doughnut in Adobe Illustrator

Step 3.

Using Eclipse Tool draw a circle, and fill it pink.

draw a doughnut in Adobe Illustrator

Go to Effects->Distort & Transform->Zig Zag.

draw a doughnut in Adobe Illustrator

Set the size 3mm, ridges per segment 4, and points Smooth.

draw a doughnut in Adobe Illustrator

Move the new shape on the doughnut and adjust the size (if necessary reorder the layers in the Layers Panel).

draw a doughnut in Adobe Illustrator

Step 4.

Use Rounded Rectangle Tool and put small colourful rectangles all over the new shape.

draw a doughnut in Adobe Illustrator

The doughnut is ready! Fast and easy. Isn’t it? 🙂

draw a doughnut in Adobe Illustrator

Watch also the video tutorial:

Read also:

How to draw a paper plane in Adobe Illustrator?

How to draw Easter eggs in Adobe Illustrator?