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

CSS Neon Button/ Neon Effect

CSS Neon Button/ Neon Effect

To learn how to create the CSS Neon Button/ Neon Effect follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Neon Button on the website click here.

Step1.

Add HTML

<div class="button">HOVER ME</div>

Step2.

Add CSS

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

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

Style the button:

Note: You can achieve the neon effect by using CSS filter property or CSS box-shadow property/ text-shadow property.

.button {
  color: #db3eb1;
  border: 6px solid #db3eb1;
  border-radius:15px;
  padding: 15px 25px;
  font-size: 30px;
  font-family: tahoma;
  letter-spacing:5px;
  cursor: pointer;
  font-weight: bold;
  filter: drop-shadow(0 0 15px #db3eb1) drop-shadow(0 0 50px #db3eb1) contrast(2) brightness(2);
  transition: .5s;
}

.button:hover {
  color: black;
  background-color: #db3eb1;
  filter: drop-shadow(0 0 20px #db3eb1) contrast(2) brightness(2);
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Shiny Button

CSS Button Fill Effect on Hover

Scroll To Top Button (smooth scroll effect)

Categories
CSS Web development

CSS Halloween Animation on Hover: Dracula/ Vampire

CSS Halloween Animation on Hover:  Dracula/ Vampire

To learn how to create the CSS Halloween Animation: Dracula/ Vampire follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

Create the Vampire:

<div class="halloween">
  <div class="dracula">
    <div class="head">
      <div class="sides"></div>
      <div class="teeth"></div>
      <div class="eyes"></div>
      <div class="eyelids"></div>
    </div>
    <div class="ears"></div>
    <div class="collar"></div>
    <div class="arms"></div>
    <div class="text">Happy Halloween!</div>
  </div>
</div>

Step2.

Add CSS

Import the font (source: https://fonts.google.com/):

@import url('https://fonts.googleapis.com/css2?family=Freckle+Face&display=swap');

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

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

.halloween {
  position: relative;
}

.dracula {
  position: relative;
  cursor: pointer;
  top:-50px;
}

Style the vampire:

.head {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-color: black;
  box-shadow: inset 20px -20px #c7c2e0;
  z-index:3;
}

.head:before, .head:after {
  content:"";
  position: absolute;
  background-color: #c7c2e0;
  width:110px;
  height:110px;
  border-radius:50%;
}

.head:before {
  left:-55px;
}

.head:after {
  left:45px;
}

.sides {
  background-color: black;
  border-radius:50%;
  position: absolute;
  width:50px;
  height:50px;
  left:-20px;
  top:-20px;
  box-shadow: 90px 0px black;
  z-index:3;
}

.sides:before {
  content:"";
  position: absolute;
  background-color: black;
  width: 35px;
  height:5px;
  top:90px;
  left:50px;
}

.sides:after {
  content:"";
  position: absolute;
  width:5px;
  height:20px;
  background-color: #f11828;
  top:95px;
  left:78px;
  border-radius:0 0 10px 10px;
  animation: drip 3s linear infinite;
}

@keyframes drip {
  0% {height:20px;}
  10% {height:20px;}
  30% {height:30px;}
  50% {height:25px;}
  70% {height:20px;}
  85% {height:10px;}
  100% {height:20px;}
}

.teeth, .teeth:before {
  position: absolute;
  width:0;
  height:0;
  border-bottom: 10px solid transparent;
}

.teeth {
  border-right: 10px solid black;
  top:73px;
  left:30px;
  z-index:4;
}

.teeth:before {
  content:"";
  border-left: 10px solid black;
  left:25px;
}

.eyes {
  position: absolute;
  border-radius:50%;
  width:33px;
  height: 33px;
  background-color: white;
  top:32px;
  left:18.5px;
  z-index:2;
  box-shadow: 30px 0 white;
}

.eyes:before, .eyes:after {
  content:"";
  position: absolute;
  border-radius:50%;
}

.eyes:before {
  background-color: #ed439d;
  width:25px;
  height:25px;
  top:5px;
  left:7px;
  box-shadow:25px 0 #ed439d;
}

.eyes:after {
  background-color: #7d203a;
  width:15px;
  height:15px;
  top:10px;
  left:13px;
  box-shadow: 24px 0 #7d203a;
}

.eyelids {
  position: absolute;
  background-color: black;
  width: 25px;
  height: 10px;
  border-radius: 100px 100px 0 0;
  top:30px;
  left:27px;
  transform: rotate(20deg);
  z-index:4;
}

.eyelids:before {
  content:"";
  position: absolute;
  background-color: black;
  width: 25px;
  height: 10px;
  border-radius: 100px 100px 0 0;
  transform: rotate(-40deg);
  left:20px;
  top:-7px;
}

.ears {
  position: absolute;
  background-color: #9e8dc3;
  width:50px;
  height: 25px;
  border-radius: 0 0 100px 100px;
  top:40px;
  left:-30px;
  transform: rotate(40deg);
  z-index:2;
}

.ears:before {
  content:"";
  position: absolute;
  background-color: #9e8dc3;
  width:50px;
  height: 25px;
  border-radius: 0 0 100px 100px;
  transform: rotate(-80deg);
  left:83px;
  top:-70px;
}

.collar {
  position: absolute;
  background-color: black;
  width: 150px;
  height: 75px;
  border-radius: 0 0 100px 100px;
  top:55px;
  left:-25px;
  z-index:1;
}

.collar:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 30px solid #1a0e36;
  left:55px;
  top:40px;
}

.collar:before {
  content:"";
  position: absolute;
  width:80px;
  height:0;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  border-bottom: 180px solid black;
  top:30px;
  left:10px;
}

.arms {
  position: absolute;
  width:100px;
  height:0;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  border-bottom: 155px solid #1a0e36;
  left:-25px;
  transition: .2s;
}
CSS Vampire

Style the text:

.text {
  position: absolute;
  z-index:5;
  text-align: center;
  font-family: 'Freckle Face', cursive;
  font-size: 50px;
  color: #f11828;
  top:120px;
  left:-50px;
  opacity:0;
  transition: .2s;
}

Animate elements (cloak and text) on Hover:

.dracula:hover .arms {
  transform: scaleX(2);
}
.dracula:hover .text {
  opacity:1;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Halloween Ghost Animation

CSS Spooky House Animation

CSS Scarecrow

Categories
CSS Web development

CSS transition-timing-function Property

CSS transition-timing-function Property

The CSS transition-timing-function property defines the speed curve of the transition effect.

The CSS transition-timing-function property allows a transition effect to change speed over its duration.

Demo:

Hover over the rectangles, to see the different transition effects:

linear
ease
ease-in
ease-out
ease-in-out
steps

Syntax:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n);

linear – defines a transition effect with the same speed from start to end.

ease (default) – defines a transition effect with a slow start, then fast, then end slowly.

ease-in – defines a transition effect with a slow start.

ease-out – defines a transition effect with a slow end.

ease-in-out – defines a transition effect with a slow start and end.

step-start – equivalent to steps(1, start).

step-end – equivalent to steps(1, end).

steps (int, start | end) – define a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. The second parameter (optional), is either the value “start” or “end”, and specifies the point at which the change of values occur within the interval.

cubic-bezier (n, n, n, n) – specify your own values in the cubic-bezier function (numeric values from 0 to 1).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#square {
  width: 100px;
  height: 50px;
  background: #2a9d8f;
  display: flex;
  justify-content: center;
  font-size: 15px;
  align-items: center;
  color: white;
  font-weight: bold;
  transition: width 2s;
}

#square {transition-timing-function: linear;}

#square:hover {
  width: 300px;
}
</style>
</head>
<body>

<div id="square">linear</div>

</body>
</html>

Output:

Hover over the rectangle, to see the transition effect:

linear

Enjoy coding!

Hey, here’s something that might interest you:

CSS animation-timing-function Property

CSS Transition VS. CSS Animation

CSS Transition

Categories
CSS Web development

CSS Zoom on Hover

CSS Zoom on Hover

Demo:

To create the CSS Zoom on Hover effect follow the steps below:

Hover over the square to see the effect:



Step1.

Add HTML

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

Step2.

Add CSS

.square {
  background-color: #2a9d8f;
  transition: transform .2s;
  width: 100px;
  height: 100px;  
}

.square:hover {
  transform: scale(1.4); 
}

Enjoy coding!

Read also:

CSS Image Zoom on Hover

Zoom text/ changing font-size and width on hover (jQuery)

CSS & JavaScript Image Magnifier Glass

Categories
CSS HTML Web development

How to change the text on Hover?

How to change the text on Hover?

To learn how to create the text change on hover using HTML and CSS follow the steps below:

Demo (hover over the text):

Some text…

Step1.

Add HTML

<div class="example"><span>Some text...</span></div>

Step2.

Add CSS

.example:hover:before {
  content:"Text changed!";
}

.example:hover span {
  display: none;
}

Enjoy coding!

Read also:

CSS :hover and :active selectors

CSS Text Change on Hover

CSS Mirror/ Reflection Text Effect

Categories
CSS HTML Web development

CSS 3d flip Business Card

CSS  3d flip Business Card

Demo:

*to see the 3d flip Business Card on the website click here.

To create the CSS 3d flip Business Card follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

Create the card container, front, and back-side of the business card:

<div class="business-card">
  <div class="business-card-inner">
    <div class="business-card-front">
      <div class="laptop">
        <div class="keyboard">
          <div class="logo-text">Web Developer</div>
        </div>
      </div>
    </div>
    <div class="business-card-back">
      <div class="logo-left-side">
        <div class="text">Web Developer</div>
        <div class="mail">📧 example@gmail.com</div>
      </div>
    </div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background and elements:

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

.business-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px;
  cursor: pointer;
}

