Categories
Web development

CSS Printer Animation


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

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="printer-animation" class="printer-animation">
  <div class="printer">
  <input id="button" type="checkbox"> 
    <label class="button" for="button"></label>
    <div class="top"></div>
    <div class="middle"></div>
    <div class="trace"></div>
    <div class="paper">
    </div>
  </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: #ffe5cc;
}

input#button {
  display: none;
}

.printer-animation, .printer {
  position: relative;
  top:-35px;
}

Style the printer:

.top {
  position: absolute;
  background-color: #282c30;
  width: 160px;
  height:70px;
  border-radius: 20px 20px 0 0;
  border:5px solid black;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  box-shadow: inset 20px 0 #1e2124;
  z-index:-1;
}

.middle {
  position: absolute;
  background-color: #4a4f55;
  border: 5px solid black;
  width: 250px;
  height:100px;
  border-radius: 20px;
  top:30px;
  left:-130px;
  box-shadow: inset 20px 0 #373b3d;
  z-index:5;
}

.trace, .trace:before {
  position: absolute;
  background-color: #282c30;
}

.trace {
  border:5px solid black;
  width: 160px;
  height: 80px;
  border-radius: 10px;
  left:-85px;
  top:110px;
  box-shadow: inset 0 35px #1e2124;
  z-index:2;
}

.trace:before {
  content:"";
  width: 60px;
  height: 20px;
  border-radius: 0 0 10px 10px;
  top:80px;
  left:45px;
  border-bottom: 5px solid black;
  border-right: 5px solid black;
  border-left: 5px solid black;
}

.trace:after {
  position: absolute;
  content:"";
  width: 5px;
  height: 50px;
  background-color: black;
  left: 20px;
  top:15px;
  box-shadow: 60px 0 black, 115px 0 black;
}

.paper {
  position: absolute;
  border: 5px solid black;
  background-color: white;
  width:120px;
  height: 140px;
  top:-70px;
  left: -65px;
  z-index:3;
}

.button {
  position: absolute;
  z-index:30;
  border-radius: 50%;
  border: 5px solid black;
  background-color: #fd6e49;
  width:15px;
  height: 15px;
  left: 90px;
  cursor: pointer;
  top:45px;
  animation: pulse 1.5s infinite;
}

.button:active {
  background-color: #52dc97;
}

.button:hover {
  animation: none;
}

.paper:before {
  content:"Don't forget to smile :)";
  position: absolute;
  font-family: arial;
  text-align: center;
  top: 50px;
  transform: scaleY(-1);
  opacity:0;
}

Animate the button and the paper:

input#button:checked ~ .paper {
  animation: print 2.2s linear forwards;
}

input#button:checked ~ .paper:before {
  animation: display 2.2s linear forwards;
}

@keyframes print {
  0% {transform: translateY(0);z-index:3;}
  50% {transform: translateY(200px);z-index:3;}
  79% {transform: translateY(200px);z-index:3;}
  90% {transform: translateY(200px) rotateX(-90deg);z-index:3;}
  95% {transform: translateY(50px) scale(2);z-index:50;}
  100% {transform: translateY(50px) scale(2);z-index:50;}
}

@keyframes display {
  0% {opacity:0; transform: scaleY(-1);}
  28% {opacity:0; transform: scaleY(-1);}
  40% {opacity:1; transform: scaleY(-1);}
  80% {opacity:1; transform: scaleY(-1);}
  95% {opacity:1; transform: scaleY(1);}
  100% {opacity:1; transform: scaleY(1);}
}

@keyframes pulse {
  0% {
    transform:scale(.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(253, 110, 73,.3);
  }
    100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(253, 110, 73,.3);
  }
}

Step3. (optional)

Add jQuery

To repeat the animation on double click add jQuery:

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

