How to create typing effect with CSS fully explained!

#beginners #css #webdev #tutorial

Hi fellow dev,

Have you ever brainstormed what to do to keep your website or portfolio responsive and different from the 90% "boorrring" ones out there?
The usefulness of a responsive sites is under emphasized as it glues your readers or potential clients to your page.

How do i make my site responsive?

There are tons of ways to make our sites responsive and there are so many tutorials scattered out on the web, The typing effect is one greatest way and we're just going to talk about it, afterall it's why you're here right?

Html

First lets take a look at the html

<div class="text-content">
<h1>Medium is gold</h1>
</div>

I created a div container with the name "text-content" and made h1 it's child.

Let's move on to CSS

CSS

body{
display:flex;
justify-content:center;
background-color:#f1f1f1;
}

The key concept behind this CSS code is the use of the flex attribute to align the code horizontally, which is crucial for the code to work properly. The .text-content h1 selector targets the h1 tag inside the div with class "text-content".

.text-content h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; 
  border-right: .15em solid orange; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: .15em; 
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

overflow hidden ensures the rest of our code is not revealed until the animation ends .

border-right attribute gives the idea of a cursor, but even we both knows there's none, lol.

whitespace nowrap keeps our content on a single line while margin:auto gives us the scrolling effect as the typing enhances
lastly , our animation is created in the order(name,duration,direction and iteration)

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

Finally, the animation property sets up two keyframes: typing and blink-caret. The typing keyframe animates the width of the h1 tag from 0% to 100%, which makes it appear as though the text is being typed out. The blink-caret keyframe animates the border color of the h1 tag, making it blink like a cursor.

In summary, the typing effect is a simple but effective way to make your website or portfolio stand out from the rest.
Thank you for staying through!, if you have any difficulty doing this or suggestions, please let me know in the comment section.Gracias amigo