Make the card flippable:

.business-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), 10px 18px 20px rgba(0,0,0,0.2);
}

.business-card:hover .business-card-inner {
  transform: rotateY(180deg);
}

.business-card-front, .business-card-back {
  position: absolute;
  background-color: #0a9396;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
   display: flex;
  justify-content: center;
  align-items: center;
}

.business-card-back {
  transform: rotateY(180deg);
}

Style the front side of the card:

.laptop {
  position: relative;
  width:65px;
  height:50px;
  border: 3px solid #333;
  top:-45px;
}

.laptop:before {
  content:"jd";
  color: #333; 
  font-size: 30px;
  position: absolute;
  background-color: #e9d8a6;
  width:50px;
  height:35px;
  border: 3px solid #333;
  left:4.4px;
  top:4.4px;
}

.laptop:after {
  position: absolute;
  content:"";
  width:6px;
  height:4px;
  background-color: #0a9396;
  top:3.5px;
  left:40px;
  box-shadow: -45px 42.5px #0a9396, 23px -3.5px #0a9396;
}

.keyboard {
  position: relative;
  perspective: 200px;
  width: 20px;
  height:3px;
  background-color: #333;
  top:67px;
  left:22px;
}

.keyboard:before {
  position: absolute;
  content:"";
  border: 3.5px solid #333;
  width:72px;
  height: 25px;
  transform: rotateX(60deg);
  top:-17px;
  left:-28px;
}

