Categories
Adobe Illustrator

How to draw a heart shape in Adobe Illustrator?



How to draw a heart shape in Adobe Illustrator?

To learn how to draw a heart shape in Adobe Illustrator follow the steps below and watch the video tutorial.

Step1.

Create a new document. Select the Rectangle Tool (M) and draw a square (hold shift to constrain the shape).

heart shape in Illustrator

Step2.

Right-click on the square and select Transform->Rotate

adobe illustrator-heart-shape

Rotate the square 45°.

How to draw a heart shape in Adobe Illustrator?

Step3.

Go to Edit: Copy and then Paste the square. Use the Direction Selection Tool (A) and round the corners to create a circle (click on one of the corners and drag it inwards).

Move the circle to the left top side of the square:

How to create a heart shape in Adobe Illustrator?

Go to Edit: Copy and then Paste in Front the circle. Nudge the new circle to the right. Select all elements and go to Pathfinder Panel to unite the shape.

How to create a heart shape in Adobe Illustrator?
How to draw a heart shape in Adobe Illustrator?

Watch also the video tutorial:

Enjoy!

Read also:

How to draw a paper plane in Adobe Illustrator?

How to draw a clock in Adobe Illustrator?

Categories
Web development

CSS Valentine’s Day Card (Open/Close on Click)


HTML & CSS Valentine's Day Card

To learn how to create the CSS Valentine’s Day Card (Open/Close on Click) follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="valentines-day-card">
  <input id="open" type="checkbox">
  <label class="open" for="open"></label>
<div class="card-front">
  <div class="note">Click to Open</div>
</div>
  
  <div class="card-inside">
    <div class="text-one">Happy
    </div>
    <div class="heart"></div>
    <div class="smile"></div>
    <div class="eyes"></div>
</div>
</div>

Step2.

Add CSS

Import the font:

Font source: Google Fonts

To read how to import the font in CSS click here.

@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap');

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

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2acac;
  font-family: 'Mochiy Pop P One', sans-serif;
}

Style the card (make the card open/ close):

input#open {
  display: none;
}

.valentines-day-card {
  position: relative;
  width: 300px;
  height:300px;
  transform-style: preserve-3d;
	transform: perspective(2500px);
  transition: .3s;
}

.card-front {
  position: relative;
  background-color: #fff0f3;
  width: 300px;
  height:300px;
  transform-origin: left;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.15), 30px 0 50px rgba(0,0,0,0.3);
  transition: .3s;
}

.card-front:before {
  content:"";
  position: absolute;
  width: 280px;
  height: 280px;
  background-color: #d04e4e;
  top: 10px;
  left: 10px;
}

.card-inside {
  position: absolute;
  background-color: #fff0f3;
  width: 300px;
  height:300px;
  z-index:-1;
  left:0;
  top:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,0.22), 100px 20px 100px rgba(0,0,0,0.1);
}

.open {
  position: absolute;
  width: 300px;
  height:300px;
  left:0;
  top:0;
  background-color: transparent;
  z-index:6;
  cursor: pointer;
}

#open:checked ~ .card-front {
  transform: rotateY(-155deg);
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
}

#open:checked ~ .card-front:before {
  z-index:5;
  background-color: #fff0f3;
  width:300px;
  height:300px;
  top:0;
  left:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.1), 30px 0 50px rgba(0,0,0,0.1);
}
CSS Valentine's Day Card (Open/Close on Click)

Style the front side of the card:

.note {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #fff0f3;
  top:75px;
  left:50px;
  color: #333;
  font-size:30px;
  display: flex;
  align-items: center;
  text-align: center;
  filter: drop-shadow(0 0 20px rgba(0,0,0,0.3));
}

.note:before, .note:after {
  position: absolute;
  content:"";
  background-color: #ba1c1c;
  width: 40px;
  height:40px;
}

.note:before {
  transform: rotate(-45deg);
  top:-20px;
  left:80px;
}

.note:after {
  border-radius:50%;
  top:-35px;
  left:65px;
  box-shadow:30px 0 #ba1c1c;
}
CSS Valentine's Day Card (Open/Close on Click)

Style and animate the card inside:

.text-one {
  position: absolute;
  color: #333;
  font-size: 30px;
  top:30px;
  width:300px;
  text-align: center;
}

.text-one:before, .text-one:after {
  position: absolute;
  left:5px;
  text-align: center;
  width:300px;
}

.text-one:before {
  content:"Valentine's";
  top:30px;
  color: #d04e4e;
}

.text-one:after {
  content:"day!";
  top:60px;
}

.heart {
  position: relative;
  background-color: #d04e4e;
  height: 60px;
  width:60px;
  top:180px;
  left:120px;
  transform: rotate(-45deg);
  animation: .8s beat infinite;
}
  
