Categories
CSS HTML Web development

CSS diamond ring (open/ close on click)

CSS engagement ring

To learn how to create the CSS diamond ring (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="jewellery-box">
  <input id="open" type="checkbox">
  <label class="open" for="open"></label>
  <div class="bottom"></div>
  <div class="inner-top"></div>
  <div class="inner-bottom"></div>
  <div class="text">Will You Marry Me?</div>
  <div class="diamond-ring">
    <div class="diamond"></div>
    <div class="band"></div>
    <div class="inner"></div>
    <div class="details"></div>
  </div>
</div>

Step2.

Add CSS

Import the font (optional):

Font source: Goole Fonts. To see how to import the google font into an HTML document 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 elements:

body {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  background-color: #c75146;
  overflow: hidden;
}

.jewellery-box {
  position: relative;
  filter: drop-shadow(0 0 30px rgba(0,0,0,0.4));
}
.diamond-ring {
  position: relative;
}

Hide the input checkbox:

input#open {
  display: none;
}

Style the diamond ring:

.diamond {
  position: relative;
  border-style: solid;
  border-color: transparent transparent #27c3f3 transparent;
  border-width: 0 5px 5px 5px;
  height: 0;
  width: 15px; 
  z-index:1;
}
.diamond:before {
  content: "";
  position: absolute;
  top: 5px;
  left: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #27c3f3 transparent transparent transparent;
  border-width: 15px 12.5px 0 12.5px;
}

.diamond:after {
  content:"";
  position: absolute;
  border-style: solid;
  border-color: #7fd4f9 transparent transparent transparent;
  border-width: 15px 7px 7px;
  width:0;
  height:0;
  left:0.5px;
  top:5px;
}

.band {
  position: absolute;
  width:45px;
  height:45px;
  border: 5px solid #fed53f;
  border-radius: 50%;
  top:15px;
  left:-15px;
  z-index:1;
}

.band:before, .band:after {
  content:"+";
  position: absolute;
  color:rgba(255,255,255,.5);
}

.band:before {
  left:5px;
  top:-15px;
  font-size:7px;
  text-shadow: 20px -12px;
  animation: shine .5s linear infinite;
}

.band:after {
  left:32px;
  top:-12px;
  font-size:9px;
  text-shadow: -19px -18px;
  animation: shine .5s linear infinite .2s;
}

@keyframes shine {
  from {opacity:1;}
  to {opacity:0;}
}
CSS diamond ring

Style the jewellery box:

.inner {
  position:absolute;
  background-color: #cf7b4a;
  width:70px;
  height:15px;
  z-index:3;
  left:-20px;
  top:55px;
  border-radius:20px 20px 0 0;
}

.open {
  position: absolute;
  z-index:5;
  background-color: #81171b;
  width: 170px;
  height:40px;
  border-radius: 30px 30px 0 0;
  left:-70px;
  top:-10px;
  transition: .1s;
  cursor: pointer;
}

.bottom {
  position: absolute;
  z-index:5;
  background-color: #81171b;
  width:170px;
  height:40px;
  box-shadow: 0 -10px #540804;
  border-radius: 0 0 15px 15px;
  top:40px;
  left:-70px;
  transition: .1s;
}

.bottom:before {
  content:"";
  position: absolute;
  border-radius:50%;
  width:10px;
  height:10px;
  background-color: #ad2e24;
  top:13px;
  left:13px;
  box-shadow: 15px 0 #ad2e24, 30px 0 #ad2e24, 45px 0 #ad2e24, 60px 0 #ad2e24, 75px 0 #ad2e24, 90px 0 #ad2e24, 105px 0 #ad2e24, 120px 0 #ad2e24, 135px 0 #ad2e24;
}

.inner-top {
  position: absolute;
  width:150px;
  height:0;
  border-style: solid;
  border-width: 0 10px 50px 10px;
  border-color: transparent transparent #912820 transparent;
  transition: .1s;
  transform-origin: top;
  left:-70px;
  top:40px;
  transform: rotateX(85deg);
}