.keyboard:after {
  content:"www.example.co.uk";
  position: absolute;
  font-family: tahoma;
  color: #333;
  top:65px;
  left:-62px;
}

.logo-text {
  color: #333;
  font-family: tahoma;
  width:150px;
  position: relative;
  top:12px;
  font-size:19px;
  left:-65px;
}

.logo-text:before {
  content:"John Doe";
  position: absolute;
  top:22px;
  font-size:16px;
  font-weight: bold;
  width:150px;
  left:0;
}
CSS  3d flip Business Card

Style the backside of the card:

.logo-left-side {
  position: relative;
  background-color: #333;
  width:2px;
  height:130px;
}

.logo-left-side:before {
  content:"jd";
  color: #333;
  font-size: 50px;
  position: absolute;
  left:-50px;
}

.logo-left-side:after {
  content:"John Doe";
  color: #333;
  font-size:20px;
  font-weight: bold;
  font-family: tahoma;
  left:-107px;
  position: absolute;
  width:100px;
  top:60px;
}

.text {
  position: relative;
  color: #333;
  font-family: tahoma;
  width:120px;
  left:-124px;
  top:90px;
}

.text:before {
  content:"☎ Phone: 123456789";
  position: absolute;
  left:110px;
  top:-85px;
  font-size:11px;
  width:150px;
}