$(document).ready(function(){
  $('#printer-animation').mouseleave(function(){
    $(this).removeClass('clicked');
  }).dblclick(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Roll the dice!

JS Simple Signature Pad

HTML & CSS Birthday Card

Categories
Web development

CSS cursor Property


CSS cursor Property

The CSS cursor property defines the mouse cursor that will be displayed when pointing over an element.

Demo:

Syntax:

cursor: value;

alias – the cursor specifies an alias of something is to be created.

<!DOCTYPE html>
<html>
<head>
<style>
.alias {cursor: alias;}
</style>
</head>
<body>

<p class="alias">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

all-scroll – the cursor specifies that something can be scrolled (in any direction).

<!DOCTYPE html>
<html>
<head>
<style>
.all-scroll {cursor: all-scroll;}
</style>
</head>
<body>


<p class="all-scroll">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

auto (default) – the browser settles a cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.auto {cursor: auto;}
</style>
</head>
<body>

<p class="auto">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

cell – the cursor specifies that a cell may be selected.

<!DOCTYPE html>
<html>
<head>
<style>
.cell {cursor: cell;}
</style>
</head>
<body>

<p class="cell">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

context-menu – the cursor specifies that a context-menu is available.

<!DOCTYPE html>
<html>
<head>
<style>
.context-menu {cursor: context-menu;}
</style>
</head>
<body>

<p class="context-menu">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

col-resize – the cursor specifies that the column can be resized horizontally.

<!DOCTYPE html>
<html>
<head>
<style>
.col-resize {cursor: col-resize;}
</style>
</head>
<body>

<p class="col-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

copy – the cursor specifies something is to be copied.

<!DOCTYPE html>
<html>
<head>
<style>
.copy {cursor: copy;}
</style>
</head>
<body>

<p class="copy">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

crosshair – the cursor render as a crosshair.

<!DOCTYPE html>
<html>
<head>
<style>
.crosshair {cursor: crosshair;}
</style>
</head>
<body>

<p class="crosshair">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

e-resize – the cursor specifies that an edge of a box is to be moved right (east).

<!DOCTYPE html>
<html>
<head>
<style>
.e-resize {cursor: e-resize;}
</style>
</head>
<body>

<p class="e-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

ew-resize – specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.ew-resize {cursor: ew-resize;}
</style>
</head>
<body>

<p class="ew-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

grab – the cursor specifies that something can be grabbed.

<!DOCTYPE html>
<html>
<head>
<style>
.grab {cursor: -webkit-grab; cursor: grab;}
</style>
</head>
<body>

<p class="grab">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

grabbing – the cursor specifies that something can be grabbed.

<!DOCTYPE html>
<html>
<head>
<style>
.grab {cursor: -webkit-grabbing;cursor: grabbing;}
</style>
</head>
<body>

<p class="grabbing">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

help – the cursor specifies that help is available.

<!DOCTYPE html>
<html>
<head>
<style>
.help {cursor: help;}
</style>
</head>
<body>

<p class="help">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

move – the cursor specifies something is to be moved.

<!DOCTYPE html>
<html>
<head>
<style>
.move {cursor: move;}
</style>
</head>
<body>

<p class="move">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

n-resize – the cursor specifies that an edge of a box is to be moved up (north).

<!DOCTYPE html>
<html>
<head>
<style>
.n-resize {cursor: n-resize;}
</style>
</head>
<body>

<p class="n-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

ne-resize – the cursor specifies that an edge of a box is to be moved up and right (north/east).

<!DOCTYPE html>
<html>
<head>
<style>
.ne-resize {cursor: ne-resize;}
</style>
</head>
<body>

<p class="ne-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

nesw-resize specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.nesw-resize {cursor: nesw-resize;}
</style>
</head>
<body>

<p class="nesw-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

ns-resize specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.ns-resize {cursor: ns-resize;}
</style>
</head>
<body>

<p class="ns-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

nw-resize – the cursor specifies that an edge of a box is to be moved up and left (north/west).

<!DOCTYPE html>
<html>
<head>
<style>
.nw-resize {cursor: nw-resize;}
</style>
</head>
<body>

<p class="nw-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

nwse-resize – specifies a bidirectional resize cursor.

<!DOCTYPE html>
<html>
<head>
<style>
.nwse-resize {cursor: nwse-resize;}
</style>
</head>
<body>

<p class="nwse-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

no-drop – the cursor specifies that the dragged item cannot be dropped here.

<!DOCTYPE html>
<html>
<head>
<style>
.no-drop {cursor: no-drop;}
</style>
</head>
<body>

<p class="no-drop">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

none – no cursor is rendered for the element.

<!DOCTYPE html>
<html>
<head>
<style>
.none {cursor: none;}
</style>
</head>
<body>

<p class="none">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

not-allowed – the cursor specifies that the requested action will not be executed.

<!DOCTYPE html>
<html>
<head>
<style>
.not-allowed {cursor: not-allowed;}
</style>
</head>
<body>

<p class="not-allowed">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

pointer – the cursor is a pointer and specifies a link.

<!DOCTYPE html>
<html>
<head>
<style>
.pointer {cursor: pointer;}
</style>
</head>
<body>

<p class="pointer">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

progress – the cursor specifies that the program is busy (in progress).

<!DOCTYPE html>
<html>
<head>
<style>
.progress {cursor: progress;}
</style>
</head>
<body>

<p class="progress">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

row-resize – the cursor specifies that the row can be resized vertically.

<!DOCTYPE html>
<html>
<head>
<style>
.row-resize {cursor: row-resize;}
</style>
</head>
<body>

<p class="row-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

s-resize – the cursor specifies that an edge of a box is to be moved down (south).

<!DOCTYPE html>
<html>
<head>
<style>
.s-resize {cursor: s-resize;}
</style>
</head>
<body>

<p class="s-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

se-resize – the cursor specifies that an edge of a box is to be moved down and right (south/east).

<!DOCTYPE html>
<html>
<head>
<style>
.se-resize {cursor: se-resize;}
</style>
</head>
<body>

<p class="se-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

sw-resize – the cursor specifies that an edge of a box is to be moved down and left (south/west).

<!DOCTYPE html>
<html>
<head>
<style>
.sw-resize {cursor: sw-resize;}
</style>
</head>
<body>

<p class="sw-resize">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

text – the cursor specifies the text that may be selected.

<!DOCTYPE html>
<html>
<head>
<style>
.text {cursor: text;}
</style>
</head>
<body>

<p class="text">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

URL – a comma-separated list of URLs to custom cursors – always define a generic cursor at the end of the list, in case none of the URL-defined cursors can be used.

<!DOCTYPE html>
<html>
<head>
<style>
.url {cursor: url(https://lenadesign.org/wp-content/uploads/2022/06/cursor.png),auto;}
</style>
</head>
<body>

<p class="url">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

vertical-text – the cursor specifies vertical-text that may be selected.

<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text {cursor: vertical-text;}
</style>
</head>
<body>

<p class="vertical-text">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

w-resize – the cursor specifies that an edge of a box is to be moved left (west).

<!DOCTYPE html>
<html>
<head>
<style>
.w-resize {cursor: w-resize;}
</style>
</head>
<body>

<p class="w-resize;">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

wait – the cursor specifies that the program is busy.

<!DOCTYPE html>
<html>
<head>
<style>
.wait {cursor: wait;}
</style>
</head>
<body>

<p class="wait">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

zoom-in – the cursor specifies that something can be zoomed in.

<!DOCTYPE html>
<html>
<head>
<style>
.zoom-in {cursor: zoom-in;}
</style>
</head>
<body>

<p class="zoom-in">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

zoom-out – the cursor specifies that something can be zoomed out.

<!DOCTYPE html>
<html>
<head>
<style>
.zoom-out {cursor: zoom-out;}
</style>
</head>
<body>

<p class="zoom-out">Mouse over the text.</p>

</body>
</html>

Output:

Mouse over the text.

Enjoy coding!

CSS caret-color Property

CSS @font-face Rule

CSS height Property

Categories
Web development

3d CSS Birthday Cake and Candles Animation


3d CSS Birthday Cake and Candles Animation

To learn how to create the Birthday Cake and Candles Animation with HTML, CSS and jQuery follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="birthday-cake">
  <div class="cake">
    <div class="middle"></div>
    <div class="chocs"></div>
    <div class="top"></div>
  </div>
  <div class="candles">
    <div class="flame"></div>
    <div class="flame2"></div>
    <div class="flame3"></div>
    <div class="text">Happy Birthday!</div>
    <div class="shadows"></div>
  </div>
  <p class="text2">*click on the flame to blow candles</p>
</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: #f07167;
  overflow: hidden;
}

#birthday-cake {
  position: relative;
  top:50px;
  left:0;
}

Style the cake:

#birthday-cake:before {
  content:"";
  position: absolute;
  background-color: #ede0d4;
  width: 400px;
  height:140px;
  border-radius:50%;
  left:50%;
  top:50%;
  transform: translate(-50%,-10%);
  box-shadow: inset -2px -5px #e6ccb2;
}

.cake {
  position: absolute;
  background-color: #ddb892;
  width: 350px;
  height:130px;
  transform: translate(-50%,-60%);
}

.cake:before, .cake:after {
  content:"";
  position: absolute;
}

.cake:before, .middle, .middle:before {
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  width:350px;
  height:50px;
}

.cake:before {
  background-color: #ddb892;
  top:130px;
}

.cake:after {
  background-color: #b08968;
  width:350px;
  height:30px;
  top:50px;
}

.middle {
  position: absolute;
  background-color: #b08968;
  top:80px;
  z-index:1;
}

.middle:before {
  content:"";
  position: absolute;
  background-color: #ddb892;
  top:-35px;
}

.top {
  position: absolute;
  background-color: #7f5539;
  width:350px;
  height: 90px;
  border-radius:50%;
  z-index:2;
  top:-45px;
  box-shadow: inset -5px -1px #fff, inset -70px 2px rgba(255,255,255,.1);
}

.chocs {
  position: absolute;
  width: 55px;
  height:50px;
  background-color: #7f5539;
  top:0;
  z-index:1;
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  box-shadow: 49px 20px #7f5539, 98px 25px #7f5539, 147px 30px #7f5539, 196px 25px #7f5539, 245px 20px #7f5539, 295px 0 #7f5539, 0px 4px #fff, 49px 24px #fff, 98px 29px #fff, 147px 34px #fff, 196px 29px #fff, 245px 24px #fff, 295px 4px #fff;
}

.chocs:before {
  content:"";
  position: absolute;
  width:175px;
  height:180px;
  background-color: rgba(255,255,255,.1);
  border-radius: 100% 0% 100% 0% / 0% 72% 28% 100%;
  left:175px;
  top:0;
}
CSS birthday cake

Style and animate candles:

.candles {
  position: absolute;
  width:30px;
  height: 80px;
  background-color: #0081a7;
  top:-160px;
  left:-20px;
  box-shadow: 50px 20px #0081a7, -50px 20px #0081a7;
}

.candles:before {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  background-color: #0081a7;
  border-radius:50%;
  top:-5px;
  box-shadow: 0 80px #0081a7, -50px 20px #0081a7, -50px 100px #0081a7, 50px 20px #0081a7, 50px 100px #0081a7, inset 2px -1px #fff;
}

.candles:after {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  top:15px;
  left:50px;
  box-shadow: inset 2px -1px #fff;
}

.shadows {
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  box-shadow: inset 2px -1px #fff;
  left:-50px;
  top:15px;
}

.shadows:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:1.5px;
  height:15px;
  left:14.5px;
  top:-10px;
  box-shadow:50px -20px #333, 100px 0 #333;
}

.shadows:after {
  content:"";
  position: absolute;
  width:15px;
  height:90px;
  left:15px;
  background-color: rgba(255,255,255,.1);
  box-shadow: 50px -20px rgba(255,255,255,.1), 100px 0 rgba(255,255,255,.1);
  border-radius: 0% 100% 50% 50% / 100% 6% 10% 0%;
}


.flame, .flame:before, .flame2, .flame2:before, .flame3, .flame3:before {
  position: absolute;
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
}

.flame,.flame3, .flame2 {
  cursor: pointer;
  width:30px;
  height: 30px;
  transform: rotate(-45deg);
  z-index:4;
  background-color: rgba(252,191,73,.8);
  transition: .5s;
  animation: flame .5s infinite;
}

.flame {
  top:-40px;
}

.flame2, .flame3 {
  top: -20px;
}

.flame2 {
  left:-50px;
}

.flame3 {
  left: 50px;
}

.flame:before, .flame2:before, .flame3:before {
  content:"";
  background-color: rgba(247,127,0,.4);
  width:20px;
  height:20px;
  top:5px;
  left:5px;
}

@keyframes flame {
  0%, 25%, 100% {transform: scaleY(1) rotate(-45deg);}
  50%, 75% {transform: scaleY(1.1) rotate(-45deg);}
}

Style text:

.text, .text2 {
  position: absolute;
  color: white;
  font-family: 'Brush Script MT', cursive;
  text-align: center;
}
.text {
  width:350px;
  font-size: 50px;
  left:-140px;
  top:100px;
  z-index:-1;
  transition: .3s;
  opacity:0;
}

.text2 {
  font-size: 25px;
  width: 300px;
  top:105px;
  left:-140px;
}

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>

and then the following code:

<script>
$(document).ready(function() {
    $(".candles").click(function() {
        
      $(".flame").animate({"opacity": 0}, "fast");
      $(".flame2").animate({"opacity": 0}, "fast");
      $(".flame3").animate({"opacity": 0}, "fast");
      $(".text").animate({"top": -90, "opacity": 1}, "fast");
    });
});
</script>

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Coffee Express Animation

Birthday Cake – CSS Animation

CSS Door Animation (Open/Close on Hover)

Categories
Web development

CSS Rainbow border/ button Animation


CSS Rainbow border/ button Animation

To create the CSS Rainbow border/ button 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="button"></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: black;
}

