Categories
CSS Web development

CSS Envelope (Open/Close on Hover)

CSS Envelope

Demo:

*to see the animation on the website click here.

To create the CSS Envelope (Open/ Close on Hover) follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="envelope">
  <div class="back"></div>
  <div class="letter">
    <div class="text">Invitation</div>
  </div>
  <div class="front"></div>
  <div class="top"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and position of the background and elements:

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

.envelope {
  position: relative;
  cursor: pointer;
}

Style the card and envelope:

.back {
  position: relative;
  width:250px;
  height: 200px;
  background-color: #6247aa;
}

.letter {
  position: absolute;
  background-color: #fff;
  width:230px;
  height: 180px;
  top:10px;
  left:10px;
  transition: .2s;
}

.letter:before {
  position: absolute;
  content:"";
  background-color: #333;
  width: 80px;
  height: 80px;
  top:75px;
  left:75px;
}

.letter:after {
  position: absolute;
  content:"";
  width:30px;
  height:30px;
  background-color: #fff;
  top:82px;
  left: 82px;
  box-shadow: 36px 0 #fff, 36px 36px #fff, 0px 36px #fff;
}

.text {
  text-align: center;
  font-size: 17px;
  font-family: arial;
  margin-top:20px;
  font-weight: bold;
}

.text:before, .text:after {
  content:"";
  position: absolute;
  width: 5px;
  border-radius:10px;
  background-color: #333;
  height: 20px;
  top:60px;
}

.text:before {
  left:108px;
  transform: rotate(-25deg);
}

.text:after {
  left:118px;
  transform: rotate(25deg);
}

.front {
  position: absolute;
  border-right: 130px solid #815ac0;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  height:0;
  width:0;
  top:0;
  left:120px;
  z-index:3;
}

.front:before {
  content:"";
  position: absolute;
  border-left: 130px solid #815ac0;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  height:0;
  width:0;
  top:-100px;
  left:-120px;
}

.front:after {
  content:"";
  position: absolute;
  border-bottom: 105px solid #7251b5;
  border-left: 125px solid transparent;
  border-right:125px solid transparent;
  height:0;
  width:0;
  top:-5px;
  left:-120px;
}

.top {
  position: absolute;
  border-top: 105px solid #9163cb;
  border-left: 125px solid transparent;
  border-right:125px solid transparent;
  height:0;
  width:0;
  top:0;
  transform-origin: top;
  transition: .4s;
}
.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  width:250px;
  height:10px;
  top:220px;
  border-radius:50%;
}

Add transition on hover:

.envelope:hover .top {
  transform: rotateX(160deg);
}

.envelope:hover .letter {
  transform: translateY(-100px);
  z-index:2;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Valentine’s Day Card

CSS Folded Birthday Card

CSS Flip Postcard

Categories
CSS Web development

CSS Folded Birthday Card

CSS Folded Greeting Card

Demo:

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

To create the CSS Folded Birthday Card follow the steps below and watch the video tutorial:

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!

Read also:

CSS Birthday Animation

Simple CSS Birthday Cake

Birthday Cake – CSS Animation

Categories
CSS Web development

CSS EASTER EGG ANIMATION/ CSS Hover Transition

CSS Easter Animation

Demo:

*to see the CSS transition on the website click here.

To create the CSS Easter Animation follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="container">
  <div class="easter">
  <div class="egg">
    <div class="yolk"></div>
  </div>
  <div class="shellBottom">
    <div class="bottom"></div>
  </div>
    <div class="shellTop">
      <div class="hoverMe">Hover Me</div>
      <div class="top"></div>
    </div>
    <div class="shadow"></div>
    <div class="text">Happy Easter!</div>
  </div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
}

.easter {
  position: relative;
  left:-100px;
  top:-100px;
}

Style the egg:

.egg {
  position: absolute;
  width: 136px;
  height: 190px;
  background-color: #fffffc;
  border-radius: 50% 60% 50% 50% / 70% 70% 40% 40%;
  box-shadow: inset -5px -7px rgba(0,0,0,0.1);
  z-index:1;
  top:0;
}

.yolk {
  position: absolute;
  content:"";
  width: 90px;
  height:90px;
  background-color: #ffb703;
  border-radius:50%;
  top:65px;
  left:20px;
  box-shadow: inset -5px -5px rgba(0,0,0,0.1);
}

