Categories
CSS HTML Web development

How to create a custom checkbox and radio button with CSS?

CSS Custom Checkbox

Demo:

*to see the CSS Custom Checkbox demo on the website click here.

CUSTOM CHECKBOX

Step1.

Add HTML

<h3>Custom Checkbox:</h3>
<label class="customContainer">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="customContainer">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="customContainer">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

Step2.

Add CSS

.customContainer {
    display: block;
    position: relative;
    color: #333;
    padding-left:40px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 25px;
    user-select: none; 
}

.customContainer input {
  	position: absolute;
	  opacity: 0;
    cursor: pointer;}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #ffe8d6;
}

.customContainer:hover input ~ .checkmark {
    background-color: #b7b7a4;
}

.customContainer input:checked ~ .checkmark {
    background-color: #6b705c;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.customContainer input:checked ~ .checkmark:after {
    display: block;
}

.customContainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

Output:

Custom Checkboxes

CUSTOM RADIO BUTTON

Step1.

Add HTML

<h3>Custom Radio Button:</h3>
<label class="customContainer">One
  <input type="radio" checked="checked" name="radio">
  <span class="radioButton"></span>
</label>
<label class="customContainer">Two
  <input type="radio" name="radio">
  <span class="radioButton"></span>
</label>
<label class="customContainer">Three
  <input type="radio" name="radio">
  <span class="radioButton"></span>
</label>

Step2.

Add CSS

.customContainer {
    display: block;
    position: relative;
    color: #333;
    padding-left:40px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 25px;
    user-select: none; 
}

.customContainer input {
  	position: absolute;
	  opacity: 0;
    cursor: pointer;}

.radioButton {
  position: absolute;
  background-color: #ffe8d6;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 50%;
}

.customContainer:hover input ~ .radioButton{
  background-color: #b7b7a4;
}

.customContainer input:checked ~ .radioButton{
  background-color: #6b705c;
}

.radioButton:after {
  content: "";
  position: absolute;
  display: none;
}

.customContainer input:checked ~ .radioButton:after {
  display: block;
}

.customContainer .radioButton:after {
  background-color: #fff;
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

Output:

Custom Radio Button:

Enjoy coding!

Categories
HTML Web development

HTML Checkbox

The checkbox is shown as a square box that is ticked (checked) when activated. Using checkboxes is a good option when you want to give your website visitors the option to choose one or more options of a limited number of choices.

HTML Checkbox

The <input type="checkbox"> defines a checkbox.

Syntax:

<input type="checkbox">

Example:

<!DOCTYPE html>
<html>
<body>
<div><h3>How many cats do you have?</h3><br>
  <input type="checkbox" id="one" name="one" value="one">
  <label for="one"> One</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> Two</label><br>
  <input type="checkbox" id="two" name="three" value="three">
  <label for="three"> Three</label><br>
  <input type="checkbox" id="other" name="other" value="other">
  <label for="other"> Other</label><br>
 
</div>
</body>
</html>

Note: Always add the <label> tag.

Output:

How many cats do you have?






Click here to see how to stye HTML Checkbox using CSS.

Enjoy coding!

Categories
CSS Web development

CSS Train Front Animation/ Loader

CSS Train Front Animation

Demo:

*to see the animation on the website click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
  <div class="track"></div>
  <div class="train"></div>
</div>

Step2.

Add CSS

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
}

.container {
  position: relative;
}

Add the track:

.track {
  position: relative;
  overflow:hidden;
  width:50px;
  height:100px;
  border-left: 3px solid #333;
  transform: skew(-10deg) rotateX(45deg);
}

.track:before {
  content:"";
  position: absolute;
  height:3px;
  width:50px;
  background-color: #333;
  top:90px;
  box-shadow: 0 0 #333, 0 -10px #333, 0 -20px #333, 0 -30px #333, 0 -40px #333, 0 -50px #333, 0 -50px #333, 0 -60px #333,0 -70px #333, 0 -80px #333, 0 -90px #333, 0 -100px #333, 0 -110px #333, 0 -120px #333, 0 -130px #333, 0 -140px #333;
  animation: track 1s linear infinite;
}
.track:after {
  content:"";
  position: absolute;
  transform: rotate(-15deg);
  width:50px;
  height: 120px;
  background-color: #fff;
  border-left: 3px solid #333;
  left:30px;
  top:-10px;
}