Create the border and style the text:

.button {
  position: relative;
  width: 250px;
  height:100px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  cursor: pointer;
}

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

.button:after {
  content:"Hover Me";
  position: absolute;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
  font-family: arial;
  font-weight: 900;
  font-size: 25px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

Animate the text and the border on hover:

@keyframes move {
	to {
		background-position: 2500vh;
	}
}

.button:hover {
  animation: move 30s linear infinite;
}

.button:hover:after {
  animation: move 29s linear infinite;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Sliding Text Effect

CSS Typing Effect

CSS flip text effect / animation

Categories
Web development

CSS flip text effect / animation


CSS flip text effect / animation

To learn how to create the CSS flip text effect/animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

Create the text container and add characters:

<div class="flip-text">
  <div class="h">H</div>
  <div class="e">e</div>
  <div class="l">l</div>
  <div class="l-two">l</div>
  <div class="o">o</div>
  <div class="mark">,</div>
  <div class="w">W</div>
  <div class="o-two">o</div>
  <div class="r">r</div>
  <div class="l-three">l</div>
  <div class="d">d</div>
  <div class="mark-two">!</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: #0fa3b1;
}

Style the characters:

.flip-text {
  position: relative;
  display: flex;
  font-size: 80px;
  color: #d9e5d6;
  font-family: arial;
  font-weight: 900;
  letter-spacing: -5px;
  text-shadow: 2px 2px 2px rgba(0,0,0,.3);
}

Animate characters:

@keyframes flip {
  0% {transform: rotateY(0) translateY(0)) scale(1,1);}
  10% {transform: rotateY(0) translateY(-30px) scale(.95,1.1);} 
  25% {transform: rotateY(90deg) translateY(0) scale(1.05,.95);}
  40% {transform: rotateY(0) translateY(0) scale(1,1);}
  100% {transform: rotateY(0) translateY(0) scale(1,1);}
}