.text:after {
  content:"🏢 Address: Oxford Street 123, London, United Kingdom";
  color: #333;
  left:130px;
  top:-60px;
  position: absolute;
  width:100px;
  font-size:11px;
}

.mail {
  position: relative;
  font-size: 11px;
  color: #333;
  font-family: tahoma;
  top:65px;
  width:150px;
  left:-7.5px;
}

.mail:before {
  content:"🌐 www.example.co.uk";
  color: #333;
  font-size:11px;
  font-family: tahoma;
  top:25px;
  position: absolute;
}
CSS  3d flip Business Card

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS 3D Transforms

HTML & CSS Folded Birthday Card

CSS Flip Postcard

Categories
CSS Web development

CSS :hover and :active selectors

The CSS selectors select the HTML elements which you want to style.

CSS :hover and :active selectors
*to see the demo and the code of the animation above click here.

The CSS :hover selector is used to select the element when you mouse over it.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
	
.square {
	width:100px;
	height: 100px;
	background-color: #2a9d8f;
	}
.square:hover {
  background-color: #e9c46a;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

Hover over the square:

To make the change of the selected element smoother you can add to the :hover selector the transition property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
	
.square {
	width:100px;
	height: 100px;
	background-color: #2a9d8f;
	transition: .5s;
	}
.square:hover {
  background-color: #e9c46a;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

Hover over the square:

The CSS :active selector is used to change the appearance of a link /HTML element while it is being activated (being clicked).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
	
.square {
	width:100px;
	height: 100px;
	background-color: #2a9d8f;
	}
.square:active {
  background-color: #e9c46a;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

Click on the square:

Using the CSS :hover and :active selectors you can style links with different styles:

<!DOCTYPE html>
<html>
<head>
<style>
	
p {color: #333; font-size: 20px;font-family: arial;}
	
a.link-1:hover, a.link-1:active {color: #2a9d8f;}
a.link-2:hover, a.link-2:active {font-size: 35px;}
a.link-3:hover, a.link-3:active {background-color: #2a9d8f;}
a.link-4:hover, a.link-4:active {font-family: 'Brush Script MT', cursive;}
a.link-5:visited, a.link-5:link {text-decoration: none;}
a.link-5:hover, a.link-5:active {text-decoration: underline;}
</style>
</head>
<body>

<p>Hover over the links to see effects.</p>

<p><a class="link-1" href="">This link changes color</a></p>
<p><a class="link-2" href="">This link changes font-size</a></p>
<p><a class="link-3" href="">This link changes background-color</a></p>
<p><a class="link-4" href="">This link changes font-family</a></p>
<p><a class="link-5" href="">This link changes text-decoration</a></p>

</body>
</html>

Output:

Hover over the links to see effects.

Enjoy coding!

Read also:

CSS :focus & :focus-within Selectors

CSS :checked Selector

CSS :not Selector

Categories
CSS Web development

CSS Door Animation (Open/Close on Hover)

CSS Door Open Close Animation

Demo:

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

T0 create the CSS Door Animation follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="door">
  <div class="door-front">
    <div class="knob"></div>
  </div>
  <div class="door-back">
    <div class="rack"></div>
    <div class="hat"></div>
    <div class="jacket"></div>
  </div>
  <div class="door-mat"></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;
  overflow: hidden;
}

Style the door:

.door {
  position: relative;
  width: 170px;
  height:270px;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: perspective(2500px);
 
}
.door-front {
  width: 170px;
  height:270px;
  overflow: hidden;
  transform-origin: left;
  box-shadow: 30px 0 50px rgba(0,0,0,0.2);
  position: absolute;
  background-color: #924500;
  z-index:1;
  transition: .5s;
}

.door-front:before, .door-front:after {
  content:"";
  position: absolute;
  background-color: #924500;
  width: 105px;
  height: 75px;
  border: 10px ridge #b05500;
  left:22.5px;
}

.door-front:before {
  top:25px;
}

.door-front:after {
  top:155px;
}
.knob {
  position: absolute;
  width: 20px;
  height:30px;
  background-color: #eeba0b;
  top:122px;
  left:145px;
  border-radius:2px;
}

.knob:before {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: #f1c83c;
  width:18px;
  height:18px;
  left:-1px;
  box-shadow: 2px 2px rgba(0,0,0,0.2);
}

.knob:after {
  content:"";
  position: absolute;
  width:4px;
  height:7px;
  background-color: #333;
  top:20px;
  left:8.5px;
}

Add the other side of the door:

.door-back {
  position: relative;
  background: linear-gradient(0deg, rgba(193,124,116,1) 13%, rgba(73,88,103,1) 13%, rgba(79,100,124,1) 15%, rgba(87,115,153,1) 15%);
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 10px solid #edf2f4;
}

.rack {
  position: absolute;
  width: 7px;
  height:150px;
  background-color: #a78a7f;
  top:90px;
  left:100px;
}

.rack:before {
  content:"";
  position: absolute;
  width:70px;
  height:10px;
  border-radius: 30px 30px 0 0;
  background-color: #8c1c13;
  top:150px;
  left:-30px;
}

.rack:after {
  position: absolute;
  content:"";
  width:30px;
  height: 30px;
  border-bottom: 5px solid #a78a7f;
  border-right: 5px solid #a78a7f;
  border-bottom-right-radius:100%;
  top:20px;
}

.hat {
  position: absolute;
  width: 60px;
  height: 15px;
  border-radius:20px 20px 0 0; 
  background-color: #bf4342;
  top:80px;
  left:75px;
}

.hat:before {
  content:"";
  position: absolute;
  width: 40px;
  height: 20px;
  border-radius:10px 10px 0 0; 
  background-color: #bf4342;
  top:-20px;
  left:10px;
  box-shadow: inset 0 -5px #e7d7c1;
}

.hat:after {
  content:"";
  position: absolute;
  width: 40px;
  height: 100px;
  background-color: #735751;
  border-radius: 50% 60% 20% 20% / 70% 70% 20% 20%;
  top:20px;
  left:45px;
}

.jacket {
  position: absolute;
  width: 7px;
  height: 7px;
  background-color: #e7d7c1;
  border-radius:50%;
  top:120px;
  left:137px;
  box-shadow: 0 20px #e7d7c1;
}

.jacket:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: #a78a7f;
  left:-10px;
  top:40px;
}

.jacket:after {
  content:"";
  position: absolute;
  border-top: 15px solid #8c1c13;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  width:0;
  height:0;
  top:40px;
  left:-12px;
}

Style the doormat:

.door-mat {
  position: relative;
  perspective: 200px;
}

.door-mat:before {
  content:"";
  position: absolute;
  width: 170px;
  height: 70px;
  background: repeating-linear-gradient(#a8763e, #a8763e 10px,
  #9d741a 10px, #9d741a 20px);
  top:20px;
  outline:5px solid #a8763e;
  transform: rotateX(45deg);
}

Create the flip effect:

.door:hover .door-front {
  transform: rotateY(-160deg); 
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

CSS 3d flip Business Card

CSS Envelope (Open/Close on Hover)

Categories
CSS Web development

CSS Flip Postcard

CSS Postcard

Demo:

*to see the CSS Flip Postcard on the website click here.

To create the CSS Flip Postcard follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

Create the postcard container, front-side and the back-side of the card:

<div class="post-card">
  <div class="post-card-inner">
    <div class="post-card-front">
      <div class="egypt">
        <div class="sky"></div>
        <div class="pyramids"></div>
        <div class="bottom">
          <div class="text">EGYPT</div>
        </div>
      </div>   
    </div>
    <div class="post-card-back">
      <div class="postCard">POSTCARD</div>
      <div class="address">
        <p class="name">John Doe</p>
        <p class="street">123 Oxford Street</p>
        <p class="city">123, London</p>
        <p class="country">United Kingdom</p>
      </div>
      <p class="greetings">Dear John,</br></br>
  WISH YOU </br>WERE HERE!</br>Lena, xxx </p>
      </div>    
    </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;
}

Create the flip effect:

.post-card {
  background-color: transparent;
  width: 400px;
  height: 300px;
  perspective: 1000px;
}

.post-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), 10px 18px 20px rgba(0,0,0,0.2);
}

.post-card:hover .post-card-inner {
  transform: rotateY(180deg);
}

.post-card-front, .post-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.post-card-front {
  background-color: #e9c46a;
  border: 10px solid #fff;
}
.post-card-back {
  background-color: #faedcd;
  border: 10px solid #faedcd;
  transform: rotateY(180deg);
  overflow: hidden;
}

Style the front side of the card:

.egypt {
  position: absolute;
  overflow:hidden;
  width: 400px;
  height: 300px;
}

.sky {
  position: absolute;
  border-radius:50%;
  background-color: #fefae0;
  width:100px;
  height:100px;
  top:30px;
  left:230px
}

.sky:before {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-left: 390px solid rgba(255,255,255,0.2);
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  left:-230px;
}

.sky:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  border-right: 300px solid rgba(255,255,255,0.2);
  top:70px;
  left:-170px;
  transform: skew(45deg);
}

.pyramids {
  position: absolute;
  left:-25px;
  height:0;
  width:0;
  border-bottom: 200px solid #f4a261;
  border-right: 150px solid transparent;
  border-left: 150px solid transparent;
  top:90px;
}

.piramids:before {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-bottom: 200px solid rgba(0,0,0,0.2);
  border-right: 150px solid transparent;
}

.piramids:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  top:20px;
  border-bottom: 200px solid #e76f51;
  border-right: 150px solid transparent;
  border-left: 150px solid transparent;
}

.bottom {
  position: absolute;
  width: 400px;
  height:50px;
  background-color: #264653;
  top:250px;
}

.text {
  font-size:50px;
  color: white;
}

Style the backside of the card:

.postCard {
  margin-top:30px;
}

.postCard:before {
  content:"";
  position: absolute;
  width:3px;
  height:200px;
  background-color: #333;
  left:200px;
  top:70px;
}

.postCard:after {
  content:"";
  position: absolute;
  height:3px;
  width:150px;
  background-color: #333;
  top:150px;
  left:230px;
  box-shadow: 0 30px #333, 0 60px #333, 0 90px #333;
}

.address {
  position: relative;
  top:0;
}

.address:before {
  content:"";
  position: absolute;
  width: 60px;
  height: 70px;
  border: 5px solid #333;
  outline-style: dashed;
  outline-color: #333;
  background-color: #cb997e;
  top:-40px;
  left:320px;
}

.address:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  border-style: dashed;
  width: 50px;
  height: 50px;
  top:10px;
  left:290px;
}

.name, .street, .city, .country, .greetings {
  font-family: 'Brush Script MT', cursive;
  font-size:20px;
  position: absolute;
}

.name {
  top:60px;
  left: 250px;
}

.street {
  top:90px;
  left: 250px;
}

.city {
  top:120px;
  left: 250px;
}

.country {
  top: 150px;
  left: 250px;
}

.greetings {
  left:40px;
  top:100px;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Windmill Animation

CSS Plane Animation

CSS Train Animation