Tag: CSS

CSS caret-color Property

Post author By Lena Stanley
Post date January 7, 2022

The CSS caret-color property defines the colour of the cursor in inputs, textareas (or any element that is editable).

Syntax:

caret-color: auto|color;

auto (default) -the browser uses the current colour for the cursor.

color – defines a colour to use for the cursor (all legal colour values can be used: rgba, hex etc).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  caret-color: green;
}
.ex2 {
  caret-color: transparent;
} 
.ex3 {
  caret-color: orange;
}
  
</style>
</head>
<body>

<input value="Default caret color"></br>
<input class="ex1" value="Green caret color"></br>
<input class="ex2" value="Transparent caret color"></br>
<p contenteditable class="ex3">This paragraph can be edited. Its caret has an orange color.</p>

</body>
</html>

Output:

This paragraph can be edited. Its caret has an orange color.

Read also:

HTML contenteditable Attribute

HTML input tag

HTML textarea tag

Tags caret-color, CSS

Web development

CSS font-kerning Property

Post author By Lena Stanley
Post date January 7, 2022

The CSS font-kerning property controls the usage of the kerning information stored in a font.

Syntax:

font-kerning: auto|normal|none;

auto (default) – the browser specifies whether font-kerning will be applied or not.

normal – defines that font-kerning is applied.

none – defines that font-kerning is not applied.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 

.example-1 {font-kerning: auto;}
.example-2 {font-kerning: normal;}
.example-3 {font-kerning: none;}

</style>
</head>
<body>

<p class="example-1">“The author of ‘THE OLD MAN AND THE SEA’ is E. Hemingway.”</p>
<p class="example-2">“The author of ‘THE OLD MAN AND THE SEA’ is E. Hemingway.”</p>
<p class="example-3">“The author of ‘THE OLD MAN AND THE SEA’ is E. Hemingway.”</p>

</body>
</html>

Output:

“The author of ‘THE OLD MAN AND THE SEA’ is E. Hemingway.”

Enjoy coding!

Read also:

CSS Fallback Fonts

CSS font-family Property

CSS @font-face Rule

Tags CSS, font, font-kerning

Web development

CSS font-weight Property

Post author By Lena Stanley
Post date January 6, 2022

The CSS font-weight property settles how thick or thin characters in the text are displayed.

Demo:

Syntax:

font-weight: normal|bold|bolder|lighter|number;

normal (default) – specifies normal characters.

bold – specifies thick characters.

bolder – specifies thicker characters.

lighter – specifies lighter characters.

100, 200, 300, 400, 500, 600, 700, 800, 900 – specifies from thin to thick characters (400 is the same as normal, and 700 is the same as bold).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.normal {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.number {
  font-weight: 900;
}

</style>
</head>
<body>

<p class="normal">This is a paragraph.</p>
<p class="bold">This is a paragraph.</p>
<p class="number">This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Enjoy coding!

Read also:

CSS font-style Property

CSS font-stretch Property

CSS font-family Property

Tags CSS, font, font-weight

Web development

CSS font-stretch Property

Post author By Lena Stanley
Post date January 6, 2022

Some fonts provide additional faces: condensed faces (narrower) and expanded faces (wider). The CSS font-stretch property let the user make text narrower or wider.

The CSS font-stretch property has no effect if the chosen font does not offer condensed or expanded faces.

The font used in the tutorial: Encode Sans (source: Google Fonts).

Demo:

Syntax:

font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded;

normal (default) – no font stretching.

ultra-condensed – the text is narrow as possible.

extra-condensed – the text is narrower than semi-condensed but not as narrow as extra-condensed.

semi-condensed – the text is narrower than normal but not as narrow as condensed.

semi-expanded – the text is wider than normal but not as wide as expanded.

expanded – the text is wider than semi-expanded but not as wide as extra-expanded.

extra-expanded – the text is wider than expanded but not as wide as ultra-expanded.

ultra-expanded – the text is wide as possible.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
  
@font-face {
  font-family: Encode Sans;
  src: url(https://lenadesign.org/wp-content/uploads/2022/01/EncodeSans-VariableFont_wdthwght.ttf);
}
.a,.b,.c {
   font-family: Encode Sans; 
  }
  
.a {
  font-stretch: condensed;
}
.b {
  font-stretch: normal;
}
.c {
  font-stretch: expanded;
}

</style>
</head>
<body>
<p class="a">The font-stretch Property, condensed.</p>
<p class="b">The font-stretch Property, normal.</p>
<p class="c">The font-stretch Property, expanded.</p>
</body>
</html>

Output:

The font-stretch Property, condensed.

The font-stretch Property, normal.

The font-stretch Property, expanded.

Enjoy coding!

Read also:

CSS @font-face Rule

CSS Fallback Fonts

Web Safe Fonts

Tags CSS, font, font-stretch

Web development

CSS Happy New Year Animation (fireworks)

Post author By Lena Stanley
Post date December 22, 2021

To learn how to create the CSS Happy New Year Animation follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Happy New Year Animation (fireworks) on the website click here.

Step1.

Add HTML

<div class="happy-new-year">
  <div class="circle">
    <div class="clock-bottom"></div>
  </div>
  <div class="clock-middle">
    <div class="clock-face"></div>
  </div>
  <div class="clock-top">
    <div class="roof"></div>
    <div class="deco"></div>
    <div class="sides"></div>
  </div>
  <div class="clouds"></div>
  <div class="fireworks">
    <div class="one"></div>
  </div>
    <div class="fireworks-2">
    <div class="two"></div>
    </div>
      <div class="fireworks-3">
    <div class="two"></div>
      </div>
   <div class="fireworks-4">
    <div class="one"></div>
      </div>
  <div class="text">Happy 2022!</div>
    </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: #1d3557;
  overflow: hidden;
}

.happy-new-year {
  position: relative;
}

Add the circle and clouds (background):

.circle {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #000814;
}

.clouds {
  position: absolute;
  top:0;
  left:0;
}

.clouds:before, .clouds:after {
  content:"";
  position: absolute;
  background-color: #001d3d;
}

.clouds:before {
  width: 100px;
  height: 40px;
  border-radius: 30px;
  top:130px;
  left:-40px;
  box-shadow: 275px 40px #001d3d;
}

.clouds:after {
  width:50px;
  height: 50px;
  left:-10px;
  top:110px;
  border-radius:50%;
  box-shadow: 270px 40px #001d3d;
}

Style the clock:

.clock-bottom {
  position: absolute;
  width: 100px;
  height:100px;
  background-color: #dd904a;
  top:240px;
  left:95px;
  border: 5px solid #333;
}

.clock-bottom:before {
  content:"";
  position: absolute;
  background-color: #333;
  width: 20px;
  height:100px;
  border-radius:30px;
  top:10px;
  left:10px;
  box-shadow: 30px 0 #333, 60px 0 #333;
}

.clock-bottom:after {
  content:"";
  position: absolute;
  background-color: #9c5221;
  width:12px;
  height:100px;
  border-radius: 30px;
  left:14px;
  top:14px;
  box-shadow: 30px 0 #9c5221, 60px 0 #9c5221;
}

.clock-middle {
  position: absolute;
  width:100px;
  height:100px;
  background-color: #dc8f4a;
  border: 5px solid #333;
  top:135px;
  left:95px;
  z-index:1;
}

.clock-middle:before {
  content:"";
  position: absolute;
  border: 5px solid #333;
  width:80px;
  height:80px;
  top:5px;
  left:5px;
}

.clock-middle:after {
  content:"";
  position: absolute;
  border-radius:50%;
  border: 5px solid #333;
  height:75px;
  width: 75px;
  top:7px;
  left:7px;
  background-color: #f9fcc5;
}
.clock-top {
  position: absolute;
  width:100px;
  height:20px;
  border: 5px solid #333;
  background-color: #d88e4a;
  top:110px;
  left:95px;
}

.clock-top:before {
  content:"";
  position: absolute;
  width:71px;
  height:0;
  border-top: 30px solid transparent;
  border-bottom: 50px solid #333;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  top:-80px;
  left:-5px;  
}

.clock-top:after {
  position: absolute;
  content:"";
  border: 5px solid #333;
  background-color: #d88e4a;
  width:63px;
  height:25px;
  top:-80px;
  left:14px;
}

.roof {
  position: absolute;
  height:0;
  width:0;
  border-bottom: 100px solid #333;
  border-right: 35px solid transparent;
  border-left: 35px solid transparent;
  top:-175px;
  left:15px;
}

.roof:before, .roof:after {
  content:"";
  background-color: #333;
  position: absolute;
}

.roof:before {
  width:2px;
  height:20px;
  left:-54px;
  top:150px;
  box-shadow: 106px 0 #333, 18px -75px #333, 88px -75px #333;
}

.roof:after {
  border-radius:50%;
  width:5px;
  height: 5px;
  left:-55.5px;
  top:145px;
  box-shadow: 106.5px 0 #333, 18px -75px #333, 88px -75px #333;
}

.deco {
  position: absolute;
  background-color: #965123;
  width: 10px;
  height: 10px;
  top:5px;
  left:7px;
  box-shadow: 15px 0 #965123, 30px 0 #965123, 45px 0 #965123, 60px 0 #965123, 75px 0 #965123;
  z-index:3;
}

.deco:before {
  content:"";
  position: absolute;
  background-color: #965123;
  width:10px;
  height: 13px;
  top:-75px;
  left:15px;
  box-shadow: 15px 0 #965123, 30px 0 #965123, 45px 0 #965123;
}

.sides {
  position: absolute;
  background-color: #333;
  width:30px;
  height: 100px;
  left:-30px;
  top:25px;
  box-shadow:130px 0 #333;
}

.sides:before {
  content:"";
  position: absolute;
  width:20px;
  height: 90px;
  background-color: #dc904c;
  left: 5px;
  top:5px;
  box-shadow:130px 0 #dc904c;
}

Style and animate the clock face:

.clock-face {
  position: absolute;
  background-color: #333;
  border-radius:50%;
  width:15px;
  height:15px;
  left: 50%;
  top: 50%;
  z-index:2;
  transform: translate(-50%, -50%);
}

.clock-face:before, .clock-face:after {
  content:"";
  position: absolute;
  background-color: #333;
  border-radius:30px;
  transform-origin: right;
}

.clock-face:before {
  width:30px;
  height: 5px;
  top:5px;
  left:-23px;
  transform: rotate(-50deg);
  animation: rotate 3s linear forwards;
 
}

@keyframes rotate {
  from {transform: rotate(-50deg);}
  to {transform: rotate(450deg);}
}

.clock-face:after {
  content:"";
  position: absolute;
  width: 25px;
  height:5px;
  top:5px;
  left:-18px;
  animation: rotateTwo 3s linear forwards;
}

@keyframes rotateTwo {
  from {transform: rotate(0deg);}
  to {transform: rotate(90deg);}
}

Add fireworks:

.fireworks, .fireworks-2, .fireworks-3, .fireworks-4 {
  position: absolute;
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

.fireworks {
  top:-60px;
  left:-70px;
}

.fireworks-4 {
  left: 330px;
  top:170px;
  transform: scale(1.3);
}

.fireworks-3 {
  top:-100px;
  left:250px;
  transform: scale(0.7);
}

.fireworks-2 {
  top:50px;
  left:-150px;
  transform: scale(1.2);
}

.one, .one:before, .one:after, .two, .two:before, .two:after{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left:50%;
  top:50%;
  opacity:0;
  transform: translate(-50%,-50%);
}

.one {
  border: 5px dotted #ffd166;
  animation: show 1.2s ease infinite 3s;
}

.two {
  border: 5px dotted #118ab2;
  animation: show 1.2s ease infinite 3.2s;
}

@keyframes show {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:100px; width: 100px;opacity:1;}
}

.one:before {
  content:"";
  border: 5px dotted #ef476f;
  animation: show-2 1.2s ease infinite 3.2s;
}

.two:before {
  content:"";
  border: 5px dotted #ffd166;
  animation: show-2 1.2s ease infinite 3.4s;
}

.one:after {
  content:"";
  border: 5px dotted #118ab2;
  animation: show-3 1.2s ease infinite 3.4s;
}

.two:after {
  content:"";
  border: 5px dotted #ef476f;
  animation: show-3 1.2s ease infinite 3.6s;
}

@keyframes show-2 {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:130px; width: 130px;opacity:1;}
}

@keyframes show-3 {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:160px; width: 160px;opacity:1;}
}

Style and animate the text:

.text {
  width: 300px;
  text-align: center;
  color: white;
  font-size: 40px;
  position: absolute;
  top:305px;
  z-index:10;
  font-family: tahoma;
  left:0;
  opacity:0;
  white-space: nowrap;
  animation: text 4s ease forwards 4s;
}

@keyframes text {
  0% {opacity:0;}
  100% {opacity:1;}
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Champagne Glass Animation

CSS Party drinks

CSS Birthday Animation

Tags CSS, CSS animation, fireworks, HTML, NewYear

Web development

CSS Christmas Animation

Post author By Lena Stanley
Post date December 20, 2021

To learn how to create the CSS Christmas Animation follow the steps below.

Demo:

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

Step1.

Add HTML

<div class="merry-christmas">
  <div class="window">
    <div class="christmas-tree">
      <div class="star"></div>
      <div class="christmas-lights"></div>
      <div class="balls"></div>
    </div>
    <div class="curtains"></div>
    <div class="window-details"></div>
  </div>
  <div class="snow">
    <div class="snowflakes"></div>
    <div class="snowflakes-2"></div>
    <div class="snowflakes-3"></div>
    <div class="snowflakes-4"></div>
    <div class="snowflakes-5"></div>
  </div>
  <div class="bricks"></div>
</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: #00111c;
  overflow: hidden;
}

.merry-christmas {
  position: relative;
}

Style the window:

.window {
  position: relative;
  overflow: hidden;
  width:300px;
  height:220px;
  border: 10px solid #001523;
  background-color: #001a2c; 
}
.window-details {
 position: absolute;
 z-index:3;
 width:300px;
 height:5px;
 background-color: #001523;
 top:115px;
}

.window-details:before, .window-details:after {
  content:"";
  position: absolute;
  background-color: #001523;
  height: 220px;
  top:-115px;
}

.window-details:before {
  width:20px;
  left: 135px;
}

.window-details:after {
  width:5px;
  left:65px;
  box-shadow: 160px 0 #001523;
}

Add Christmas Tree and curtains:

.christmas-tree, .christmas-tree:before {
  position: absolute;
  width:100px;
  height:0;
  border-bottom: 50px solid #242c1d;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
}

.christmas-tree {
  top: 170px;
  left:120px;
}

.christmas-tree:before {
  content:"";
  top:-40px;
  left:-30px;
}

.christmas-tree:after {
  content:"";
  height:0;
  position: absolute;
  border-bottom: 90px solid #242c1d;
  border-right: 70px solid transparent;
  border-left: 70px solid transparent;
  top:-130px;
  left:-20px;
}

.star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-bottom: 18px solid #ffba08;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
  top:-140px;
  left:25px;
  z-index:1;
    }