.yolk:before {
  position: absolute;
  content:"";
  background-color: #333;
  width:7px;
  height:10px;
  border-radius:50%;
  top:35px;
  left:30px;
  box-shadow: 20px 0 #333;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2.5s infinite;
}
.yolk:after {
  content:"";
  position: absolute;
  background-color: #fff;
  width:20px;
  height:10px;
  border-radius: 0 0 30px 30px;
  top:50px;
  left:34px;
}
CSS Egg

Add the blink animation to the egg’s eyes:

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

Style the shell:

.shellBottom {
  background-color: #a2d2ff;
  position: absolute;
  z-index:3;
  width:150px;
  height:77.5px;
  border-radius: 0 0 100px 100px;
  left:-10px;
  top:150px;
  box-shadow: inset -5px -5px rgba(0,0,0,0.1);
}

.shellBottom:before {
  position: absolute;
  content:"";
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  top:-30px;  
}

.shellBottom:after {
  position: absolute;
  content:"";
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-30px;
  left:25px;
}

.bottom {
  position: absolute;
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-30px;
  left:75px;
}

.bottom:before {
  content:"";
  position: absolute;
  border-bottom: 30px solid #a2d2ff;
  border-left: 25px solid transparent;
  left:25px;
}

.bottom:after {
  content:"";
  position: absolute;
  height:30px;
  width:5px;
  background-color: rgba(0,0,0,0.1);
  left:45px;
}

.shellTop {
  position: absolute;
  background-color: #a2d2ff;
  box-shadow: inset -5px 0 rgba(0,0,0,0.1);
  width:150px;
  height:140px;
  border-radius: 50% 50% 0 0/60% 60% 0 0;
  top:-20px;
  left:-10px;
  z-index:2;
  transition: ease 1s;
}

.shellTop:before, .shellTop:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:140px;
}

.shellTop:after {
  left:50px;
}

.top {
  position: absolute;
  height:0;
  width:0;
  border-top: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:140px;
  left:100px;
}

.hoverMe {
  position: absolute;
  font-family:arial black;
  top:60px;
  left:35px;
  color: #bde0fe;
}
CSS Easter Egg Animation

Add transition on hover:

.shellTop:hover {
  top:-80px;
}

Style the shadow:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  width:170px;
  height:20px;
  border-radius:50%;
  top:212px;
  left:48px;
}
CSS Easter Egg

Add the Easter wishes:

.text {
  position: relative;
  left:-250px;
  font-size:20px;
  font-family: arial black;
  top:100px;
  visibility:hidden;
}

.text:before {
  content:"";
  position: absolute;
  width: 200px;
  height:100px;
  border-radius:30px;
  background-color: #fff;
  left:-25px;
  top:-35px;
  z-index:-1;
}

.text:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top: 20px solid #fff;
  border-right:35px solid transparent;
  top: 20px;
  left:170px;
}

Add transition on hover to make the wishes visible:

.container:hover .text {
  visibility:visible;
  transition-delay:.2s;
}

To see the CSS Easter Animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Transition VS. CSS Animation

You might think transitions and animations refer to the same thing, but they don’t. The CSS Transition can not change CSS properties which CSS Animation can do.

CSS transiton vs CS animation

CSS Transitions allow changing property values very smoothly, over a given duration. To create a transition effect, you must specify two things:

  1. The CSS property you want to add an effect to
  2. The duration of the effect

Note: If the duration is not specified, the transition will have no occur (default 0).

Example:

Hover over the div element (square) below, to see the transition effect (<div> element is changing the width from 100px to 200px). 

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  transition: width 1s;
}

.square:hover {
  width: 200px;
}
</style>
</head>
<body>

<p>Hover over the square:</p>
<div class="square"></div>

</body>
</html>

Output:

Hover over the square:

Most often you can see transitions used on hover states, or when information on a page is added or removed. The hover states may be a subtle change in font color and information on the page may fade from invisible to visible. 

CSS Animations are a more powerful alternative to transitions. Rather than rely on a change from one beginning state to an end state. 

Where a transition goes only from A to B, the animation can go from A, B, C to D. Or any number of stages as needed. (To see the basics of CSS Animations click here.)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  animation-name: example-2;
  animation-duration: 3s;
}

@keyframes example-2 {
  0%   {left:0px; top:0px;}
  25%  {left:100px; top:0px;}
  50%  {left:100px; top:100px;}
  75%  {left:0px; top:100px;}
  100% {left:0px; top:0px;}
}
</style>
</head>
<body>

<div class="square"></div>

</body>
</html>   

Output:

Click on the square to repeat the animation.




The CSS Transition is for creating a smooth transition from one state to another, and the CSS Animation for a more complex series of movements. 

Enjoy coding!