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 Gradient Stroke Effect


To create the CSS Text with Gradient Stroke follow the steps below and watch the video tutorial.

CSS Gradient Stroke

Demo:

*to see the text on the website click here.

Step1.

Add HTML

<div class="gradient-stroke">GRADIENT STROKE</div>

Step2.

Add CSS

Import the font:

Font source: Google Fonts

To read how to import the font in CSS click here.

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

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

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

Style the text:

.gradient-stroke {
  font-size:80px;
  font-family: 'Righteous', cursive;
  background-image: linear-gradient( 69.7deg,  rgba(244,37,243,1) 1.4%, rgba(244,87,1,1) 36.2%, rgba(255,204,37,1) 72.2%, rgba(20,196,6,1) 113%);
  -webkit-background-clip: text;
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: 10px;
  padding: 10px;
  letter-spacing:5px;
  filter: brightness(1.3);
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

How to add stroke/ outline to the text in CSS?

How to create a transparent text with stroke in CSS?

SVG Stroke & Fill Animation

Categories
Web development

CSS Text Drop Animation

CSS Text Drop Animation

To learn how to create the CSS Text Drop 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="text-drop">
  <div class="h">H</div>
  <div class="e">e</div>
  <div class="l">l</div>
  <div class="l2">l</div>
  <div class="o">o</div>
  <div class="smile">:)</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: #001219;
}

Style and animate the text:

#text-drop {
  position: relative;
  display: flex;
  font-size:100px;
  font-family: arial;
  font-weight: 900;
}

.h {
  opacity:0;
  animation: drop .4s linear forwards;
  color: #9b5de5;
}

.e {
  opacity:0;
  animation: drop .4s linear forwards .2s;
  color: #f15bb5;
}

.l {
  opacity:0;
  animation: drop .4s linear forwards .4s;
  color: #fee440;
}

.l2 {
  opacity:0;
  animation: drop .4s linear forwards .6s;
  color: #00bbf9;
}

.o {
  opacity:0;
  animation: drop .4s linear forwards .8s;
  color: #00f5d4;
}

@keyframes drop {
  0% {transform: translateY(-200px) scaleY(0.9); opacity: 0;}
  5% {opacity: .7;}
  50% {transform: translateY(0px) scaleY(1); opacity: 1;}
  65% {transform: translateY(-17px) scaleY(.9); opacity: 1;}
  75% {transform: translateY(-22px) scaleY(.9); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1); opacity: 1;}
}

.smile {
  opacity:0;
  animation: drop .4s linear forwards 1.2s;
  color: #9b5de5;
  font-size:90px;
  margin-left:15px;
}

Step3. (optional)

Add jQuery

To repeat the animation on click add jQuery:

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

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

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Slide Effect

CSS Bouncing Text Animation

CSS Mirror/ Reflection Text Effect

Categories
Web development

CSS background-clip text

CSS background-clip text

To learn how to create the CSS background-clip text follow the steps below:

Demo:

*to see the CSS background-clip text on the website click here.

Step1.

Add HTML

Create a div element and add some text:

<div class="seaside">SEASIDE</div>

Step2.

Add CSS

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

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

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

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

Add the background image and style the text:

.seaside {
  position: relative;
  background-image: url('https://lenadesign.org/wp-content/uploads/2021/07/brighton-2-1024x267.jpg');
  background-position: center bottom;
  width:100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150px;
  font-weight: bold;
  font-family: 'Archivo Black', sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

Add the CSS @media rule to display the effect properly on smaller screens:

@media only screen and (max-width: 600px) {
  .seaside {
    font-size: 80px;
    background-position: center 75%;
  }
}

Enjoy coding!

Read also:

CSS Mirror/ Reflection Text Effect

CSS Bouncing Text Animation

How to create a transparent text with stroke in CSS?

Categories
Web development

How to add stroke/ outline to the text in CSS?

How to add stroke/ outline to the text in CSS?

Demo:

*to see the text on the website click here.

Step1.

Add HTML

Create a div element and add some text:

<div class="text">Outline</div>

Step2.

Add CSS

Set the position of the text and elements:

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

Style the text:

.text {
  font-size: 100px;
  font-family: tahoma;
  font-weight: 900;
  -webkit-text-fill-color: #2a9d8f; 
  -webkit-text-stroke: 5px #264653;
  text-shadow: 5px 5px 10px #333;
}

Enjoy coding!

Read also:

CSS Slide Text Animation/ Slide Effect

Pure CSS Rainbow Text Animation

Categories
Web development

How to place text over an image?

How to place text over an image?

To learn how to position text over an image with CSS follow the steps below:

Demo:

Step1.

Add HTML

Create the image container and add an image:

<div class="image-container">
  <img src="https://lenadesign.org/wp-content/uploads/2020/07/css-ice-cream.jpg" alt="ice-cream">
  <div class="left-b">Some Text...</div>
  <div class="left-t">Some Text...</div>
  <div class="right-t">Some Text...</div>
  <div class="right-b">Some Text...</div>
  <div class="center">Some Text...</div>
</div>

Step2.

Add CSS

Use CSS to position the text on an image (in the center, top right, top left, bottom right or bottom left):

.image-container {
  position: relative;
  text-align: center;
  color: #000;
  font-size:35px;
}

.left-b {
  position: absolute;
  bottom: 10px;
  left: 18px;
}

.left-t {
  position: absolute;
  top: 10px;
  left: 18px;
}

.right-t {
  position: absolute;
  top: 10px;
  right: 18px;
}

.right-b {
  position: absolute;
  bottom: 10px;
  right: 18px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Enjoy coding!

Read also:

CSS border-image Property

CSS background-image Property

CSS Image Zoom on Hover

Categories
Web development

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

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

Demo:

*to see the zoom effect on the website click here.

To create the zoom text effect on hover with jQuery follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add jQuery

Step1.

Add HTML

<div class="text">He  was  an  old  man  who  fished  alone  in  a  skiff  in  the  Gulf  Stream  and  he  had  gone  eighty-four days now without taking a fish. In the first forty days a boy had been with him. But  after  forty  days  without  a  fish  the  boy’s  parents  had  told  him  that  the  old  man  was  now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at  their  orders  in  another  boat  which  caught  three  good  fish  the  first  week.  It  made  the  boy  sad  to  see  the  old  man  come  in  each  day  with  his  skiff  empty  and  he  always  went  down to help him carry either the coiled lines  or  the  gaff  and  harpoon  and  the  sail  that  was  furled  around  the  mast.  The  sail  was  patched  with  flour  sacks and, furled, it looked like the flag of permanent defeat.   The  old  man  was  thin  and  gaunt  with  deep  wrinkles  in  the  back  of  his  neck.  The  brown blotches of the benevolent skin cancer the sun brings from its [9] reflection on the tropic  sea  were  on  his  cheeks.  The  blotches  ran  well  down  the  sides  of  his  face  and  his  hands  had  the  deep-creased  scars  from  handling  heavy  fish  on  the  cords.  But  none  of  these scars were fresh. They were as old as erosions in a fishless desert. 
</div>

Step2.

Add CSS

Set the position of the background and elements:

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

Style the text:

.text {
  width: 400px;
  height: 350px;
  font-size:14px;
}

Step3.

Add jQuery

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

Tip: Don’t forget to add jQuery library in the <head> section!

$(document).ready(function() {
  var oldSize = parseFloat($(".text").css('font-size'));
  var newSize = oldSize  * 2;
  var oldWidth = parseFloat($(".text").css('width'));
  var newWidth = oldWidth  * 1.5;
  
  $(".text").hover(
    function() {
     $(".text").animate({ fontSize: newSize, width: newWidth}, 100);
    },
    function() {
    $(".text").animate({ fontSize: oldSize, width: oldWidth}, 100);
   }
 );
});

Enjoy coding!

Read also:

CSS Zoom on Hover

CSS Image Zoom on Hover

How to create the Comparison Slider?

Categories
Web development

HTML Canvas Text

HTML Canvas Text

To start to draw text on a canvas, use the following properties and methods:

font

fillText(text,x,y)

strokeText(text,x,y)

The HTML canvas font property sets the current font properties for text content on the canvas. The HTML canvas fillText() method draws filled text on the canvas, and the HTML canvas strokeText() method draws text (no fill) on the canvas.

Example1: Filled Text

<!DOCTYPE html>
<html>
<body>

<canvas id="basicText" width="200" height="100"
style="border:1px solid #333;">
</canvas>

<script>
var canvas = document.getElementById("basicText");
var ctx = canvas.getContext("2d");
ctx.font = "25px Verdana";
ctx.fillText("Hello World",27,60);
</script>

</body>
</html>

Output:

Example2: Stroke Text

<!DOCTYPE html>
<html>
<body>

<canvas id="basicText" width="200" height="100"
style="border:1px solid #333;">
</canvas>

<script>
var canvas = document.getElementById("basicText");
var ctx = canvas.getContext("2d");
ctx.font = "25px Verdana";
ctx.strokeText("Hello World",27,60);
</script>

</body>
</html>

Output:

HTML canvas stroke text

To fill text in color add fillStyle property, and to align the text add the textAlign property.

The HTML canvas textAlign property sets the current alignment for text content, according to the anchor point.
The HTML canvas textAlign can have the following values:
center/ end/ left/ right/ start(default).

Example:

<!DOCTYPE html>
<html>
<body>

<canvas id="alignCanvas" width="300" height="200"
style="border:1px solid #333;">
</canvas>

<script>
var canvas = document.getElementById("alignCanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Tahoma";
ctx.fillStyle = "#e76f51";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>

</body>
</html>

Output:


The HTML canvas measureText() method returns an object that contains the width of the specified text (you can use this method if you need to know the width of a text, before writing it on the canvas.).

Example:

<!DOCTYPE html>
<html>
<body>

<canvas id="measureText" width="300" height="150" style="border:1px solid #333;"></canvas>

<script>
var c = document.getElementById("measureText");
var ctx = c.getContext("2d");
ctx.font = "25px Tahoma";
var txt = "Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50);
ctx.fillText(txt, 10, 100);
</script>

</body>
</html>

Output:


Enjoy coding!

Categories
Web development

CSS Perspective Text Effect

CSS Perspective text

Demo:

*to see the CSS Perspective Text Effect on the website click here.

To create the CSS Perspective Text Effect follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="perspective-text"></div>

Step2.

Add CSS

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

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

Style the text:

.perspective-text {
  position: relative;
  transform-style: preserve-3d;
  perspective:900px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.perspective-text:before, .perspective-text:after {
  position: absolute;
  content:"PERSPECTIVE";
  transition: .2s;
  font-size: 100px;
  font-family: arial;
  font-weight: 900;
  transform-style: preserve-3d;
  transform: rotateY(-55deg);
}
  
.perspective-text:after {  
  color: #14213d; 
  left:-355px;
}
.perspective-text:before {
  color: #e5e5e5;
  left:-348px;
}

Add the hover effect:

.perspective-text:hover:before {
  transform: rotateY(55deg);
  color: #14213d; 
}

.perspective-text:hover:after {
  transform: rotateY(55deg);
  color: #e5e5e5;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Mirror/ Reflection Text Effect

CSS Long Shadow Text Effect

CSS Tooltips

Categories
Web development

CSS Mirror/ Reflection Text Effect

CSS Mirror/ Reflection Text Effect

Demo:

*to see the CSS Mirror/ Reflection Text Effect on the website click here.

To create the CSS Mirror/ Reflection Text Effect follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="mirror-text">MIRROR
</div>

Step2.

Add CSS

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

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

Style the text and create the mirror effect:

.mirror-text {
  position: relative;
  font-size:120px;
  font-weight: 900;
  font-family: arial;
  color: #4895ef;
}

.mirror-text:before {
  content:"MIRROR";
  position: absolute;
  top:85px;
  transform: rotate(180deg) scaleX(-1);
  opacity:0.5;
  
}

.mirror-text:after {
  content:"";
  position: absolute;
  left:0;
  width:850px;
  height:100px;
  top:105px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 24%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,1) 100%);
}

Add the CSS @media rule to display the effect properly on smaller screens:

@media only screen and (max-width: 600px) {
  .mirror-text {
    font-size: 80px;
  }
  .mirror-text:before {
    top:60px;
  }
  .mirror-text:after {
    top:55px;
  }
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Slide Text Animation/ Slide Effect

CSS Sliced Text Effect

How to change the text on Hover?