Categories
Web development

CSS Chocolate box


CSS Chocolate box

To learn how to create the CSS Chocolate box follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website, click here.

Step1.

Add HTML

<div class="chocolate-box">
  <div class="chocs">
    <div id="top-left" class="top-left"></div>
    <div id="top-right" class="top-right"></div>
    <div id="bottom-left" class="bottom-left"></div>
    <div id="bottom-right" class="bottom-right"></div>
  </div>
  <div class="box-bottom"></div>
  <div class="cover"></div>
  <div id="white">White Chocolate</div>
  <div id="milk">Milk Chocolate</div>
  <div id="truffle">Chocolate truffle</div>
  <div id="truffle2">Chocolate truffle</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: #f5b8b5;
  overflow: hidden;
}

.chocolate-box {
  position: relative;
  height: 300px;
  width: 300px;
  cursor: pointer;
}

Style and animate the box:

.chocolate-box:before, .chocolate-box:after {
  content:"";
  position: absolute;
}

.chocolate-box:before {
  width: 160px;
  height: 160px;
  background-color: #4b301b;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  box-shadow: 10px 10px #392312;
}

.chocolate-box:after {
  width: 68px;
  height: 68px;
  background-color: #2b0900;
  top:81px;
  left: 80px;
  box-shadow: 70px 0 #2b0900, 70px 70px #2b0900, 0px 70px #2b0900;
}

.chocs {
  position: absolute;
  z-index:1;
}

.top-left {
  top:92px;
  left:90px;
}

.top-left:hover {
  transform: rotate(25deg);
}

.top-left:active {
  opacity:0;
}

.bottom-right {
  left:162px;
  top: 162px;
}

.bottom-right:hover {
  transform: rotate(25deg);
}

.bottom-right:active {
  opacity:0;
}

.top-left, .bottom-right {
  position: absolute;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: #d12511;
  box-shadow: 20px 0 #d12511;
  filter: drop-shadow(2px 2px #ab1503) drop-shadow(-2px 2px #ab1503);
  transition: .2s;
}

.top-left:after, .top-left:before, .bottom-right:before, .bottom-right:after {
  content:"";
  position: absolute;
}

.top-left:before, .bottom-right:before {
  width: 30px;
  height: 30px;
  background-color: #d12511;
  transform: rotate(-45deg);
  top:10px;
  left:10px;
}

.top-left:after, .bottom-right:after {
  border-radius: 50%;
  background-color: rgba(255,255,255,.3);
  width:10px;
  height: 10px;
  top:5px;
  left:35px;
}

.top-right {
  position: absolute;
  border-radius: 50%;
  background-color: #fee8c0;
  width:45px;
  height: 45px;
  top:92px;
  left: 162px;
  filter: drop-shadow(2px 2px #ceb587) drop-shadow(-2px 2px #ceb587);
  overflow: hidden;
  transition: .2s;
}

.top-right:before, .top-right:after {
  content:"";
  position: absolute;
  background-color: #93522b;
  width:100px;
  height: 3px;
  left:-5px;
}

.top-right:before {
  top:15px;
  transform: rotate(-35deg);
  box-shadow: 0 -15px #93522b;
}

.top-right:after {
  top:0;
  transform: rotate(-15deg);
  box-shadow: 0 17px #93522b, 0 30px #93522b;
}

.bottom-left:hover {
  transform: rotate(25deg);
}

.bottom-left:active {
  opacity:0;
}

.top-right:hover {
  transform: rotate(25deg);
}

.top-right:active {
  opacity:0;
}

.bottom-left {
  position: absolute;
  border-radius: 50%;
  background-color: #503520;
  width:45px;
  height: 45px;
  top:162px;
  left: 92px;
  filter: drop-shadow(2px 2px #342010) drop-shadow(-2px 2px #342010);
  overflow: hidden;
  transition: .2s;
}

.bottom-left:before, .bottom-left:after {
  content:"";
  position: absolute;
  background-color: #fde7c7;
  width:100px;
  height: 3px;
  left:-5px;
}

.bottom-left:before {
  top:15px;
  transform: rotate(-35deg);
  box-shadow: 0 -15px #fde7c7;
}

.bottom-left:after {
  top:0;
  transform: rotate(-15deg);
  box-shadow: 0 17px #fde7c7, 0 30px #fde7c7;
}

.box-bottom {
  position: absolute;
  background-color: #392312;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  left:222px;
  top:73px;
  z-index:-1;
  box-shadow: 0px 211px #392312;
}

.cover {
  position: absolute;
  background-color: #cf2611;
  width:150px;
  height: 150px;
  border: 5px solid #ae1605;
  z-index:2;
  top:70px;
  left:70px;
  transform-origin: top;
  transition: .2s;
  overflow: hidden;
}

.chocolate-box:hover .cover {
  transform: rotateX(170deg);
  box-shadow: 5px -5px 20px rgba(0,0,0,.5);
}

.chocolate-box:hover .cover:before {
  display: none;
}

.cover:before {
  position: absolute;
  content:"Hover Me";
  color: #ffead2;
  font-family: "Brush Script MT", cursive;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-left: 25px;
  padding-right: 25px;
  font-size: 35px;
  transform: translate(-50%,-50%);
  left:50%;
  top:50%;
  text-align: center;
  border: 2px double;
}

.cover:after {
  position: absolute;
  content:"";
  background-color: #ffead2;
  height:10px;
  width: 100px;
  transform: rotate(-45deg);
  left:-20px;
  box-shadow: -5px 165px #ffead2;
}

#white, #milk, #truffle, #truffle2 {
  position: absolute;
  width: 100%;
  display: none;
  color: #ffead2;
  font-family: "Brush Script MT", cursive;
  font-size: 25px;
  transition: .1;
}

#white {
  top:100px;
  left: 250px;
}

#milk {
  top:170px;
  left:-70px;
}