.star:before {
      border-bottom: 18px solid #ffba08;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -10px;
      left: -17px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

.star:after {
      position: absolute;
      display: block;
      top: 0.75px;
      left: -25px;
      width: 0px;
      height: 0px;
      border-right: 25px solid transparent;
      border-bottom: 18px solid #ffba08;
      border-left: 25px solid transparent;
      transform: rotate(-70deg);
      content:'';
}

.christmas-lights, .christmas-lights:before, .christmas-lights:after {
  position: absolute;
  width:5px;
  height: 5px;
  background-color: #ffba08;
  border-radius:50%;
}

.christmas-lights {
  top:-80px;
  left:7px;
  z-index:1;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08, 45px 18px #ffba08, 50px 20px #ffba08, 55px 22px #ffba08, 60px 24px #ffba08, 65px 26px #ffba08, 70px 28px #ffba08,75px 30px #ffba08, 80px 32px #ffba08, 85px 34px #ffba08, 90px 36px #ffba08;
  animation: light 17s linear infinite;
}

.christmas-lights:before {
  content:"";
  top:55px;
  left:-20px;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08, 45px 18px #ffba08, 50px 20px #ffba08, 55px 22px #ffba08, 60px 24px #ffba08, 65px 26px #ffba08, 70px 28px #ffba08,75px 30px #ffba08, 80px 32px #ffba08, 85px 34px #ffba08, 90px 36px #ffba08, 95px 38px #ffba08, 100px 40px #ffba08, 105px 42px #ffba08, 110px 44px #ffba08, 115px 46px #ffba08, 120px 48px #ffba08, 125px 50px #ffba08;
}

.christmas-lights:after {
  content:"";
  top:110px;
  left:-28px;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08;
}

@keyframes light {
  0% {filter: drop-shadow(0 0 8px #fff) brightness(1.2) hue-rotate(0) saturate(7);}
  50% {filter: drop-shadow(0 0 10px #fff) brightness(2) hue-rotate(360deg) saturate(7);}
  100% {filter: drop-shadow(0 0 8px #fff) brightness(1.2) hue-rotate(0) saturate(7);}
}

.balls {
  position: absolute;
  border-radius: 50%;
  height:15px;
  width: 15px;
  background-color: #b62922;
  box-shadow: 40px 30px #003488, 75px -15px #b62922, 45px -40px #b62922, 10px -55px #003488, 30px -95px #b62922, 65px -80px #003488;
  z-index:2;
}

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

.curtains:before, .curtains:after {
  content:"";
  position: absolute;
  background-color: rgba(0, 33, 55,0.6);
  width: 200px;
  height: 250px;
  top:-15px;
}

.curtains:before {
  border-radius: 0 0 50% 0;
  left:-100px;
}

.curtains:after {
  border-radius: 0 0 0 50%;
  left:200px;
}

Add some snow and bricks:

.snow {
  position: absolute;
  z-index:5;
}

.snow:before, .snow:after {
  content:"";
  position: absolute;
  background-color: white;
  width:30px;
  height:5px;
}

.snow:before {
  top:-120px;
  left:10px;
  border-radius: 0 20px 0 0;
  box-shadow: 230px 105px white;
}

.snow:after {
  border-radius:10px;
  top:-245px;
  left:280px;
  box-shadow: -15px 0 white, -40px 0 white, -85px 0 white, -170px 0 white,-195px 0 white;
}

.bricks {
  position: absolute;
  background-color: #001523;
  width: 80px;
  height: 25px;
  left:100px;
  top:250px;
  box-shadow: 100px 0 #001523, 240px -50px #001523, -240px -100px #001523, -220px -150px #001523, 300px -200px #001523,-150px -300px #001523;
}

and create the snowfall:

.snowflakes, .snowflakes-2, .snowflakes-3, .snowflakes-4, .snowflakes-5 {
  position: absolute;
  border-radius:50%;
  background-color: rgba(255,255,255,0.5);
  width:5px;
  height:5px;
  top:-500px;
  box-shadow: 100px -100px rgba(255,255,255,0.5), -100px -150px rgba(255,255,255,0.5), -200px -100px rgba(255,255,255,0.5), 0 -100px rgba(255,255,255,0.5), 200px -300px rgba(255,255,255,0.5), 100px -350px rgba(255,255,255,0.5), 150px -100px rgba(255,255,255,0.5), 70px -200px rgba(255,255,255,0.5), 300px -100px rgba(255,255,255,0.5), 400px -100px rgba(255,255,255,0.5), 450px -300px rgba(255,255,255,0.5), 500px -300px rgba(255,255,255,0.5), 600px -400px rgba(255,255,255,0.5), 550px -250px rgba(255,255,255,0.5), -200px -300px rgba(255,255,255,0.5), -100px -400px rgba(255,255,255,0.5), 700px -500px rgba(255,255,255,0.5),-400px -500px rgba(255,255,255,0.5), -350px -100px ;
  box-shadow: 100px -100px rgba(255,255,255,0.5), -100px -150px rgba(255,255,255,0.5), -200px -100px rgba(255,255,255,0.5), 0 -100px rgba(255,255,255,0.5), 200px -300px rgba(255,255,255,0.5), 100px -350px rgba(255,255,255,0.5), 150px -100px rgba(255,255,255,0.5), 70px -200px rgba(255,255,255,0.5), 300px -100px rgba(255,255,255,0.5), 400px -100px rgba(255,255,255,0.5), 450px -300px rgba(255,255,255,0.5), 500px -300px rgba(255,255,255,0.5), 600px -400px rgba(255,255,255,0.5), 550px -250px rgba(255,255,255,0.5), -200px -300px rgba(255,255,255,0.5), -100px -400px rgba(255,255,255,0.5), 700px -500px rgba(255,255,255,0.5),-400px -500px rgba(255,255,255,0.5), -350px -100px rgba(255,255,255,0.5), -500px -300px rgba(255,255,255,0.5), 800px -200px rgba(255,255,255,0.5), 750px -250px rgba(255,255,255,0.5), 680px -150px rgba(255,255,255,0.5), 900px -100px rgba(255,255,255,0.5), -700px -300px rgba(255,255,255,0.5),950px -310px rgba(255,255,255,0.5);
}

.snowflakes {
  animation: fall 7s linear infinite
}

@keyframes fall {
  0% {transform: translateY(0);}
  100% {transform: translateY(1000px) translateX(-100px);}
}

.snowflakes-2 {
  left: 100px;
  animation: fall-2 7s linear infinite;
}

@keyframes fall-2 {
  0% {transform: translateY(0);}
  100% {transform: translateY(1000px) translateX(100px);}
}

.snowflakes-3 {
  left:-200px;
  animation: fall-2 7s linear infinite 5s;
}

.snowflakes-4 {
  left:50px;
  animation: fall 7s linear infinite 2s;
}

.snowflakes-5 {
  left:-50px;
  animation: fall 7s linear infinite 4s;
}

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

Pure CSS Snow Globe

CSS Christmas Tree

Tags Christmas, Christmas Tree, CSS, CSS animation, HTML, snowfall

Web development

Book Page Flip (CSS/ jQuery)

Post author By Lena Stanley
Post date December 9, 2021

To learn how to create the Book Page Flip using CSS and jQuery follow the steps below and watch the video tutorial.

Demo:

*to see the Book Page Flip (CSS/ jQuery) on the website click here.

Images used in the tutorial:

Step1.

Add HTML

<div class="recipe-book">
<div class="cookie-book">
    <div class="ongoing left sheet one"></div>
    <div class="ongoing right sheet two">Cookie Book</div>
</div>
<div class="controls">
    <button class="back"><</button>
    <button class="next">></button>
</div>
  </div>

Step2.

Add CSS

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

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

.recipe-book {
  position: relative;
  padding:10px;
  font-family: Trebuchet MS;
}

.cookie-book {
  width:500px;
  height:350px;
  position:relative;
  transform-style: preserve-3d;
  perspective:2000px;
  margin-bottom:15px;
  left:-25%;
}

Style the sheets:

.cookie-book .sheet {
  position:absolute;
  top:0;
  left:50%;
  width:50%;
  height:100%;
  transition: .7s;
  transform-style: preserve-3d;
  transform:rotateY(0deg);
  backface-visibility:hidden;
  z-index:1;
}

.cookie-book .sheet.left {
  left:0;
  transform-origin:right;
  border-radius: 5px 0 0 5px;
}

.cookie-book .sheet.right {
  left:50%;
  transform-origin:left;
  border-radius: 0 5px 5px 0;
}

.cookie-book .sheet.ongoing {
  z-index:2;
}

.cookie-book .ongoing.right.sheet.move {
  transform:rotateY(-165deg);
}
.cookie-book .ongoing.left.sheet.move {
  transform:rotateY(165deg);
}

.cookie-book .next.left.sheet {
  transform:rotateY(165deg);
}
.cookie-book .next.left.sheet.move {
  transform:rotateY(0deg);
}

.cookie-book .back.right.sheet {
  transform:rotateY(-165deg);
}

.cookie-book .back.right.sheet.move {
  transform:rotateY(0deg);
}

.cookie-book .sheet.one {
  background-color:transparent;
}

.cookie-book .sheet.two {
  background-color: #e63946;
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/12/cookie.png);
  background-size: 170px;
  background-repeat: no-repeat;
  background-position: center 80%;
  font-size: 60px;
  color: #333;
  text-align: center;
}

.cookie-book .sheet.three {
  background-color:#e9c46a; 
  box-shadow: inset -1px 0 rgba(0,0,0,.1);
  text-align: center;
  font-size: 20px;
  line-height:3;
}

.cookie-book .sheet.three:before {
  content:"Ingredients:";
  position: absolute;
  width:250px;
  text-align: center;
  left:0;
  top:75px;
}

.cookie-book .sheet.three:after {
  content:"150g butter, 1/2 cup brown sugar, 1 egg, 1 tsp vanilla extract, 1 3/4 cups flour, 1/2 cup milk chocolate bits, plus 1 tbsp extra";
  position: absolute;
  top:140px;
  width:250px;
  left:0;
  text-align: center;
  line-height: normal;
  font-size:17px;
}

.cookie-book .sheet.four {
  background-color:#e9c46a;
  box-shadow: inset 1px 0 15px rgba(0,0,0,.1);
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/12/bowl.png);
  background-size: 180px;
  background-repeat: no-repeat;
  background-position: center 70%;
}

.cookie-book .sheet.four:before {
  content:"Preparation:";
  width: 250px;
  text-align:center;
  position: absolute;
  font-size: 20px;
  top:60px;
}

.cookie-book .sheet.five {
  background-color:#e9c46a; 
  box-shadow: inset -1px 0 rgba(0,0,0,.1);
}

.cookie-book .sheet.five:before {
  content:"Preheat oven to 175 degrees C.";
  position: absolute;
  width:200px;
  text-align: center;
  top:70px;
  left:25px;
}

.cookie-book .sheet.five:after {
  content:"Cream together the butter, white sugar, and brown sugar until smooth. Beat in the eggs one at a time, then stir in the vanilla. Bake for about 10 minutes in the preheated oven, or until edges are nicely browned.";
  position: absolute;
  width:200px;
  text-align: center;
  top:120px;
  left:25px;
}

.cookie-book .sheet.six {
  background-color:#e9c46a;
  box-shadow: inset 1px 0 15px rgba(0,0,0,.1);
}

.cookie-book .sheet.six:before {
  content:"Enjoy!";
  font-size: 50px;
  text-align: center;
  width: 250px;
  position: absolute;
  top:40%;
}

.controls {
  text-align:center;
  width:500px;
}
.controls button {
  font-size:20px;
  margin:0 5px;
  padding:5px 20px;
  border: none;
  background-color: #d3d3d3;
  transition: .3s;
  cursor: pointer;
}

.controls button:hover {
  background-color: #b1a7a6;
  color: white;
}

Step3.

Add jQuery

To read how to add the jQuery code to HTML click here.

let sheets = [
    { name: 'one'},
    { name: 'two', id: 'Cookie Book'},
    { name: 'three', id: 'Chocolate chip cookies:'},
    { name: 'four'},
    { name: 'five' },
    { name: 'six' },
];

let ongoingSheet = 0,
changing = false;

$('.controls button').click(function(){
	change($(this).prop('class'));
});

function change(flip) {
if (changing) return;
    
if (flip != 'next' && flip != 'back') return;  
let next_sheet = (flip == 'next'),
    	switch_left_data = next_sheet ? sheets[ongoingSheet + 2] : sheets[ongoingSheet - 2],
      switch_right_data = next_sheet ? sheets[ongoingSheet + 3] : sheets[ongoingSheet - 1];
    
if (!switch_left_data && !switch_right_data) return;
    
changing = true;
let $ong_left = $('.cookie-book .ongoing.left.sheet'),
    $ong_right = $('.cookie-book .ongoing.right.sheet'),
    $switch_left = $('<div class="left sheet ' + flip + '" />'),
    $switch_right = $('<div class="right sheet ' + flip + '" />');
    
    if (switch_left_data) {
        $switch_left.addClass(switch_left_data.name);
        $switch_left.html(switch_left_data.id);
    }
    
    if (switch_right_data) {
        $switch_right.addClass(switch_right_data.name); 
        $switch_right.html(switch_right_data.id);
    }  
    
    $('.cookie-book').prepend($switch_left);
    $('.cookie-book').prepend($switch_right);
    
    $ong_left.addClass('to_remove');
    $ong_right.addClass('to_remove');
    
    setTimeout(function(){
        if (next_sheet) {
            $ong_right.addClass('move');
            $switch_left.addClass('move');
        }
        else {
            $ong_left.addClass('move');
            $switch_right.addClass('move');
        }
        
        $switch_left.addClass('ongoing');
        $switch_right.addClass('ongoing');
        
    }, 100);
    
    setTimeout(function(){
        $('.cookie-book .sheet.to_remove').remove();
        $('.cookie-book .sheet').removeClass('move next back'); 
        changing = false;        
    }, 500);
    
    ongoingSheet = next_sheet ? (ongoingSheet + 2) : (ongoingSheet - 2);
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS 2 door Wardrobe (open/ close on hover)

Pure CSS Envelope (Open/Close on click)

CSS Door Animation (Open/Close on Hover)

Tags 3d, CSS, Flip Page, JQuery

Web development

CSS 2 door Wardrobe (open/ close on hover)

Post author By Lena Stanley
Post date December 7, 2021

To learn how to create the CSS 2 door Wardrobe (open/ close on hover) follow the steps below and watch the video tutorial.

Demo:

*to see the CSS 2 door Wardrobe (open/ close on hover) on the website click here.

Step1.

Add HTML

<div class="wardrobe">
  <div class="front">
  <div class="door"></div>
  <div class="second-door"></div>
    </div>
  <div class="inside">
    <div class="rail"></div>
    <div class="hangers"></div>
    <div class="boots"></div>
    <div class="scarf"></div>
  </div>
  <div class="shadow"></div>
</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;
}

Style the wardrobe (inside):

.wardrobe {
  position: relative;
  width:200px;
  height:250px;
  background-color: #5c3b11;
  border:10px solid #b0712d;
  box-shadow: inset -5px 5px 25px rgba(0,0,0,0.5);
  transform-style: preserve-3d;
	transform: perspective(2500px);
  cursor: pointer;
}

.wardrobe:before {
  content:"";
  position: absolute;
  width: 20px;
  height:10px;
  background-color: #8a5924;
  top:260px;
  border-radius: 0 0 5px 5px;
  box-shadow: 180px 0 #8a5924;
}

.wardrobe:after {
  content:"";
  position: absolute;
  height:0;
  width:220px;
  border-bottom: 15px solid transparent;
  border-top: 15px solid #8a5924;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  top:-25px;
  left:-15px;
}

.insite {
  positon: absolute;
  top:0;
  left:0;
}

.rail {
  position: absolute;
  width:200px;
  height:8px;
  background-color: #d3cfc7;
  top:65px;
  box-shadow: inset 0 -3px rgba(0,0,0,0.3), 0 -20px #8a5924, 0 135px #8a5924;
}

.rail:before {
  content:"";
  position: absolute;
  width:70px;
  height:10px;
  border-radius:10px;
  background-color: #8cbf49;
  top:-30px;
  left:35px;
  box-shadow: 5px -10px white, 90px 0 #2a85ad, 90px -10px #e96c1a, 90px -20px #d095c0;
}

.rail:after {
  content:"";
  position: absolute;
  width:100px;
  height:30px;
  background-color: #97a4ad;
  box-shadow: inset 0 10px rgba(0,0,0,0.3);
  top:155px;
  left:3px;
}

Add some accessories:

.hangers {
  position: absolute;
  width:3px;
  height:20px;
  border-radius: 5px 5px 0 0;
  background-color: #6c757d;
  top:62px;
  left:20px;
  box-shadow: 15px 0 #6c757d, 35px 0 #6c757d, 55px 0 #6c757d, 80px 0 #6c757d, 95px 0 #6c757d;
}

.hangers:before {
  content:"";
  position: absolute;
  width:15px;
  height:100px;
  background-color: #d6b109;
  top:20px;
  left:-6px;
  border-radius:30% 30% 5px 5px;
  box-shadow: 15px 0 #60a6ab, 15px 10px #60a6ab, 35px 0 #80579b, 55px 0 #7ba53a, 55px 15px #d795c1, 80px 0 #cc0e2d, 95px 0 #fffaff;
}

.scarf {
  position: absolute;
  width: 25px;
  height: 60px;
  background-color: #a4161a;
  top:73px;
  left:160px;
}

.scarf:before {
  content:"";
  position: absolute;
  background-color: #ba181b;
  width:25px;
  height: 90px;
  top:-11px;
  left:-10px;
  border-radius:3px 3px 0 0;
}

.scarf:after {
  content:"";
  position: absolute;
  width:1px;
  height:10px;
  background-color: #ba181b;
  top:77px;
  left:-8px;
  box-shadow: 5px 0 #ba181b, 10px 0 #ba181b, 15px 0 #ba181b,20px 0 #ba181b,26px -19px #a4161a, 31px -19px #a4161a;
}

.inside:before {
  content:"";
  position: absolute;
  width:65px;
  height:30px;
  background-color: #738d51;
  box-shadow: inset 0 10px rgba(0,0,0,0.3);
  left:135px;
  top:170px;
}

Style the front part of the wardrobe (door):

.front {
  position: relative;
  z-index:1;
}

.door, .second-door {
  position: absolute;
  width: 100px;
  height: 250px;
  background-color: #8a5924;
  top:0;
  transition: .5s;
  z-index:5;
}

.door {
  transform-origin: left;
  box-shadow: inset 1px 0 10px rgba(0,0,0,0.3);
  left:0;
}

.door:before, .second-door:before {
  content:"";
  position: absolute;
  width:5px;
  height:20px;
  background-color: #333;
  border-radius:5px;
  top:115px;
}

.door:before {
  left:85px;
}

.second-door {
  left:100px;
  transform-origin: right;
  box-shadow: inset 1px 0 rgba(0,0,0,0.3), inset -1px 0 10px rgba(0,0,0,0.3);
}

.second-door:before {
  left:10px;
}

Add the shadow:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.3);
  width:220px;
  height:30px;
  border-radius:50%;
  top:260px;
  left:-10px;
  z-index:-1;
}

Add the hover effect to open and close the wardrobe:

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

.wardrobe:hover .door:before {
  display: none;
}

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

.wardrobe:hover .second-door:before {
  display: none;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Door Animation (Open/Close on Hover)

CSS Christmas Card (Open/ Close on Click)

CSS Envelope (Open/Close on Hover)

Tags 3d, :hover, CSS

Web development

CSS caption-side Property

Post author By Lena Stanley
Post date December 6, 2021

The CSS caption-side property defines the placement of a table caption.

Demo:

Click the button to change the caption-side property of the caption element:

List of employees
Name	Job Title	e-mail
Adam White	IT Coordinator	white@example.com
Tom Brown	Web Developer	brown@example.com
Matt Smith	Network Administrator	matt@example.com

Syntax:

caption-side: top|bottom;

top (default) – puts the caption above the table.

bottom – puts the caption under the table.

Example:

<!DOCTYPE html>
<html>
<head>
<style>   
table, th, td {
        border-collapse: collapse;
    }
#example1 {
  caption-side: bottom;
}

#example2 {
  caption-side: top;
}
</style>
</head>
<body>

<h4>caption-side: bottom;</h4>
<table id="example1" border="1">
  <caption id="caption">List of employees</caption>
  <tr>
    <th>Name</th>
    <th>Job Title</th>
    <th>e-mail</th>
  </tr>
  <tr>
    <td>Adam White</td>
    <td>IT Coordinator</td>
    <td>white@example.com</td>
  </tr>
  <tr>
    <td>Tom Brown</td>
    <td>Web Developer</td>
    <td>brown@example.com</td>
  </tr>
  <tr>
    <td>Matt Smith</td>
    <td>Network Administrator</td>
    <td>matt@example.com</td>
  </tr>
</table>

<h4>caption-side: top;</h4>
<table id="example2" border="1">
  <caption id="caption">List of employees</caption>
  <tr>
    <th>Name</th>
    <th>Job Title</th>
    <th>e-mail</th>
  </tr>
  <tr>
    <td>Adam White</td>
    <td>IT Coordinator</td>
    <td>white@example.com</td>
  </tr>
  <tr>
    <td>Tom Brown</td>
    <td>Web Developer</td>
    <td>brown@example.com</td>
  </tr>
  <tr>
    <td>Matt Smith</td>
    <td>Network Administrator</td>
    <td>matt@example.com</td>
  </tr>
</table>
</body>
</html>

Output:

caption-side: bottom;

List of employees
Name	Job Title	e-mail
Adam White	IT Coordinator	white@example.com
Tom Brown	Web Developer	brown@example.com
Matt Smith	Network Administrator	matt@example.com

caption-side: top;

List of employees
Name	Job Title	e-mail
Adam White	IT Coordinator	white@example.com
Tom Brown	Web Developer	brown@example.com
Matt Smith	Network Administrator	matt@example.com

Enjoy coding!

Read also:

HTML Table

HTML Table Headers

HTML tbody tag, thead tag & tfoot tag

Tags caption, caption-side, CSS

Web development

Pure CSS Snow Globe

Post author By Lena Stanley
Post date December 3, 2021

To learn how to create the CSS Snow Globe follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="snow-ball">
  <div class="snow-globe">
  <div class="ball-container">
    <div class="cottage">
      <div class="roof"></div>
      <div class="window"></div>
      <div class="chimney">
        <div id="up" class="smoke"></div>
        <div id="up" class="smoke2"></div>
      </div>
    </div>
    <div class="snowman">
      <div class="scarf"></div>
      <div class="hat"></div>
    </div>
    <div class="trees"></div>
    <div class="trees2"></div>
    <div class="reflection"></div>
    <div class="snowfall">
      <div class="snowflake"></div>
      <div class="snowflake1"></div>
      <div class="snowflake2"></div>
    </div>
  </div>
  <div class="holder"></div>
  </div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

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

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

.snow-ball {
  position: relative;
  top:-15px;
}

Style the snow globe:

.ball-container {
  position: relative;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.3);
  overflow: hidden;
}

.ball-container:before {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:350px;
  height: 110px;
  top:275px;
}

.ball-container:after {
  content:"";
  position: absolute;
  background-color: white;
  border-radius: 50%;
  width:324px;
  height:40px;
  top:255px;
  left:23px;
}

Style the cottage:

.cottage {
  position: absolute;
  z-index:2;
  width: 80px;
  height: 40px;
  background-color: #aca081;
  box-shadow: -40px 0 #8d826c;
  top:230px;
  left:120px;
}

.cottage:before {
  content:"";
  position: absolute;
  background-color: #aca081;
  width:57.5px;
  height: 57.5px;
  transform: rotate(45deg);
  top:-28px;
  left:11px;
}

.cottage:after {
  content:"";
  position: absolute;
  background-color: #e7e7e7;
  box-shadow: -40px 0 #c0c0c0;
  width: 80px;
  height:20px;
  top:22px;
}

.roof {
  position: absolute;
  background-color: rgba(0,0,0,0.2);
  width:40px;
  height: 5px;
  left:-40px;
}

.roof:before {
  content:"";
  position: absolute;
  background-color: white;
  border-radius: 5px 0px 0px 5px;
  width:50px;
  height: 43px;
  top:-43px;
  transform: skew(-45deg);
  left:13px;
}

.roof:after {
  content:"";
  position: absolute;
  transform: skew(45deg);
  background-color: white;
  width: 7px;
  height: 43px;
  border-radius: 0 2px 5px 0;
  top:-43px;
  left:98px;
}

.window {
  position: absolute;
  width: 23px;
  height: 23px;
  background-color: #fff7c2;
  top:-5px;
  left:30px;
  box-shadow: 10px 0 #625f56, -10px 0 #625f56;
}

.window:before {
  content:"";
  position: absolute;
  width: 23px;
  height: 2px;
  background-color: #c5bb97;
  top:11px;
}

.window:after {
  content:"";
  position: absolute;
  width: 2px;
  height: 23px;
  background-color: #c5bb97;
  top:0;
  left:10.3px;
}

.chimney {
  position: absolute;
  background-color: #8d826c;
  width:15px;
  height:30px;
  top:-45px;
  left:-25px;
  box-shadow: 0 -5px #625f56;
  z-index:3;
}

.chimney:before {
  content:"";
  position: absolute;
  width:10px;
  height: 5px;
  background-color: #bfaf94;
  border-radius:10px;
  top: 15px;
  left: 60px;
  box-shadow: 5px 10px #bfaf94, -8px 15px #bfaf94, -28px 25px #bfaf94, -32px 35px #bfaf94, 20px 17px #bfaf94, 30px 30px #bfaf94, 32px 40px #bfaf94,-28px 44px #bfaf94, -50px 37px #7d7360, -55px 44px #7d7360, -70px 41px #7d7360;
}

.chimney:after {
  content:"";
  position: absolute;
  background-color: white;
  width:45px;
  height: 10px;
  top:62px;
  left:44px;
  border-radius:5px;
}

And add smoke from the chimney:

#up {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #e5e5e5;
  border-radius: 50%;
  opacity: 0;
  top: -25px;
  left: -5px;
  z-index:-1;
}