.inner-top:before {
  content:"";
  position: absolute;
  width:130px;
  height:0;
  border-style: solid;
  border-width: 0 10px 50px 10px;
  border-color: transparent transparent #ad2e24 transparent;
  transition: .1s;
  transform-origin: top;
  left:0;
  top:0;
}

.inner-bottom {
  position: absolute;
  width:150px;
  height:0;
  border-style: solid;
  border-width: 0 10px 60px 10px;
  border-color: transparent transparent #732019 transparent;
  transition: .1s;
  transform-origin: top;
  left:-70px;
  top:40px;
  transform: rotateX(85deg);
}

.inner-bottom:before {
  content:"";
  position: absolute;
  width:130px;
  height:0;
  border-style: solid;
  border-width: 0 10px 60px 10px;
  border-color: transparent transparent #cf7b4a transparent;
  transition: .1s;
  transform-origin: top;
  left:0;
  top:0;
}

.details {
  position: absolute;
  width:132px;
  background-color: #cf7b4a;
  border-radius:20px 20px 0 0;
  height:10px;
  left:-51px;
  top:35px;
}

Make the box open and close:

#open:checked + .open {
  transform: translateY(-40px);
}

#open:checked ~  .bottom {
  transform: translateY(45px);
}

#open:checked ~  .inner-top {
  transform: rotateX(180deg);
}

#open:checked ~  .inner-bottom {
  transform: rotateX(-40deg);
}

Style and animate the text:

.text {
  position: absolute;
  color: white;
  font-family: 'Mochiy Pop P One', sans-serif;
  font-size: 30px;
  transition: .3s;
  width:300px;
  text-align: center;
  top:-165px;
  left:-130px;
  opacity:0;
}

#open:checked ~  .text {
  opacity:1;
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Heart in Envelope

CSS Valentine’s Day Card

CSS Heart Shape & Heartbeat Animation

Categories
CSS HTML 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
CSS Web development

CSS Heart Shape & Heartbeat Animation

CSS heart

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
CSS JQuery Web development

CSS Valentine’s Day Card

Hello! Valentine’s day is coming up – a day to celebrate love and friendship! Do you have Valentine’s Day Card for your loved ones?

CSS Valentine's Card

If not yet, no problem! Follow the steps below and watch the video tutorial to create a beautiful Valentine’s Day card.

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

Demo:

Step1.

Add HTML

Create the container, envelope, and card:

<div class="container">  
<div class="valentines">
  <div class="envelope"></div>
  <div class="front"></div>
  <div class="card">
  <div class="text">Happy</br> Valentine's</br> Day!</div>
  <div class="heart"</div>
  </div>
  <div class="hearts">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
</div>
</div>
<div class="shadow"></div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
}
.valentines {
  position: relative;
  top:50px;
  cursor: pointer;
  animation: up 3s linear infinite;
}

Style the envelope and the card:

.envelope {
  position: relative;
  width: 300px;
  height:200px;
  background-color: #f08080; 
}

.envelope:before {
  background-color: #f08080; 
  content:"";
  position: absolute;
  width: 212px;
  height: 212px;
  transform: rotate(45deg);
  top:-105px;
  left:44px;
  border-radius:30px 0 0 0;
}

.card {
  position: absolute;
  background-color: #eae2b7;
  width: 270px;
  height: 170px;
  top:5px;
  left:15px;
  box-shadow: -5px -5px 100px rgba(0,0,0,0.4); 
}

.card:before {
  content:"";
  position: absolute;
  border:3px solid #003049;
  border-style: dotted;
  width: 240px;
  heighT: 140px;
  left:12px;
  top:12px;
}

.text {
  position: absolute;
  font-family: 'Brush Script MT', cursive;
  font-size: 28px;
  text-align: center;
  line-height:25px;
  top:19px;
  left:85px;
  color: #003049;
}

