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
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 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 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
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
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
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
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 and watch the video tutorial:

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!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS :hover and :active selectors

CSS Text Change on Hover

CSS Mirror/ Reflection Text Effect

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