.smoke {
  animation: up 2.5s ease-out infinite; 
}

.smoke2 {
  animation: up 1.7s ease-out infinite 1s; 
}

.smoke2:before {
  content:"";
  position: absolute;
  left:5px;
  width:15px;
  height:15px;
  background-color: #e5e5e5;
  border-radius:50%;
  top:20px;
}

@keyframes up {
  0%{
    transform: translateY(0) scale(0.5);
    opacity: 0.8;
  }
  100%{
    transform: translateY(-50px) scale(1.35);
    opacity: 0.1;
  }
}

Style trees and the snowman:

.trees {
  position: absolute;
  background-color: white;
  width:20px;
  height:45px;
  border-radius:10px;
  left:50px;
  top:210px;
  z-index:3;
  box-shadow: 160px -10px white;
}

.trees:before {
  content:"";
  position: absolute;
  background-color: #625f56;
  width:5px;
  border-radius:5px 5px 0 0;
  height:30px;
  left:7.5px;
  top:25px;
  box-shadow: 159.5px -10px #625f56;
}

.trees2 {
  position: absolute;
  height:0;
  width:0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 90px solid #97b2b0;
  top:165px;
  left:165px;
}

.trees2:before {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 70px solid #62827c;
  top:25px;
  left:25px;
}