#truffle {
  left: 250px;
  top: 170px;
}

#truffle2 {
  left: -70px;
  top: 100px;
}

Step3.

Add jQuery

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

$(document).ready(function(){
    $("#top-right").on('mouseenter',function() {
        $("#white").show();
    });
    $("#top-right").on('mouseout',function() {
        $("#white").hide();
    });
});

$(document).ready(function(){
    $("#bottom-left").on('mouseenter',function() {
        $("#milk").show();
    });
    $("#bottom-left").on('mouseout',function() {
        $("#milk").hide();
    });
});

$(document).ready(function(){
    $("#bottom-right").on('mouseenter',function() {
        $("#truffle").show();
    });
    $("#bottom-right").on('mouseout',function() {
        $("#truffle").hide();
    });
});

$(document).ready(function(){
    $("#top-left").on('mouseenter',function() {
        $("#truffle2").show();
    });
    $("#top-left").on('mouseout',function() {
        $("#truffle2").hide();
    });
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Heart in Envelope

CSS diamond ring (open/ close on click)

CSS Valentine’s Day Card

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

Pure CSS Valentine’s Day Animation


Pure CSS Valentine's Day Animation/ Card

To learn how to create the CSS Valentine’s Day Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="happy-valentines">
<div class="valentines-day-card">
  <div class="clouds"></div>
  <div class="hearts">
    <div class="heartOne">
      <div class="left-side"></div>
      <div class="right-side"></div>
    </div>
    <div class="heartTwo">
      <div class="left-side"></div>
      <div class="right-side"></div>
    </div>
        <div class="heartThree">
      <div class="left-side"></div>
      <div class="right-side"></div>
    </div>
     <div class="heartFour">
      <div class="left-side"></div>
      <div class="right-side"></div>
    </div>
     <div class="heartFive">
     <div class="left-side"></div>
      <div class="right-side"></div>
    </div>
  </div>
  <div class="text"><span>Happy Valentine's</br> Day!</div>
</div>
<p class="hover">- hover over the text -</p>
</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=Pacifico&display=swap');

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

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

Style the card:

.valentines-day-card {
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #ff8fa3;
  overflow: hidden;
  border:10px solid white;
  border-radius:10px;
  box-shadow: 0 0 100px rgba(0,0,0,.4);
}

.valentines-day-card:before {
  content:"";
  position: absolute;
  background-color: #ffb3c1;
  width:100px;
  height:100px;
  border-radius:50%;
  top:140px;
  left:-25px;
  box-shadow:60px 20px #ffb3c1,130px 10px #ffb3c1, 190px 20px #ffb3c1,260px -5px #ffb3c1, 340px 20px #ffb3c1;
}

.valentines-day-card:after {
  content:"";
  position: absolute;
  background-color: #ffccd5;
  width:100px;
  height:100px;
  border-radius:50%;
  top:160px;
  left:-40px;
  box-shadow: 50px 20px #ffccd5,120px 40px #ffccd5, 200px 15px #ffccd5,260px 30px #ffccd5, 330px 30px #ffccd5,380px 10px #ffccd5;
}

.clouds {
  position: absolute;
  width:100px;
  height:100px;
  border-radius:50%;
  background-color: #fff0f3;
  z-index:5;
  top:210px;
  left:-20px;
  box-shadow: 55px 30px #fff0f3, 125px 10px #fff0f3,175px 20px #fff0f3, 250px 10px #fff0f3, 320px 5px #fff0f3, 380px 10px #fff0f3;
}
Pure CSS Valentine's Day Animation/ Card

Add and animate hearts:

.hearts {
  position: absolute;
  z-index:2;
}

.heartOne {
  position: absolute;
  left:100px;
  top:250px;
  animation: up 4s linear forwards 1s;
}

.heartTwo {
  position: absolute;
  left:270px;
  top:230px;
  animation: up 5s linear forwards 1.8s;
}

.heartThree {
  position: absolute;
  left:85px;
  top:415px;
  animation: up 5s linear forwards 3s;
}

.heartFour {
  position: absolute;
  left:320px;
  top:380px;
  animation: upTwo 9s linear infinite 3.5s;
}

.heartFive {
  position: absolute;
  left:150px;
  top:400px;
  animation: upTwo 13s linear infinite 4.5s;
}

.right-side:before, .right-side:after {
  position: absolute;
  content:"";
  transform-origin: left;
  animation: move 1s ease infinite;
}

.right-side:before {
  border-radius:50% 50% 50% 0;
  width:21px;
  height:20px;
  background-color: #c9184a;
  left:-0.26px;
}

.right-side:after {
  height:0;
  width:0;
  border-bottom:10px solid transparent;
  border-left: 15px solid #c9184a;
  top:19px;
  left:-0.26px;
}

@keyframes move {
  0%, 100% {transform: rotateY(0);}
  50% {transform: rotateY(-45deg);}
}

.left-side:before, .left-side:after {
  position: absolute;
  content:"";
  transform-origin: right;
  animation: move 1s ease infinite;
}

.left-side:before {
  border-radius:50% 50% 0 50%;
  width:20px;
  height:20px;
  left:-20.7px;
  background-color: #ff4d6d;
}

.left-side:after {
  height:0;
  width:0;
  left:-15px;
  border-bottom:10px solid transparent;
  border-right: 15px solid #ff4d6d;
  top:19px;
}

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

@keyframes upTwo {
  0% {transform: translateY(0);}
  100% {transform: translateY(-450px);}
}

Style and animate the text:

.text {
  position: absolute;
  color: #800f2f;
  font-size:30px;
  font-family: 'Pacifico', cursive;
  line-height:1;
  text-align: center;
  width:380px;
  left:10px;
  z-index:3;
  top:320px;
  animation: up 1s ease forwards;
  transition: .2s;
}

.hover {
  color: white;
  font-family: 'Pacifico', cursive;
  text-align: center;
}

.text:hover span {
  display: none;
}

.text:hover:before {
  content:"Remember not to eat too much candy—you're sweet enough already.";
  font-size:25px;

}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

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

CSS diamond ring (open/ close on click)

CSS Heart in Envelope

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 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
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

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
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