.heart:before, .heart:after {
  content:"";
  background-color: #d04e4e;
  border-radius:50%;
  height: 60px;
  width: 60px;
  position: absolute;
  }
  
.heart:before {
  top:-30px;
  left:0;
}
  
.heart:after {
  left:30px;
  top:0;
}

.smile {
  position: absolute;
  width:30px;
  height:15px;
  background-color: #333;
  z-index:1;
  border-radius: 0 0 100px 100px;
  top:200px;
  left:135px;
  overflow: hidden;
}

.smile:before {
  content:"";
  position: absolute;
  border-radius:50%;
  width:20px;
  height:20px;
  background-color: #030202;
  top:5px;
  left:5px;
}

.eyes {
  position: absolute;
  border-radius: 50%;
  background-color: #333;
  width:10px;
  height:10px;
  z-index:1;
  top:190px;
  left:165px;
  box-shadow: -40px 0 #333;
  transform-origin: 50%;
  animation: close 2s infinite;
}

@keyframes close {
    0%, 100% {
        transform: scale(1, .05);
    }
    5%, 95% {
        transform: scale(1, 1);
    }
}

@keyframes beat {
  0%, 40%, 100% {
    transform: scale(1) rotate(-45deg);
  }
  25%, 60% {
    transform: scale(1.1) rotate(-45deg);
  }
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Valentine’s Day Card

CSS Heart in Envelope

CSS Heart Shape & Heartbeat Animation

Categories
Web development

CSS Heart in Envelope



CSS Heart in Envelope

To learn how to create the CSS Heart in Envelope follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="valentines-day">
  <div class="envelope"></div>
  <div class="heart"></div>
  <div class="text">HAPPY </br>VALENTINE'S </br>DAY!</div>
  <div class="front"></div>
  <div class="text2">- hover over the envelope - </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;
  background-color: #f1e3d3;
  overflow: hidden;
}
.valentines-day {
  position: relative;
  cursor: pointer;
}

Style the envelope:

.envelope {
  position: relative;
  filter: drop-shadow(0 0 25px rgba(0,0,0,.3));
}

.envelope:before {
  content:"";
  position: absolute;
  width:254px;
  height:254px;
  background-color: #ff9494;
  transform: rotate(-45deg);
  border-radius: 0 15px 0 0;
  left:-37px;
  top:-82px;
}

.envelope:after {
  content:"";
  position: absolute;
  background-color: #ff9494;
  width:360px;
  height:225px;
  left:-90px;
  top:45px;
}
CSS Envelope Animation

Add and style the heart:

.heart {
  position: relative;
  background-color: #e01911;
  display: inline-block;
  height: 180px;
  top:50px;
  left:0;
  transform: rotate(-45deg);
  width:180px;
  filter: drop-shadow(0 -10px 25px rgba(0,0,0,.3));
  transition: .5s;
}
  
.heart:before, .heart:after {
  content:"";
  background-color: #e01911;
  border-radius:50%;
  height: 180px;
  width: 180px;
  position: absolute;
  }
  
.heart:before {
  top:-100px;
  left:0;}
  
.heart:after {
  left:100px;
  top:0;}
CSS Heart in Envelope Animation

Add the front part of the envelope:

.front {
  position: absolute;
  width:0;
  height:0;
  border-right: 190px solid #fbd2d2;
  border-top: 113px solid transparent;
  border-bottom: 113px solid transparent;
  top:44px;
  left:80px;
  z-index:4;
}

.front:before {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-left: 190px solid #fbd2d2;
  border-top: 113px solid transparent;
  border-bottom: 113px solid transparent;
  top:-113px;
  left:-170px;
}

.front:after {
  width:0;
  height:0;
  position: absolute;
  content:"";
  border-bottom: 150px solid #fce7e9;
  border-right:180px solid transparent;
  border-left: 180px solid transparent;
  top:-36px;
  left:-170px;
}
CSS Heart Animation

Style the text:

.text {
  position: absolute;
  font-family: arial;
  letter-spacing:5px;
  text-align: center;
  color: white;
  z-index:2;
  top:80px;
  left:15px;
  transition: .5s;
}
.text2 {
  position: absolute;
  top:275px;
  color: white;
  font-family: brush script mt;
  text-align: center;
  width:195px;
  font-size:20px;
}

Add transition on hover:

.valentines-day:hover .heart {
  transform: translateY(-50px) rotate(-45deg);
}