.trees2:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 90px solid #62827c;
  left:-140px;
  top:20px;
}

.snowman {
  position: absolute;
  border-radius:50%;
  background-color: rgba(0,0,0,0.1);
  width:30px;
  height:10px;
  top:270px;
  left:265px;
  z-index:4;
}

.snowman:before {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:30px;
  height:30px;
  border-radius: 50%;
  top:-23px;
}

.snowman:after {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:20px;
  height:20px;
  border-radius: 50%;
  top:-40px;
  left:5px;
}

.scarf {
  position: absolute;
  width:20px;
  height:5px;
  background-color: #a5a696;
  top:-23px;
  left:5px;
  border-radius:10px;
  z-index:5;
}

.scarf:before {
  content:"";
  position: absolute;
  width:5px;
  height: 15px;
  background-color: #a5a696;
  left:5px;
  border-radius:10px;
}

.scarf:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  border-right: 10px solid #ca6702;
  top:-7px;
  left:-5px;
  transform: rotate(-10deg);
}

.hat {
  position: absolute;
  z-index:6;
  border-top: 12px solid #60676a;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  border-bottom: 5px solid transparent;
  width:15px;
  top:-52px;
  left:5px;
}

.hat:before {
  content:"";
  position: absolute;
  background-color: #60676a;
  width: 25px;
  height:3px;
  border-radius:10px;
  left:-5px;
}

