Categories
CSS HTML Web development

CSS Christmas Card (Open/ Close on Click)

CSS Christmas Card (Open/ Close on Click)

To learn how to create the CSS Christmas Card (Open/ Close on Click) follow the steps below and watch the video tutorial.

Demo:

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

Step1.

Add HTML

<div class="christmas-card">
  <input id="open" type="checkbox">
  <label class="open" for="open"></label>
<div class="card-front">
  <div class="christmas-tree"></div>
  <div class="ribbon"></div>
  <div class="text">- Click to Open -</div>
  <div class="star"></div>
  <div class="balls"></div>
</div>
  
  <div class="card-inside">
    <div class="title">Merry</br>Christmas!</div>
  <div class="wishes">I hope the magic of Christmas fills every corner of your heart and home with joy — now and always.</div>
  <div class="gift">
    <div class="bow"></div>
  </div>
</div>

Step2.

Add CSS

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

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

Style the card (make the card open/ close):

.christmas-card {
  position: relative;
  width: 200px;
  height:300px;
  transform-style: preserve-3d;
  transform: perspective(2500px);
  transition: 3s;
}
input#open {
  display: none;
}

.card-front {
  position: relative;
  background-color: #fff;
  width: 200px;
  height:300px;
  overflow: hidden;
  transform-origin: left;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  transition: .3s;
}

.card-inside {
  position: absolute;
  background-color: #fff;
  width: 200px;
  height:300px;
  z-index:-1;
  left:0;
  top:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
}

.open {
  position: absolute;
  width: 200px;
  height:300px;
  left:0;
  top:0;
  background-color: transparent;
  z-index:6;
  cursor: pointer;
}

#open:checked ~ .card-front {
  transform: rotateY(-155deg);
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
}

#open:checked ~ .card-front:before {
  z-index:5;
}
CSS Christmas Card (Open/ Close on Click)

Style the front side of the card:

.card-front:before {
  content:"";
  position: absolute;
  width: 180px;
  height: 280px;
  background-color: #c94038;
  top: 10px;
  left: 10px;
}

.christmas-tree {
  position: absolute;
  width:0;
  height:0;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 160px solid #034247;
  top: 75px;
  left:50px;
}

.christmas-tree:after {
  content:"";
  position: absolute;
  width: 100px;
  height: 25px;
  background-color: #c47f1a;
  left:-50px;
  top:140px;
}

.christmas-tree:before {
  content:"";
  position: absolute;
  background-color: #a86d16;
  width:50px;
  height: 25px;
  top:130px;
  left:20px;
  box-shadow: -90px 0 #a86d16;
}
.text {
  position: absolute;
  color: white;
  font-family: brush script mt;
  top:260px;
  width:200px;
  text-align: center;
  font-size:15px;
}

.text:before {
  content:"Merry Christmas!";
  position: absolute;
  width:80px;
  color: #333;
  text-align: center;
  line-height: 10px;
  top:-42.5px;
  left:61px;
}

.text:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 20px solid #faa307;
  top:-185px;
  left:93px;
}

.ribbon, .ribbon:before {
  position: absolute;
  width:0;
  height:0;
  border-bottom: 12.5px solid transparent;
  border-top: 12.5px solid transparent;
}

.ribbon {
  border-left: 10px solid #c94038;
  top:205px;
  left:30px;
}

.ribbon:before {
  content:"";
  border-right: 10px solid #c94038;
  left: 120px;
  top:-12.5px;
}

.ribbon:after {
  content:"";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius:50%;
  background-color: white;
  top:-25px;
  left:21.5px;
  box-shadow: 5px -3px white, 10px -6px white, 15px -9px white, 20px -12px white, 25px -15px white, 30px -18px white, 35px -21px white, 40px -24px white, 45px -27px white, 50px -30px white, 55px -33px white, 60px -36px white, 60px -36px white, 15px -50px white, 20px -53px white, 25px -56px white, 30px -59px white, 35px -62px white, 40px -65px white, 45px -68px white, 50px -71px white;
}

.star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 13px solid #ffba08;
  border-left: 20px solid transparent;
  transform: rotate(-35deg);
  top:68px;
  left:80px;
    }

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

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

.balls {
  position: absolute;
  width:12px;
  height: 12px;
  border-radius: 50%;
  background-color: #c94038;
  top:185px;
  left:110px;
  box-shadow: -30px -30px #c94038, -18px -74px #c94038;
}

.balls:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  widtH: 10px;
  height: 10px;
  background-color: #f6b4b8;
  left:-20px;
  top:10px;
  box-shadow: 15px -55px #f6b4b8;
}
CSS Card Front

Style the card inside:

.card-inside:before {
  content:"";
  position: absolute;
  width: 180px;
  height: 280px;
  background-color: #c94038;
  top: 10px;
  left: 10px;
}

.title {
  position: absolute;
  color: #333;
  font-size:30px;
  font-family: brush script mt;
  line-height: 25px;
  text-align: center;
  top:45px;
  width:200px;
}

.wishes {
  position: absolute;
  width: 150px;
  text-align: center;
  font-family: brush script mt;
  line-height:15px;
  font-size: 20px;
  color: #333;
  height: 300px;
  top: 45%;
  left:25px;
}

.gift {
  position: absolute;
  border: 3px solid #333;
  width:30px;
  height: 30px;
  top: 235px;
  left:83px;
}

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

.gift:before {
  width:30px;
  height:3px;
  top:14px;
}

.gift:after {
  height:30px;
  width:3px;
  left: 14px;
}

.bow {
  position: absolute;
}

.bow:before, .bow:after {
  content:"";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 3px solid #333;
  border-radius:50%;
  top:-14px;
}

.bow:before {
  transform: skew(20deg, 10deg);
  left:2px;
}

.bow:after {
  transform: skew(-20deg,-10deg);
  left:15px;
}
CSS Card Open on Click

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card

CSS Christmas Tree Snow Globe

CSS Folded Birthday Card

Categories
CSS HTML Web development

CSS Bouncing Envelope / Contact Animation

CSS Bouncing Envelope / Contact Animation

To learn how to create the CSS Bouncing 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="contact-envelope">
  <div class="envelope">
    <div class="envelope-back"></div>
    <div class="message"></div>
    <div class="envelope-front"></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;
  overflow: hidden;
}

.contact-envelope {
  position: relative;
  border-radius: 50%;
  background-color: #4987f4;
  width:200px;
  height: 200px;
  z-index:-1;
}

Style the envelope:

.envelope {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width:200px;
  height: 200px;
  animation: bounce 1s ease infinite;
}

.envelope-back {
  position: absolute;
  background-color: #e19605;
  width:110px;
  height: 70px;
  top:80px;
  z-index:1;
}

.envelope-back:before {
  content:"";
  position: absolute;
  background-color: #e19605;
  border-radius:10px;
  width: 84px;
  height: 84px;
  top:-39px;
  left:13px;
  transform: rotate(-45deg);
}

.message {
  position: absolute;
  z-index:2;
  background-color: #eae2b7;
  width:90px;
  height: 95px;
}

.message:before {
  content:"";
  position: absolute;
  background-color: #ced4da;
  width: 75px;
  height: 3px;
  left:7.5px;
  top:12px;
  box-shadow: 0 10px #ced4da, 0 20px #ced4da, 0 30px #ced4da, 0 40px #ced4da, 0 50px #ced4da, 0 60px #ced4da, 0 70px #ced4da;
}

.envelope-front:before, .envelope-front {
  position: absolute;
  width:0;
  height:0;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
}

.envelope-front {
  border-right: 60px solid #f9c748;
  z-index:3;
  left:95px;
  top:80px;
}

.envelope-front:before {
  content:"";
  border-left: 60px solid #f9c748;
  left:-50px;
  top:-35px;
}

.envelope-front:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-bottom: 45px solid #fcb933;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
  left:-50px;
  top:-10px;
}