.valentines-day:hover .text {
  transform: translateY(-50px);
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Valentine’s Day Card

CSS Heart Shape & Heartbeat Animation

CSS Valentine’s Day Animation (Heartbeat)

Categories
Web development

CSS Heart Shape & Heartbeat Animation



CSS heartbeat Animation

Demo:

*to see the CSS Heartbeat Animation on the website click here.

What do you need to do?

To create the CSS Heart Shape & Heartbeat Animation follow the steps below and watch the video tutorial:

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

Step1.

Add HTML

<div class="container">
      <div class="heart"></div>
  </div>

Step2.

Add CSS

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

body {
  background-color: #fae1dd;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
  
.container {
  position: relative;
  animation: .8s beat infinite;
}

Create the heart shape:

.heart {
  position: relative;
  background-color: red;
  display: inline-block;
  height: 60px;
  top:0;
  left:0;
  transform: rotate(-45deg);
  width:60px;
}
  
.heart:before, .heart:after {
  content:"";
  background-color: red;
  border-radius:50%;
  height: 60px;
  width: 60px;
  position: absolute;
  width: 60px;
  }
  
.heart:before {
  top:-30px;
  left:0;}
  
.heart:after {
  left:30px;
  top:0;}

Step3.

Add CSS Animation

@keyframes beat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Valentine’s Day Card

Fast & easy CSS Valentine’s Day Animation (Heartbeat)

Valentine’s Day

Categories
Web development

Moving text on an SVG path

SVG text on a circle

Example1 – Moving text on a circle:

*animation opened in the Safari browser.
*to see the animation on the website click here.

Demo:

Example2 – Moving text on a heart path:

*animation opened in the Safari browser.

Demo:

Step1.

Add a SVG path/ shape

In this tutorial we’ll create text on the circle (add a SVG path to the body section, to see more about the SVG path click here.):

<svg id="tutorial" data-name="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.48 144.48">
 
  <path class="shape" id="shape" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-98.96 -50.72)"/>

Step2.

Add CSS/ Style the circle

.shape {
  fill:none;
  stroke:#1d1d1b;
}

#tutorial {
  position: relative;
  overflow: visible;
  width: 15%;
  left: 40%;
  top: 100px;
  transform: rotate(-120deg);
}

Step3.

Add the text( body section)

  <text font-family="arial" font-size="14" fill="black">
        <textPath xlink:href="#shape">SVG moving text on the circle.</textPath>

Step4.

Add SVG Animation

  <animate attributeName="font-size" dur="10s" values="8;31" repeatCount="indefinite"></animate>
    </text>
</svg>

Enjoy coding!

Read also:

SVG Handwriting Animation

SVG Stroke & Fill Animation

How to resize an SVG image?

Categories
Web development

CSS Shapes

With CSS you can create a lot of shapes. Learn how to create different shapes using pure CSS.

CSS Shapes

Let’s start from the easy ones:

  1. Square
.square {
      width: 100px;
      height: 100px;
      background: #2a9d8f;
    }

Output:

2. Rectangle

.rectangle {
      width: 200px;
      height: 100px;
      background: #2a9d8f;
    }

Output:

3. Circle

.circle {
      width: 100px;
      height: 100px;
      background: #2a9d8f;
      border-radius: 50%;
    }

Output:

4. Triangle

.triangle {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid #2a9d8f;
    }

Output:

5. Trapezoid

    .trapezoid {
      border-bottom: 100px solid #2a9d8f;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      height: 0;
      width: 100px;
    }

Output:

A bit more difficult shapes:

  1. Star
.star {
      top: 50px;
      position: relative;
      display: block;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #e9c46a;
      border-left: 100px solid transparent;
      transform: rotate(35deg);
    }
    .star:before {
	  content: '';
	  position: absolute;
      border-bottom: 80px solid #e9c46a;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;  
      height: 0;
      width: 0;
      top: -45px;
      left: -65px;
      display: block;
      transform: rotate(-35deg);
    }
    .star:after {
	  content: '';
      position: absolute;
      display: block;
      color: red;
      top: 3px;
      left: -105px;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #e9c46a;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);  
    }

Output:

SVG Star Shape

2. Diamond

<!DOCTYPE html>
<html>
<head>
<style> 
.diamond {
	  position: relative;
      border-style: solid;
      border-color: transparent transparent lightblue transparent;
      border-width: 0 25px 25px 25px;
      height: 0;
      width: 50px;      
  
    }
    .diamond:before {
      content: "";
      position: absolute;
      top: 25px;
      left: -25px;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: lightblue transparent transparent transparent;
      border-width: 70px 50px 0 50px;
    }
	
</style>
</head>
<body>

<div class="diamond"></div>

</body>
</html> 

Output:

CSS Diamond Shape

3. Heart

.heart {
      position: relative;
      width: 100px;
      height: 90px;
    }
    .heart:before,
    .heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    .heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }
CSS Heart Shape

To see more CSS shapes click here.

Enjoy coding!

CSS border-radius property

CSS Egg Shape and CSS Easter eggs

CSS Paper Plane Animation