.hat:after {
  content:"";
  position: absolute;
  background-color: #60676a;
  border-radius:50%;
  width:3px;
  height:3px;
  top:5px;
  box-shadow: 5px 0 #60676a;
}

Add the ball reflection and the holder with the shadow:

.reflection {
  position: absolute;
  z-index:7;
  background-color: rgba(255,255,255,0.2);
  width: 370px;
  height: 370px;
  border-radius: 50%;
  box-shadow: inset 5px 10px 20px rgba(255,255,255,0.4);
}
.holder {
  position: absolute;
  z-index:8;
  width:255px;
  height:20px;
  background-color: #625f56;
  top:335px;
  left:63px;
}

.holder:before {
  content:"";
  position: absolute;
  width: 255px;
  height:0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 60px solid #7d7360;
  top:20px;
  left:-10px;
}

.holder:after {
  content:"";
  position: absolute;
  width:285px;
  height: 5px;
  border-radius:20px;
  background-color: #625f56;
  top:75px;
  left:-15px;
}

.shadow {
  position: absolute;
  width: 370px;
  height: 10px;
  border-radius:20px;
  background-color: rgba(0,0,0,0.2);
  top:410px;
  left:4px;
  transition: .3s;
}

Create the Snowfall:

.snowfall {
  position: absolute;
  z-index:6;
}