.heart {
  background-color: #d62828;
  display: inline-block;
  height: 30px;
  margin: 0 10px;
  position: relative;
  top: 110px;
  left:105px;
  transform: rotate(-45deg);
  width: 30px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: #d62828;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:before {
  top: -15px;
  left: 0;
}

.heart:after {
  left: 15px;
  top: 0;
}
.front {
  position: absolute;
  border-right: 180px solid #f4978e;
  border-top: 95px solid transparent;
  border-bottom: 100px solid transparent;
  left:120px;
  top:5px;
  width:0;
  height:0;
  z-index:10;
}

.front:before {
  position: absolute;
  content:"";
  border-left: 300px solid #f8ad9d;
  border-top: 195px solid transparent;
  left:-120px;
  top:-95px;
  width:0;
  height:0;
}
CSS Valentine's Day Card

Add the shadow:

.shadow {
  position: absolute;
  width: 330px;
  height: 25px;
  border-radius:50%;
  background-color: rgba(0,0,0,0.3);
  top:265px;
  left:-15px;
  animation: scale 3s linear infinite;
  z-index:-1;
}

Step3.

Add CSS Animation:

To move the envelope up and down:

@keyframes up {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

To scale the shadow:

@keyframes scale {
  0%, 100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.85);
  }
}

Add some hearts to the envelope:

.hearts {
  position: absolute  
}

.one, .two, .three, .four, .five {
  background-color: red;
  display: inline-block;
  height: 10px;
  margin: 0 10px;
  position: relative;
  transform: rotate(-45deg);
  width: 10px;
  top:50px;
}

.one:before,
.one:after, .two:before, .two:after, .three:before, .three:after, .four:before, .four:after, .five:before, .five:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  width: 10px;
}

.one:before, .two:before, .three:before, .four:before, .five:before {
  top: -5px;
  left: 0;
}

.one:after, .two:after, .three:after, .four:after, .five:after {
  left: 5px;
  top: 0;
}
  
.one {
  left:10px;
  animation: heart 1s ease-out infinite; 
}

.two {
  left:30px;
  animation: heart 2s ease-out infinite; 
}

.three {
  left:50px;
  animation: heart 1.5s ease-out infinite;
}

.four {
  left:70px;
  animation: heart 2.3s ease-out infinite;
}

.five {
  left:90px;
  animation: heart 1.7s ease-out infinite;
}

@keyframes heart {
  0%{
    transform: translateY(0) rotate(-45deg) scale(0.3);
    opacity: 1;
  }
  100%{
    transform: translateY(-150px) rotate(-45deg) scale(1.3);
    opacity: 0.5;
  }
}

Step4.

Add jQuery

*to read how to add jQuery to HTML click here.

To change the position of the card on hover:

$(document).ready(function () {
    $('.container').mouseenter(function () {
        $('.card').stop().animate({
            top: '-90px'
        }, 'slow');
    }).mouseleave(function () {
        $('.card').stop().animate({
            top: 0
        }, 'slow');
    });
});

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

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Heart Shape & Heartbeat Animation

Pure CSS Envelope (Open/Close on click)

CSS Envelope (Open/Close on Hover)

Categories
CSS Web development

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

CSS Valentine's Day

New: Check also pure CSS Heart Shape & Heartbeat Animation.

Demo:

*to see the animation on the website click here.

What do you need to do?

You need to have an image of the heart in .png format (you can use mine below) and:

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

Step1

Add HTML

<div class="valentinesDay">
  <h1>Happy Valentine's Day!</h1>
 <img src="https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640" class="heart" alt="heart" />
</div>

Step2.

Add CSS

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

body {
  background-color: #E1594C;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.valentinesDay {
  position: relative;
}
.heart {
  position: relative;
}

Step3.

Add CSS Animation

Add to .heart:

animation: .8s infinite beat;

and add @keyframes to create the Heartbeat:

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

Enjoy coding!

Read also:

CSS Valentine’s Day Card

CSS Christmas Tree Snow Globe

Simple CSS Birthday Cake