.h, .e, .l, .l-two, .o, .mark, .w, .o-two, .r, .l-three, .d, .mark-two {
 animation: flip 1.7s ease-in-out infinite;
}

.e {
  animation-delay: .05s;
}

.l {
  animation-delay: .1s;
}

.l-two {
  animation-delay: .15s;
}

.o {
  animation-delay: .2s;
}

.mark {
  animation-delay: .25s;
}

.w {
  animation-delay: .3s;
}

.o-two {
  animation-delay: .35s;
}

.r {
  animation-delay: .4s;
}

.l-three {
  animation-delay: .45s;
}

.d {
  animation-delay: .5s;
}

.mark-two {
  animation-delay: .55s;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Sliding Text Effect

CSS Bouncing Text Animation

CSS Gradient Stroke Effect

Categories
Web development

CSS min-height Property



CSS min-height Property

The CSS min-height property specifies the minimum height of an element.

The CSS min-height property prevents the value of the height property from becoming smaller than the min-height.

Syntax:

min-width: length;

length – specifies the height in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example-1, .example-2 {
  background-color: #e9c46a;  
}

.example-2 {
  min-height: 150px;
}
</style>
</head>
<body>

<h4>*no min-height specified</h4>
<p class="example-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

<h4>min-height: 150px:</h4>
<p class="example-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

</body>
</html>

Output:

*no min-height specified

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…

min-height: 150px:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…


Enjoy coding!

Read also:

CSS min-width Property

CSS clear Property

CSS margin Property

Categories
CSS Web development

CSS max-height Property



CSS max-height Property

The CSS max-height property specifies the maximum height of an element.

If your content is larger than the maximum height, it will overflow. How the container will handle the overflowing content you can specify by the overflow property.

The CSS max-height property prevents the value of the height property from becoming larger than the max-height.

Syntax:

max-height: none|value;

none (default) – no maximum height specified.

value – specifies the height in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example-1 {
  max-height: 70px;
  overflow: auto;
}
</style>
</head>
<body>

<h4>max-height: none;</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>

<h4>max-height: 70px;</h4>
<p class="example-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>

</body>
</html>

Output:

max-height: none;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

max-height: 70px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.


Enjoy coding!

Read also:

CSS max-width Property

CSS direction Property

CSS @import Rule

Categories
CSS Web development

CSS height Property



CSS height Property

The CSS height property settles the height of an element.

The CSS min-height and max-height properties override the width property.

Demo:

Click the “Try it” button to change the height of the DIV element:


Example

Note: the height of an element does not include margins, padding and borders.

Syntax:

height: auto|value;

auto (default) – the height is calculated by the browser.

value – specifies the width in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  height: 150px;
  width: 200px;
  border: 1px solid #333;  
}