.snowflake, .snowflake1, .snowflake2 {
  position: absolute;
  border-radius:50%;
  background-color: white;
  width: 7px;
  height: 7px;
  filter: blur(1px);
  left: 50px;
  box-shadow: 40px 40px white, -40px -40px white, 80px 60px white, 100px -70px white, 110px -20px white,20px -20px white,120px 40px white, 150px 10px white, 180px 20px white, 50px -60px white, 100px 20px white, 150px -80px white, 170px -50px white, 185px -70px white, 190px 40px white, 220px -10px white, 230px -60px white, 240px -30px white, 250px 20px white, 260px -80px white, -20px 20px white, 10px 10px white, 280px -40px white, 300px -10px white, 320px -100px white, 290px -110px white, 100px -100px white, 80px -120px white;
  animation: fall 2.5s linear infinite;
}

.snowflake {
  left:0;
}

.snowflake1 {
  top:-80px;
  left: 60px;
  animation-delay: .5s;
}

.snowflake2 {
  top: -70px;
  left: 100px;
  animation-delay: 1s;
}

@keyframes fall {
  0 {transform: translateY(-50px);opacity:0.9;}
  100% {transform: translateY(380px);opacity:0.2;}
}

Add effects on hover:

.snow-ball:hover .snow-globe {
  animation: shake .3s ease;
  animation-iteration-count: 2;
}

@keyframes shake {
  0% {transform: rotate(0);}
  25% {transform: rotate(-30deg);}
  50% {transform: rotate(0);}
  75% {transform: rotate(30deg);}
  100% {transform: rotate(0);}
}
.snow-ball:hover .shadow {
  opacity:0;
}

.snow-ball:hover .snowfall {
  animation: bounce .5s ease;
  animation-iteration-count: 2;
}

@keyframes bounce {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-20px);}
	20%, 40%, 60%, 80% {transform: translateX(20px);}
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Christmas Tree Snow Globe

CSS Winter window scene

JS Canvas Snow Animation

Tags #SnowAnimation, #Snowball, CSS, CSS animation, winter