Add the shadow:

.shadow {
  position: absolute;
  width: 110px;
  height: 10px;
  background-color: rgba(0,0,0,0.4);
  border-radius:50%;
  top:145px;
  left:45px;
  z-index:-2;
  animation: scale 1s linear infinite;
}

Step3.

Add CSS Animation

 @keyframes bounce {
        0%   { transform: scale(1,1) translateY(0); }
        10%  { transform: scale(1.1,.9) translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-55px);}
        50%  { transform: scale(1.05,.95) translateY(0); }
        58%  { transform: scale(1,1) translateY(-7px); }
        65%  { transform: scale(1,1) translateY(0);}
        100% { transform: scale(1,1) translateY(0);}
    }

@keyframes scale {
  0% {transform: scaleX(1);}
  10% {transform: scaleX(1);}
  30% {transform: scaleX(0.5);}
  50% {transform: scaleX(1.1);}
  58% {transform: scaleX(1);}
  75% {transform: scaleX(0.98);}
  100% {transform: scaleX(1);}
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Bouncing Text Animation

CSS Bouncing Basketball

Pure CSS Envelope (Open/Close on click)

Categories
CSS JQuery Web development

Decorate the Christmas tree! (CSS & jQuery/ UI drag and drop)

Decorate the Christmas tree! (CSS & jQuery/ UI drag and drop)

To learn how to create the CSS & jQuery (drag and drop) Christmas tree follow the steps below and watch the video tutorial.

Demo:

*to see CSS & jQuery (drag and drop) Christmas tree on the website click here.

Step1.

Add HTML

Create the christmas-decorations container, dropzone and draggable elements (decorations):

<div id="christmas-decorations" class="christmas-decorations">
  <div class="tree">
    <div id="dropzone" class="tree-bottom"></div>
    <div id="dropzone-1"class="tree-middle"></div>
    <div id="dropzone-2" class="tree-top"></div>
  </div>
  <div id="decorations" class="decorations">
    <p class="text">Decorate the Christmas Tree:<p>
    <div id="ball1"></div>
    <div id="tree-star"></div>
    <div id="ball2"></div>
    <div id="ball3"></div>
    <div id="ball4"></div>
    <div id="ball5"></div>
    <div id="ball6"></div>
    <div id="bow"></div>
    <div id="bow2"></div>
    <div id="bow3"></div>
  </div>
  <div id="game-complete"><br/>Merry Christmas!!!</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: #5e6d5a;
}

.christmas-decorations {
  position: relative;
}

Style the Christmas tree (dropzone):

.christmas-decorations:before {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: rgba(0,0,0,0.5);
  width:200px;
  height:20px;
  top:180px;
  left:-80px;
}

.tree {
  position: relative;
  background-color: #57462a;
  width: 35px;
  height: 70px;
  top:120px;
}

.tree-bottom, .tree-middle {
  position: absolute;
  height:0;
  width:100px;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 100px solid #64a85b;
}

.tree-bottom {
  top:-70px;
  left:-83px;
}

.tree-middle {
  top:-130px;
  left:-83px;
}

.tree-top {
  position: absolute;
  height:0;
  width:0;
  border-right: 70px solid transparent;
  border-left: 70px solid transparent;
  border-bottom: 120px solid #64a85b;
  top:-240px;
  left:-53px;
  z-index:1;
}

.tree-top:before {
  content:"";
  position: absolute;
  border-top: 10px solid rgba(0,0,0,0.5);
  border-right: 5px solid transparent;
  border-left: 105px solid transparent;
  top:120px;
  left:-50px;
  transform: skew(45deg);
}

.tree-top:after {
  content:"";
  position: absolute;
  border-top: 10px solid rgba(0,0,0,0.5);
  border-right: 5px solid transparent;
  border-left: 135px solid transparent;
  top:210px;
  left:-65px;
  transform: skew(45deg);
}
CSS Christmas Tree

Add Christmas decorations (draggable):

.decorations {
  position: absolute;
  width: 250px;
  height: 200px;
  background-color: white;
  left:-500px;
  top:-100px;
  box-shadow: 7px 7px rgba(0,0,0,0.5);
  z-index:3;
}

.text {
  text-align: center;
  font-weight: bold;
  font-family: tahoma;
  text-decoration: underline;
}

#ball1 {
  position: absolute;
  border-radius:50%;
  width:20px;
  height: 20px;
  background-color: #b65964;
  left:20px;
  cursor: pointer;
}

.tree-active {
  filter: brightness(110%);
}

#tree-star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 27px solid transparent;
  border-bottom: 20px solid #cec42f;
  border-left: 27px solid transparent;
  transform: rotate(-35deg);
  top:60px;
  left:50px;
  cursor: pointer;
    }

#tree-star:before {
      border-bottom: 20px solid #cec42f;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -12.5px;
      left: -17.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

#tree-star:after {
      position: absolute;
      display: block;
      top: 0.75px;
      left: -26.25px;
      width: 0px;
      height: 0px;
      border-right: 27px solid transparent;
      border-bottom: 20px solid #cec42f;
      border-left: 27px solid transparent;
      transform: rotate(-70deg);
      content:'';
}

#ball2 {
  position: absolute;
  border-radius:50%;
  width:22px;
  height: 22px;
  background-color: #7d45e6;
  left:120px;
  top:90px;
  cursor: pointer;
}

#ball3 {
  position: absolute;
  border-radius:50%;
  width:25px;
  height: 25px;
  background-color: #39bfd8;
  left:40px;
  top:120px;
  cursor: pointer;
}

#ball4 {
  position: absolute;
  border-radius:50%;
  width:23px;
  height: 23px;
  background-color: #cec431;
  left:80px;
  top:150px;
  cursor: pointer;
}

#ball5 {
  position: absolute;
  border-radius:50%;
  width:18px;
  height: 18px;
  background-color: #cec431;
  left:180px;
  top:150px;
  cursor: pointer;
}

#ball6 {
  position: absolute;
  border-radius:50%;
  width:25px;
  height: 25px;
  background-color: #b85863;
  left:180px;
  top:100px;
  cursor: pointer;
}

#bow {
  position: absolute;
  width: 1px;
  height: 0;
  border-bottom: 8px solid #7d45e6;
  border-top: 8px solid #7d45e6;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  transform: rotate(-90deg);
  left:170px;
  cursor: pointer;
}

#bow2 {
  position: absolute;
  width: 1px;
  height: 0;
  border-bottom: 7px solid #39bfd8;
  border-top: 7px solid #39bfd8;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  transform: rotate(-90deg);
  left:140px;
  top:160px;
  cursor: pointer;
}

#bow3 {
  position: absolute;
  width: 1px;
  height: 0;
  border-bottom: 7px solid #b85863;
  border-top: 7px solid #b85863;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  transform: rotate(-90deg);
  left:100px;
  top:130px;
  cursor: pointer;
}

Style the text:

#game-complete {
  display: none;
  position: absolute;
  font-size:60px;
  font-weight: bold;
  font-family: tahoma;
  color: #ae2012;
  text-shadow: 2px 2px #001219;
  top:-110px;
  left:-165px;
  z-index:4;
  text-align: center;
}

Step3.

Add jQuery

To read how to add the jQuery code to HTML click here. Add libraries below in to the <head> section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

and then the following code:

<script>
  var score = 0;

$( function() {
	$("#ball1, #tree-star, #ball2, #ball3, #ball4, #ball5, #ball6, #bow, #bow2, #bow3 ").draggable({ revert: "invalid" });
  $("#dropzone, #dropzone-1, #dropzone-2").droppable({
			accept: "#ball1, #tree-star, #ball2, #ball3, #ball4, #ball5, #ball6, #bow, #bow2, #bow3 ",
      classes: {
        "ui-droppable-active": "tree-active",},
      drop: function() {
	  score++  
	finish();
  },
    });

function finish() {
	if(score === 12)
	{
		$('#game-complete').delay(300).fadeIn("fast");
       }
     }
   }); 
</script>

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Tree Animation

CSS Christmas Tree Snow Globe

Roll the dice!

Categories
CSS Web development

CSS Fallback Fonts

CSS Fallback Fonts

Nowadays, most websites, these days, use custom web fonts. Unfortunately, not all browsers support custom fonts (different browsers support different font formats). Therefore, it is very important to always use fallback fonts.

To create the fallback fonts start with the font you want, and end with the generic family, to let the browser a pick similar font in the generic family if no other fonts are available.

Example:

The browser will try to use the font you defined first (Pacifico, in the example below), but if it doesn’t have that font available, it will keep going down that list (second Helvetica, or third choice Tahoma).

<!DOCTYPE html>
<html>
<head>
<style>
  
.fallback {
  font-family: Pacifico, Helvetica, Tahoma, Sans-Serif;
}

</style>
</head>
<body>

<p class="fallback">This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.


Read also:

CSS @font-face Rule

CSS Fonts

Web Safe Fonts

Categories
CSS Web development

Web Safe Fonts

Web Safe Fonts

Web-safe fonts are a standard in web design. By choosing a web-safe font, you can be sure that your text will always appear as intended.

Before you will make your website live, always check how your fonts appear on different browsers and devices (and always use fallback fonts).

The list of web-safe fonts for HTML and CSS:

  1. Arial (sans-serif)
  2. Verdana (sans-serif)
  3. Helvetica (sans-serif)
  4. Tahoma (sans-serif)
  5. Trebuchet MS (sans-serif)
  6. Times New Roman (serif)
  7. Georgia (serif)
  8. Garamond (serif)
  9. Courier New (monospace)
  10. Brush Script MT (cursive)

Demo:

Arial (sans-serif)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-family: Arial, sans-serif;
}
</style>
</head>
<body>

<p>This is a paragraph, shown in the Arial font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

Output:

This is a paragraph, shown in the Arial font.

0 1 2 3 4 5 6 7 8 9

Verdana (sans-serif)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-family: Verdana, sans-serif;
}
</style>
</head>
<body>

<p>This is a paragraph, shown in the Verdana font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

Output:

This is a paragraph, shown in the Verdana font.

0 1 2 3 4 5 6 7 8 9

Helvetica (sans-serif)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-family: Helvetica, sans-serif;
}
</style>
</head>
<body>

<p>This is a paragraph, shown in the Helvetica font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

Output:

This is a paragraph, shown in the Helvetica font.

0 1 2 3 4 5 6 7 8 9

Tahoma (sans-serif)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>

<p>This is a paragraph, shown in the Tahoma font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

Output:

This is a paragraph, shown in the Tahoma font.

0 1 2 3 4 5 6 7 8 9

Trebuchet MS (sans-serif)

Note: Not supported by all mobile operating systems.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>

<p>This is a paragraph, shown in the 'Trebuchet MS' font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

Output:

This is a paragraph, shown in the ‘Trebuchet MS’ font.

0 1 2 3 4 5 6 7 8 9

Times New Roman (serif)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-family: 'Times New Roman', serif;
}
</style>
</head>
<body>

<p>This is a paragraph, shown in the 'Times New Roman' font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

Output:

This is a paragraph, shown in the ‘Times New Roman’ font.

0 1 2 3 4 5 6 7 8 9

Georgia (serif)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-family: Georgia, serif;
}
</style>
</head>
<body>

<p>This is a paragraph, shown in the Georgia font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

Output:

This is a paragraph, shown in the Georgia font.

0 1 2 3 4 5 6 7 8 9

Garamond (serif)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-family: Garamond, serif;
}
</style>
</head>
<body>

<p>This is a paragraph, shown in the Garamond font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

Output:

This is a paragraph, shown in the Garamond font.

0 1 2 3 4 5 6 7 8 9

Courier New (monospace)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-family: 'Courier New', monospace;
}
</style>
</head>
<body>

<p>This is a paragraph, shown in the 'Courier New' font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

Output:

This is a paragraph, shown in the ‘Courier New’ font.

0 1 2 3 4 5 6 7 8 9

Brush Script MT (cursive)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-family: 'Brush Script MT', cursive;
}
</style>
</head>
<body>

<p>This is a paragraph, shown in the 'Brush Script MT' font.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

Output:

This is a paragraph, shown in the ‘Brush Script MT’ font.

0 1 2 3 4 5 6 7 8 9

Enjoy coding!

Read also:

CSS Fonts

CSS @font-face Rule

CSS @import Rule

Categories
CSS HTML Web development

CSS font-family Property

CSS font-family Property

The CSS font-family property defines the font for an element.

The CSS font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries to fit the next font.

Note: Each value should be separated by a comma.

Syntax:

font-family: family-name|generic-family;

family-name – font family names (like “times”, “courier”, “arial”, etc.).
generic-family
– generic family names (like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.one {
  font-family: "Courier New", Courier, monospace;
}

.two {
  font-family: Arial, Tahoma, sans-serif;
}
</style>
</head>
<body>

<p class="one">This is a paragraph, shown in the Courier font.</p>

<p class="two">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

Output:

This is a paragraph, shown in the Courier font.

This is a paragraph, shown in the Arial font.


Enjoy coding!

Read also:

CSS @font-face Rule

CSS @import Rule

HTML Text Formatting And Styles

Categories
CSS Web development

CSS @font-face Rule

CSS @font-face Rule

The CSS @font-face rule allows web designers to use custom fonts.

The custom font can be loaded from a locally-installed font on the user’s computer or a remote server.

Syntax:

@font-face {
  font-properties
}

font-family – (required) specifies the name of the font.

src – (required) specifies the URL(s) where the font is downloaded from.

font-stretch (normal/ condensed/ ultra-condensed/ extra-condensed/ semi-condensed/ expanded/ semi-expanded/extra-expanded/ ultra-expanded) – (optional) specifies how the font should be stretched (the default value is “normal”).

font-style (normal/ italic/ oblique) – (optional) specifies how the font should be styled (the default value is “normal”).

font-weight (normal/ bold/ 100/ 200/ 300/ 400/ 500/ 600/ 700/ 800/ 900)- (optional) specifies the boldness of the font. (the default value is “normal”).

unicode-range – (optional) specifies the range of unicode characters the font supports (the default value is “U+0-10FFFF”).

Example1:

Using the CSS @font-face rule you need first specify a name for the font (e.g. Pacifico), and then point to the font file (src):

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: Pacifico;
  src: url(https://lenadesign.org/wp-content/uploads/2021/11/Pacifico-Regular.ttf);
}

p {
  font-family: Pacifico;
}
</style>
</head>
<body>

<p>With the CSS @face-font rule, you can use custom fonts on the website.</p>

</body>
</html>

Output:

With the CSS @face-font rule, you can use custom fonts on the website.


Example2:

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: amatic;
  src: url(https://lenadesign.org/wp-content/uploads/2021/11/AmaticSC-Regular.ttf);
}

p {
  font-family: amatic;
  font-size:30px;
}
</style>
</head>
<body>

<p>With the CSS @face-font rule, you can use custom fonts on the website.</p>

</body>
</html>

Output:

With the CSS @face-font rule, you can use custom fonts on the website.


Browser Support for Font Formats:

Font FormatChromeFirefoxEdgeSafariOpera
TTF/OTF4.03.59.0*3.110.0
WOFF5.03.69.05.111.1
WOFF236.039.014.010.026.0
SVGNot supportedNot supportedNot supported3.2Not supported
EOTNot supportedNot supported6.0Not supportedNot supported

Enjoy coding!

Read also:

CSS @import Rule

HTML Text Formatting And Styles

CSS Styling Links

Categories
CSS HTML Web development

CSS Christmas Tree Animation

CSS Christmas Tree Animation

To learn how to create the CSS Christmas Tree Animation follow the steps below and watch the video tutorial.

Demo:

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

Step1.

Add HTML

<div id="christmas-tree" class="christmas-tree">
  <div class="tree">
    <div class="tree-details"></div>
  </div>
  <div class="lights">
    <div class="row-one"></div>
    <div class="row-two"></div>
  </div>
  <div class="balls"></div>
  <div class="star"></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;
  background-color: #16323d;
}

.christmas-tree {
  position: relative;
  top:100px;
  cursor: pointer;
}

Style the Christmas Tree:

.tree {
  position: absolute;
  width: 20px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 55px solid #823723;
  height:0;
  animation: drop 1s linear;
}

.tree:before {
  content:"";
  position: absolute;
  background-color: #823723;
  border-radius: 50%;
  width: 30px;
  height:10px;
  top:50px;
  left:-5px;
}

.tree:after {
  content:"";
  position: absolute;
  border-right: 75px solid transparent;
  border-left: 75px solid transparent;
  border-bottom: 200px solid #107261;
  width:0;
  height:0;
  top:-180px;
  left:-65px;
}

.tree-details {
  position: absolute;
  width: 150px;
  height: 10px;
  background-color: #107261;
  border-radius: 50%;
  top:15px;
  left:-65px;
  z-index:1;
}

.tree-details:before {
  content:"";
  position: absolute;
  background-color: #0a897c;
  border-radius:50%;
  width: 5px;
  height: 5px;
  top:-10px;
  left:20px;
  box-shadow: 50px -50px #0a897c, 30px -70px #0a897c, 40px -130px #0a897c, 70px -5px #0a897c, 85px -75px #0a897c;
}

Style and animate the Christmas Lights:

.lights {
  position: absolute;
  opacity:0;
  animation: light 2s linear infinite, drop 1s linear .5s forwards;
}