Style the train:

.train {
  position: absolute;
  width: 60px;
  height:60px;
  background-color: #333;
  border-radius:15px;
  top:0;
  left:-13px;
  transform-origin: bottom;
  animation: rotate 1s linear infinite;
}

.train:before {
  content:"";
  position: absolute;
  background-color: #ced4da;
  width:20px;
  height:15px;
  left:9px;
  top:15px;
  box-shadow: 22px 0 #ced4da;
}

.train:after {
  content:"";
  position: absolute;
  background-color: #ced4da;
  border-radius:50%;
  height:10px;
  width:10px;
  top:45px;
  left:10px;
  box-shadow: 30px 0px #ced4da;
}

Step3.

Add CSS Animation

@keyframes track {
  0% {transform: translateY(70px) rotateX(45deg);}
  100% {transform: translateY(0px) rotateX(45deg);}
}

@keyframes rotate {
  0% {transform: rotate(0);}
  25% {transform: rotate(2deg);}
  50% {transform: rotate(0);}
  75% {transform: rotate(-2deg);}
  100% {transform: rotate(0);}
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Folded Birthday Card

CSS Folded Greeting Card

Demo:

*to see the CSS Folded Card on the website click here.

Step1.

Add HTML

Front side of the card:

<div class="birthdayCard">
<div class="cardFront"><h3 class="happy">HAPPY BIRTHDAY!</h3>
<div class="balloons">
  <div class="balloonOne"></div>
  <div class="balloonTwo"></div>
  <div class="balloonThree"></div>
  <div class="balloonFour"></div>
</div>
</div>

Step2.

Add CSS

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

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

.birthdayCard {
  position: relative;
  width: 250px;
  height:350px;
  cursor: pointer;
  transform-style: preserve-3d;
	transform: perspective(2500px);
  transition: 1s;
}

Style front side of the card:

.cardFront {
  position: relative;
  background-color: #fff;
  width: 250px;
  height:350px;
  overflow: hidden;
  transform-origin: left;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 30px 0 50px rgba(0,0,0,0.4);
  transition: .6s;
}

.happy {
  font-family: Tahoma, sans-serif;
  text-align: center;
  margin:30px; 
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  transition: .1s;
}

.balloons {
  position: absolute;
}

.balloonOne, .balloonTwo, .balloonThree, .balloonFour {
  position: absolute;
  width: 85px;
  height:95px;
  border-radius:50%;
}

.balloonOne {
  background-color: rgb(239, 71, 111, 0.7);
  left:-10px;
  top:50px;
}

.balloonTwo {
  background-color: rgb(6, 214, 160, 0.7);
  left:50px;
  top:20px;
}

.balloonThree {
  background-color: rgb(255, 209, 102, 0.7);
  left:110px;
  top:50px;
}

.balloonFour {
  background-color: rgb(17, 138, 178, 0.7);
  left:170px;
  top:20px;
}

.balloonOne:before, .balloonTwo:before, .balloonThree:before, .balloonFour:before {
  content:"";
  position: absolute;
  width:1px;
  height: 155px;
  background-color: #ffd166;
  top:95px;
  left:43px;
}

.balloonOne:after, .balloonTwo:after, .balloonThree:after, .balloonFour:after {
  content:"";
  position: absolute;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  top:94px;
  left:37px;
}

.balloonOne:after {
  border-bottom: 10px solid #ef476f;
}

.balloonTwo:after {
  border-bottom: 10px solid #06d6a0;
}

.balloonThree:after {
  border-bottom: 10px solid #ffd166;
}

.balloonFour:after {
  border-bottom: 10px solid #118ab2;
}

Step3.

Add HTML

To create the card inside:

 <div class="cardInside">
    <h3 class="back">HAPPY BIRTHDAY!</h3>
    <p>Dear Friend,</p>
    <p>Happy birthday!! I hope your day is filled with lots of love and laughter! May all of your birthday wishes come true.</p>
    <p class="name">xxx</p>
  </div>
</div>

Step4.

Add CSS

Style the card inside:

.cardInside {
  position: absolute;
  background-color: #fff;
  width: 250px;
  height:350px;
  z-index:-1;
  left:0;
  top:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
}

p {
  font-family: 'Brush Script MT', cursive;
  margin: 40px;
  color: #333;
}

.name {
  position: absolute;
  left:150px;
  top:200px;
  color: #333;
}

.back {
  font-family: Tahoma, sans-serif;
  color: #333;
  text-align: center;
  margin:30px; 
  outline-color:#333;
  outline-style: dotted;
}

Step5.

Add CSS Transitions

.birthdayCard:hover {
	transform: perspective(2500px) rotate(5deg);
	box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 0 10px 100px rgba(0,0,0,0.5);
}

.birthdayCard:hover .cardFront {
  transform: rotateY(-160deg); 
}

.birthdayCard:hover .happy {
  visibility:hidden; 
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Long Shadow Text Effect

CSS Long Shadow Text Effect

Demo:

*to see the CSS Long Shadow Text Effect on the website click here.

Step1.

Add HTML

<div class="container">
  <div class="text">LONG SHADOW</div>
</div>

Step2.

Add CSS

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

body {
  height:100vh;
  align-items: center;
  justify-content: center;
  display: flex;
}

.container {
  position: relative;
  width:400px;
  height:100px;
  overflow: hidden;
  background-color: #00b4d8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 10px 10px rgba(0,0,0,0.3);
}

Style the text. To create the long shadow effect we will use the CSS text-shadow property.

.text {
  font-family: arial black;
  color: white;
  font-size:40px;
  text-shadow: 0px 0px #0096c7,1px 1px #0096c7,2px 2px #0096c7,3px 3px #0096c7, 4px 4px #0096c7,5px 5px #0096c7,6px 6px #0096c7,7px 7px #0096c7,8px 8px #0096c7,9px 9px #0096c7,10px 10px #0096c7,11px 11px #0096c7,12px 12px #0096c7,13px 13px #0096c7,14px 14px #0096c7,15px 15px #0096c7,16px 16px #0096c7, 17px 17px #0096c7,18px 18px #0096c7,19px 19px #0096c7,20px 20px #0096c7,21px 21px #0096c7,22px 22px #0096c7,23px 23px #0096c7,24px 24px #0096c7,25px 25px #0096c7,26px 26px #0096c7,27px 27px #0096c7,28px 28px #0096c7, 29px 29px #0096c7,30px 30px #0096c7,31px 31px #0096c7,32px 32px #0096c7,33px 33px #0096c7,34px 34px #0096c7,35px 35px #0096c7,36px 36px #0096c7,37px 37px #0096c7,38px 38px #0096c7,39px 39px #0096c7,40px 40px #0096c7, 41px 41px #0096c7,42px 42px #0096c7,43px 43px #0096c7, 44px 44px #0096c7,45px 45px #0096c7,46px 46px #0096c7,47px 47px #0096c7,48px 48px #0096c7,49px 49px #0096c7,50px 50px #0096c7, 51px 51px #0096c7,52px 52px #0096c7,53px 53px #0096c7,54px 54px #0096c7,55px 55px #0096c7, 56px 56px #0096c7;
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Car Animation

CSS Car Animation

Demo:

*to see the animation on the website click here.

To create the CSS Car Animation follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="carAnimation">
    <div class="road"></div>
    <div class="car">
      <div class="colour"></div>
      <div class="windows"></div>
      <div class="leftWheel">
        <div class="wheel"></div>
      </div>
      <div class="rightWheel">
        <div class="wheel"></div>
      </div>
    </div>
    <div class="clouds"></div>
  </div>
</div>

Step2.

Add CSS

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
}

.container {
  position: relative;
}

.carAnimation {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background-color: #83c5be;
  border-radius:50%;
}

Create the road:

.road {
  position: absolute;
  background-color: #333;
  border-radius:20px;
  height:5px;
  width:220px;
  top:220px;
  left:40px;
  overflow:hidden;
}

.road:before {
  content:"";
  position: absolute;
  background-color: #83c5be;
  width:30px;
  height:5px;
  border-radius:5px; 
  animation: move 1s linear infinite reverse;
}
.road:after {
  content:"";
  position: absolute;
  width:15px;
  height:5px;
  background-color: #333;
  border-radius:5px; 
  box-shadow: 27px 0 #333;
  animation: move 1s linear infinite reverse;
}

Style the car:

.car {
  position: absolute;
  height:0;
  width:90px;
  border-right: 25px solid transparent;
  border-left: 20px solid transparent;
  border-bottom: 70px solid #333;
  z-index:2;
  top:140px;
  left:75px;  
}

.car:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:70px;
  height:40px;
  left:60px;
  top:30px;
}

.car:after {
  content:"";
  position: absolute; 
  background-color: #333;
  width:10px;
  height:35px;
  border-radius:10px;
  left:-22px;
  top:20px;
  transform: rotate(16deg);
}

.colour {
  position: absolute;
  height:0;
  width:80px;
  border-right: 20px solid transparent;
  border-left: 17.5px solid transparent;
  border-bottom: 60px solid #e5383b;
  top:5px;
  left:-12px;
}

.colour:before {
  content:"";
  position: absolute; 
  background-color: #e5383b;
  width:60px;
  height:30px;
  left:60px;
  top:30px;
}

.colour:after {
  position: absolute;
  content:"";
  background-color: #f9c74f;
  width:5px;
  height:15px;
  border: 3px solid #333;
  left:122px;
  top:44px;
  box-shadow: 0px -19px #333;
}

.windows {
  position: absolute; 
  height:0;
  width:70px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 28px solid #333;
  top:8px;
  left:4px;
}

.windows:before {
  content:"";
  position: absolute;
  height:0;
  width:65px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 22px solid #aed9e0;
  top:3px;
  left:-2.5px;
}

.windows:after {
  content:"";
  position: absolute;
  width:5px;
  height:25px;
  background-color: #333;
  left:45px;
  box-shadow: -25px 0 #333;
}

.leftWheel {
  position: absolute;
  width:35px;
  height:15px;
  border: 3px solid #333;
  background-color: #d3d3d3;
  border-radius: 30px 30px 0 0;
  top:47px;
  left:-5px;
}

.rightWheel {
  position: absolute;
  width:35px;
  height:15px;
  border: 3px solid #333;
  background-color: #d3d3d3;
  border-radius: 30px 30px 0 0;
  top:47px;
  left:75px;
}

.wheel {
  position: absolute;
  border-radius:50%;
  width:15px;
  height:15px;
  background-color: #d3d3d3;
  border: 8px solid #333;
  box-shadow: inset 5px 5px #f5f3f4;
  top:2px;
  left:2px;
  animation: spin .5s infinite linear;
}

Add some clouds:

.clouds {
  position: absolute;
  background-color: rgba(255,255,255,0.5);
  width:35px;
  height:10px;
  border-radius: 20px;
  top:100px;
  left:100px;
  z-index:1;
  box-shadow: 130px 50px rgba(255,255,255,0.5), -100px 20px rgba(255,255,255,0.5);
  animation: cloud 1.5s linear infinite reverse;
}

Step3.

Add CSS Animation

For the road:

@keyframes move {  
  from { left: -100px; }
    to { left: 200px; }
}

Make the wheels spin:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

To move the clouds:

@keyframes cloud {  
  from{left:-150px;}
  to{left: 400px;}
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Bouncing Basketball

Basketball player illustration
Do you like this image? Check more images in the store.

Demo:

*to see the animation on the website click here.

To create the CSS Bouncing Basketball follow the steps below:

Step1.

Add HTML

<div class="basketball">
    <div class="ball">
    <div class="lines"></div>
    </div>
  <div class="shadow"></div>
  </div>

Step2.

Add CSS

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
}

.basketball {
  position: relative;
  top: 50px;
  left:-50px;
}

Style the ball:

.ball {
  position: absolute;
  background-color: #e76f51;
  border-radius:50%;
  width:100px;
  height:100px;
  overflow: hidden;
  border: 3px solid #333;
  animation: bounce 1.5s ease-in infinite;
}
.ball:before, .ball:after {
  content:"";
  position: absolute;
  background-color: #333;
  width:110px;
  height:3px;
  top:50px;
  left:-5px;
}

.ball:before {
  transform: rotate(45deg);
}

.ball:after {
  transform: rotate(-45deg);
}

.lines {
  position: absolute;
  border-radius:50%;
  border: 3px solid #333;
  width:70px;
  height:70px;
  left:-20px;
  top:-20px;
}

.lines:before {
  content:"";
  position: absolute; 
  border-radius:50%;
  border: 3px solid #333;
  width:70px;
  height:70px;
  top:65px;
  left:60px;
}

Add the shadow:

.shadow {
  position: absolute;
  width:100px;
  height:15px;
  background-color: rgba(0,0,0,0.2);
  border-radius:50%;
  top:95px;
  z-index:-1;
  left:3px;
  animation: scale 1.5s ease-in infinite;
}

Step3.

Add CSS Animation

To make the ball bounce:

@keyframes bounce {
   0% {transform: translate3d(0, 0, 0) rotate(0deg);}
  25% {transform: translate3d(0, -185px, 0) rotate(90deg);}
  50% {transform: translate3d(0, 0, 0) rotate(180deg);}
  75% {transform: translate3d(0, -185px, 0) rotate(270deg);}
  100% {transform: translate3d(0, 0, 0) rotate(360deg);}
}

Scale the shadow:

@keyframes scale {
  0% {transform: scaleX(1);}
  25% {transform: scaleX(0.7);}
  50% {transform: scaleX(1);}
  75% {transform: scaleX(0.7);}
  100% {transform: scaleX(1);}
}

To see the animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
#SVG Web development

How to resize a SVG image?

Files in format .png or .jpg are easy to resize and in the most cases, you do not need to use any special software to do it.
The resizing is more complicated when you want to change the size for .svg format files.

resize SVG files

What is making the .svg different from other image formats?

There can be a lot of confusion about which kind of image format to use to achieve the best result in any given situation.

In the case of .jpg and .png formats, the size of the image depends on the number of pixels. The image resolution is therefore defined by the number of pixels that defined the height and width of an image.

The .svg is a vector-based image format. SVG defines the graphics in XML format. A vector image uses geometric forms such as points, lines, curves and shapes to represent different parts of the image as discrete objects. This is why they retain their high quality no matter how much you scale them (more about .svg file you can read here).

How to resize a SVG image?

SVG images can be created and edited with any text editor but it is often more convenient to create SVG images with a drawing program, like Illustrator, Sketch, Inkscape or another vector-based program.

I am using two ways to resize .svg files by using the text editor (you can use any text editor to resize your image).

Option 1:

When you will open the .svg file in the text editor it should show lines of code.

Example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

The width and height attributes of the element define the width and height of the SVG image. So you can change the width and height to what you want.

Option 2:

If you haven’t defined the width and the height of the image in the SVG code you can adjust the size in CSS:

svg {
  width:10%;
}

Example:

Hope this helps!

Categories
Photoshop

How to create an Easter Egg in Photoshop?

Easter Egg in Photoshop

Follow the steps below and watch the video tutorial:

Step1.

CREATE AN EGG SHAPE

Fill the background of any colour you like (colour used in the tutorial: #fffffc). Use the Ellipse Tool and draw a circle. Fill the circle of any colour you like.

Easter Egg in Photoshop

Go to Edit–>Transform–>Wrap.

egg shape in Photoshop

Click on the top of the circle and holding the button move the mouse up:

egg shape in Photoshop

Step2.

ADD EGG PATTERN

Create the new layer. Use Pen Tool and draw kind of broken shell/ zigzag shape.

egg in Photoshop

Right click on the path and select Make Selection…

easter egg in Photoshop

Press Shift+Delete (in Mac OS) to fill the path (used colour in the tutorial: #fefae0). Use the Pen Tool again and draw a similar path on the top of the egg. Fill the path.

easter egg image

Create a new layer. Draw a triangle shape by using the Pen Tool in the middle of the egg. Fill the triangle (used colour in the tutorial: #ef6f51):

easter eggs in photoshop

Create a new layer. Draw a second triangle shape by using the Pen Tool on the top of the first triangle. Fill the triangle (used colour in the tutorial: #f4a261).

Create a new layer. Use the Ellipse Tool and draw two flat circles:

easter eggs

Create a new layer. Use the Ellipse Tool and draw two circles (used colour in the tutorial: #ffb4a2):

easter egg photoshop

Create a new layer. Use Rectangle Tool and draw a square. Fill the square (used colour in the tutorial: #f2cc8f). Drag this layer at the bottom of the Shell/ Zigzag path.

easter egg in photoshop

Hide the background and the egg layer by unticking the eyeballs in the layer panel. Right-click on the Rectangle layer and select Merge Visible.

egg in Photoshop

Make an egg layer visible (click on the eyeball).

Create Clipping Mask: Hold down Alt (Option in Mac OS), position the pointer over the line dividing two layers(rectangle layer and the egg layer) in the Layers panel (the pointer changes to two overlapping circles), and then click.

easter egg

Merge the visible layers:

easter egg in photoshop

Step3.

SHADOWS

Change the colour of the background (used colour in the tutorial: #8ecae6). Use the Ellipse Tool and draw the flat circle in black:

In the Layers panel, reduce the opacity of the circle to 20%:

easter egg in photoshop

Right-click on the rectangle layer and select Blending Options…:

Tick Inner Shadow and set the opacity to 40% and the Blend Mode to Multiply:

Easter Egg

Easter Egg is ready!

Easter Egg in Photoshop

Watch also the video tutorial:

Categories
Adobe Illustrator

How to draw Easter eggs in Adobe Illustrator?

To create simple Easter Eggs in Adobe Illustrator follow the steps below and watch the video tutorial.

Easter Eggs Adobe Illustrator

Step1.

DRAW AN EGG

Create the new file. Use the Ellipse Tool and draw the circle. Choose the colour you like (colour used in tutorial #90be6d).

drawing Easter Eggs tutorial

By using the Direct Selection Tool select the top of the circle:

draw the easter eggs in adobe illustrator

And stretch a bit the top part of the circle by pulling the top of the circle up. We’ve got an egg shape!

egg shape in adobe illustrator

Step2.

ADD SHADOWS TO THE EGG

In the layers panel, duplicate the egg path twice.

easter eggs vector image

Move duplicate paths aside and put one on another. Select the duplicate paths by using the Selection Tool:

easter eggs

Go to Properties panel on the right side of the screen and click on –>Pathfinder—>Click to Exclude option.

Easter eggs adobe illustrator

By using the Direct Selection Tool remove the top part of the new shape. Go to Properties panel. Change the colour to black and reduce the opacity to 20%.

Fit the new shape on the egg path:

egg shape adobe illustrator

By using the Ellipse tool draw the flat ellipse on the bottom of the egg shape path:

draw an egg shape in adobe illustrator

Go to Properties panel on the right side of the screen and reduce the opacity of the new shape to 20%.

Right-click on the new shape and go to Arrange and select Send to Back, to move the shape under the egg.

easter egg

Select the egg and shadow by Selection Tool. Go to Edit on the top of the page and select first copy and then paste. Copy the selected shapes twice and put them in line.

eggs in adobe illustrator
draw the eggs

Step3.

DECORATE EASTER EGGS

STRIPES

Duplicate the egg path and move aside:

draw an easter egg

By using Ellipse Tool draw three flat ellipses on the new egg path. Choose any colour you like (used colour in the tutorial: #f9c74f):

decorating easter eggs in adobe illustrator

Select all the new paths and click in the Properties panel on the right side of the screen—>Pathfinder—>Click to Exclude.

decorating an easter egg in adobe illustrator

By using the Direct Selection Tool remove unwanted parts of the new shape.

egg decoration

And fit the new shape to the first egg then right-click on the shadow path and go to Arrange–>Bring to Front. The first egg is done!

easter egg stripes

DOTS

Change the colour of the second egg (colour used in the tutorial: #f0716f):

dotted easter egg

Use the Ellipse Tool and draw small circles all over the second egg (colour used in the tutorial: #fdfcgc) then right-click on the shadow path and go to Arrange–>Bring to Front. The second egg is done!

STARS

Change a colour of the third egg (colour used in the tutorial #00afb9):

stars egg decoration

Duplicate the third egg path:

easter eggs

Move the duplicate path aside. Use the Star Tool and draw the stars all over the new egg path:

star tool adobe illustrator

Go to Properties panel–>Pathfinder—>and click on Click to Minus Front.

star tool

Change again the colour of the third egg (colour used in tutorial #fdfcdc) and fit the new shape to the egg then right-click on the shadow path and go to Arrange–>Bring to Front. Done!

easter eggs in adobe illustrator

Watch also the video tutorial: