Tag: #heart

CSS Web development

CSS Heart Shape & Heartbeat Animation

Post author By Lena Stanley
Post date January 24, 2021

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:

Add HTML
Add CSS
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!

Moving text on an SVG path

Post author By Lena Stanley
Post date September 3, 2020

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!

CSS Shapes

Post author By Lena Stanley
Post date January 31, 2020

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

Let’s start from the easy ones:

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:

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:

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:

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%;
    }

To see more CSS shapes click here.

Enjoy coding!

CSS border-radius property

CSS Egg Shape and CSS Easter eggs

CSS Paper Plane Animation

Tags #CSSShapes, #diamond, #heart, CSS, shapes