Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a text effect and animation. To create all effect we will use HTML and CSS. We do not make use of any images, icons or external libraries and plugins to create this animation and effect.

As I have mentioned in my tutorials before, this kind of design hardly finds application in real-world projects. However, they are a fun way to learn and explore new CSS properties.

text effect adds life to static typography by using pure css techniques. It enhances user experience with dynamic visual effects that draw attention.

Project Folder Structure:

Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Text Effect’. Inside this folder, we have two files. These files are – index.html and style.css. The first file is the HTML document while the second one is the stylesheet.

HTML:

We begin with the HTML code. First, copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Text Effect🎨 | Codehemu</title>
    <link href="https://www.codehemu.com/favicon.ico" rel="icon" type="image/x-icon">
     <link rel="stylesheet" href="style.css">
</head>
<body>      
    <span id="text"></span>
</body>
</html>

StyleSheet (CSS):

Next, we style the elements created by HTML to give them text effect and animation using CSS. Now copy the code provided to you below and paste it into your stylesheet. Below is the code for many style sheets, you can copy and use the style you want to see.

body {
  display: flex;
  flex-direction: column;
  float: left;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #fdf9fd;
}

.text {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 150px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: #f1ebe5;
  text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
}



body {
  display: flex;
  flex-direction: column;
  float: left;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #fdf9fd;
}

.text {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 150px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  -webkit-text-stroke-width: 2px;
  -moz-text-stroke-width: 2px;
  -webkit-text-stroke-color: #111827;
  -moz-text-stroke-color: #111827;
  color: transparent;
  text-shadow: 6px 6px #db2777;
}


body {
  display: flex;
  flex-direction: column;
  float: left;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #fdf9fd;
}

.text {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 150px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  background: linear-gradient(-45deg,
      #4bc0c8 25%,
      #feac5e 25%,
      #feac5e 50%,
      #4bc0c8 50%,
      #4bc0c8 75%,
      #feac5e 75%,
      #feac5e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 20px 20px;
  background-position: 0 0;
  animation: stripes 1s linear infinite;
}

@keyframes stripes {
  100% {
    background-position: 20px 0, 20px 0, 20px 0;
  }
}


body {
  display: flex;
  flex-direction: column;
  float: left;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #fdf9fd;
}

.text {
  text-align: center;
  display: block;
  text-transform: uppercase;
  font-size: 150px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: #011a32;
  animation: text-shadow 1.5s ease-in-out infinite;
}

.text:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes text-shadow {
  0% {
    transform: translateY(0);
    text-shadow:
      0 0 0 #0c2ffb,
      0 0 0 #2cfcfd,
      0 0 0 #fb203b,
      0 0 0 #fefc4b;
  }

  20% {
    transform: translateY(-1em);
    text-shadow:
      0 0.125em 0 #0c2ffb,
      0 0.25em 0 #2cfcfd,
      0 -0.125em 0 #fb203b,
      0 -0.25em 0 #fefc4b;
  }

  40% {
    transform: translateY(0.5em);
    text-shadow:
      0 -0.0625em 0 #0c2ffb,
      0 -0.125em 0 #2cfcfd,
      0 0.0625em 0 #fb203b,
      0 0.125em 0 #fefc4b;
  }

  60% {
    transform: translateY(-0.25em);
    text-shadow:
      0 0.03125em 0 #0c2ffb,
      0 0.0625em 0 #2cfcfd,
      0 -0.03125em 0 #fb203b,
      0 -0.0625em 0 #fefc4b;
  }

  80% {
    transform: translateY(0);
    text-shadow:
      0 0 0 #0c2ffb,
      0 0 0 #2cfcfd,
      0 0 0 #fb203b,
      0 0 0 #fefc4b;
  }
}


body {
  display: flex;
  flex-direction: column;
  float: left;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #353535;
}

.text {
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  font-size: 150px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  background: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 1.5s linear infinite;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

That’s it for this tutorial. If you have any queries, suggestions or feedback you can comment below. Happy Coding!

Tags

Post a Comment

إرسال تعليق

أحدث أقدم