.child {
  height: 50%;
  width: 50%;
  border: 1px solid red;  
}
</style>
</head>
<body>

<div class="parent">
  <div class="child">I'm the 50% height of my parent.</div>
</div>

</body>
</html>

Output:

I’m the 50% height of my parent.

Enjoy coding!

Read also:

CSS background Property

CSS caret-color Property

CSS filter Property

Categories
Web development

CSS max-width Property


CSS max-width Property

The CSS max-width property specifies the maximum width of an element.

The CSS max-width property prevents the value of the width property from becoming larger than the max-width.

Syntax:

max-width: none|length;

none (default) – no maximum width specified.

length – specifies the width in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example1, .example2 {
  background-color: #fed9b7; 
  display: inline-block; 
}

.example2 {
  max-width: 50%;
}
</style>
</head>
<body>

<h4>max-width: none;</h4>
<span class="example1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</span>

<h4>max-width: 50%;</h4>
<span class="example2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</span>

</body>
</html>

Output:

max-width: none;

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

max-width: 50%;

This is a paragraph.This is a paragraph. This is a paragraph. This is a paragraph.

Enjoy coding!

Read also:

CSS animation Property

CSS box-sizing Property

CSS clip-path Property

Categories
Web development

CSS min-width Property


CSS min-width Property

The CSS min-width property specifies the minimum width of an element.

The CSS min-width property prevents the value of the width property from becoming smaller than the min-width.

Syntax:

min-width: length;

length – specifies the width in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example1, .example2 {
  background-color: #fed9b7; 
  display: inline-block; 
}

.example2 {
  min-width: 400px;
}
</style>
</head>
<body>

<h4>*no min-width specified</h4>
<span class="example1">This is a paragraph.</span>

<h4>min-width: 400px;</h4>
<span class="example2">This is a paragraph.</span>

</body>
</html>

Output:

*no min-width specified

This is a paragraph.

min-width: 400px;

This is a paragraph.

Enjoy coding!

Read also:

CSS align-self Property

CSS clear Property

CSS flex Property