@keyframes light {
  0% {filter: drop-shadow(0 0 2px #fefae0) brightness(1);}
  50% {filter: drop-shadow(0 0 5px #fefae0) brightness(1.35);}
  100% {filter: drop-shadow(0 0 2px #fefae0) brightness(1);}
}

.row-one {
  position: absolute;
  background-color: #e9d8a6;
  border-radius:50%;
  width:10px;
  height:10px;
  top: -120px;
  left: -15px;
  box-shadow: 10px 10px #e9d8a6, 25px 15px #e9d8a6, 40px 18px #e9d8a6, 54px 15px #e9d8a6;
}

.row-two {
  position: absolute;
  background-color: #e9d8a6;
  border-radius:50%;
  width:10px;
  height:10px;
  left:-42px;
  top:-45px;
  box-shadow: 10px 10px #e9d8a6, 25px 17px #e9d8a6, 40px 24px #e9d8a6, 55px 28px #e9d8a6, 70px 30px #e9d8a6, 85px 29px #e9d8a6, 100px 25px #e9d8a6, 112px 20px #e9d8a6;
}

Add some Christmas balls:

.balls {
  position: absolute;
  background-color: #f34653;
  width:15px;
  height: 15px;
  border-radius:50%;
  z-index:2;
  opacity:0;
  box-shadow: -20px -55px #f34653, 25px -70px #f34653;
  animation: drop 1s linear 1s forwards;
}

.balls:before {
  content:"";
  position: absolute;
  background-color: #f34653;
  width:13px;
  height: 13px;
  border-radius:50%;
  left:-40px;
  top:-10px;
  box-shadow: 100px 10px #f34653, 25px -80px #f34653, 60px -120px #f34653;
}

.balls:after {
  content:"";
  position: absolute;
  background-color: #94d2bd;
  width:10px;
  height: 10px;
  border-radius:50%;
  top:-40px;
  left:40px;
  box-shadow: -35px -35px #94d2bd, -35px -105px #94d2bd, -60px 45px #94d2bd;
}

Add the star on the top:

.star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-bottom: 17.5px solid #f9c819;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
  top:-190px;
  left:-9px;
  opacity:0;
  animation: dropStar 1s linear 1.5s forwards;
    }

.star:before {
      border-bottom: 20px solid #f9c819;
      border-left: 7.5px solid transparent;
      border-right: 7.5px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -12.5px;
      left: -17.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

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

And the shadow:

.shadow {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.7);
  width: 50px;
  height: 20px;
  z-index:-1;
  top:50px;
  left:-10px;
  animation: scale .5s linear forwards;
}

@keyframes scale {
  0% {transform: scaleX(1);}
  100% {transform: scaleX(3);}
}

Animate the Christmas Tree and decorations:

@keyframes drop {
  0% {transform: translateY(-470px) scaleY(0.9); opacity: 0;}
  5% {opacity: 1;}
  50% {transform: translateY(0px) scaleY(1); opacity: 1;}
  65% {transform: translateY(-15px) scaleY(0.9); opacity: 1;}
  75% {transform: translateY(-18px) scaleY(0.9); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1); opacity: 1;}
}

   @keyframes dropStar {
  0% {transform: translateY(-470px) scaleY(0.9) rotate(-35deg); opacity: 0;}
  5% {opacity: 1;}
  50% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
  65% {transform: translateY(-15px) scaleY(0.9) rotate(-35deg); opacity: 1;}
  75% {transform: translateY(-18px) scaleY(0.9) rotate(-35deg); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
}

Step3.

Add jQuery (optional)

To repeat the animation on click add jQuery:

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

$(document).ready(function(){
  $('#christmas-tree').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Christmas Tree

CSS Christmas Card

CSS Winter window scene

Categories
CSS Web development

CSS @import Rule

CSS @import Rule

The CSS @import rule allows you to import a style sheet into another style sheet.

The CSS @import rule should be placed at the top of the document (after any @charset declaration).

Syntax:

@import url| list-of-mediaqueries;

url – URL that represents the location of the resource to import.

list-of-mediaqueries – comma-separated list of media queries conditioning the application of the CSS rules specified in the linked URL.

Example:

Import custom font to your HTML document (used font source: https://fonts.google.com/):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS @import Rule</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

        p {
  font-family: 'Dancing Script', cursive;
  font-size:100px;
}
    </style>
</head>

<body>
    <p>Some text...</p>
</body>
</html>

Output:

Enjoy coding!

Read also:

CSS Fonts

HTML Text Formatting And Styles

CSS Styling Links

Categories
CSS HTML Web development

How to align the text to the left and text to the right in the same line?

How to align the text to the left and text to the right in the same line?

To align the text that some of it aligns to the left and some of it aligns to the right within the same line check the options below:

Option1.

Align the text in HTML using the CSS text-align property and CSS float property.

Add the text to the code:

<!DOCTYPE html>
<html>
<body>

<p style="text-align:left;">
    This text is on the left side.
<span style="float:right;">This text is on the right side.</span>
    </p>

</body>
</html>

Output:

This text is on the left side. This text is on the right side.

Option2

Align the text using HTML and CSS

<!DOCTYPE html>
<html>
    <head>
        <style>
            .right{
    float:right;
}

.left{
    float:left;
}
        </style>
    </head>
<body>

<span class="right">This text is on the right side.</span><span class="left">This text is on the left side.</span>

</body>
</html>

Output:

This text is on the right side.This text is on the left side.

Option3

Create the single row table and add the right float on the second cell:

<!DOCTYPE html>
<html>
    <head>
        <style>
.alignRight {
    float: right;
}
        </style>
    </head>
<body>

<table style="width: 100%;">
  <tr><td>This text is on the left side.</td>
  <td class="alignRight">This text is on the right side.</td></tr>
</table>

</body>
</html>

Output:

This text is on the left side. This text is on the right side.

Enjoy coding!

Read also:

CSS Float Tutorial

CSS Styling Links

CSS Shadows