How To Create a typewriter using HTML and CSS

Creating a typewriter using HTML and CSS effects to parts of your text can help enhance your blog/website visitors and keep them engaged in reading more. The typewriter technique can be used for many objects, such as engaging landing pages, call-to-action-buttons, private websites, and code presentations

In this article, you’ll learn how to make a typewriter to engage using HTML and pure CSS.

The typewriter effect is simple to do, and all you’ll require in order to make understanding of this tutorial is a basic knowledge of CSS and CSS @keyframes.

Create a typewriter using HTML and CSS:

This is the process by which the typewriter effect is going to work:

The typewriter animation is going to show our text element by changing its width from 0 to 100% step by step using CSS Steps () function.
A blinking animation is going to move the cursor that “types out” the text.

Google prefers a design that has a high level of elements and a great color scheme, which is why it attracts more and more users. There are many ways to create typing text but one is using the @keyframes property. This is exactly what I design to use to create this effect.

Using CSS, we need to use some advanced CSS3 features to do this. But before we move on, let’s take a look at HTML.

We have a simple div typing effect and then we put a heading inside it.

HTML Code:

<div class="Container">
    <div class="Container-Text">I am Rauf, a Web Developer and Designer</div>
</div>

Now take a look at CSS, and we will use different techniques to do it. We need to use transform, calc: after, @keyframes, and some other elements.

If we look at the main div, we know that it uses positioning and transformation.

CSS Code:

<style>
.Container {
    font-family: Courier, monospace;
	display: inline-block;background:#7700f7;padding:10px; border-radius:15px;}
.Container-Text {
    display: inline-block;
  	overflow: hidden;  	letter-spacing: 2px;
 	animation: typing 5s steps(30, end), blink .75s step-end infinite;
    white-space: nowrap;  font-size: 30px;
    font-weight: 700;  border-right: 4px solid white;
    box-sizing: border-box;color:#fff;	
}
@keyframes typing {
    from { width: 0% }
    to { width: 100% }}

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: white; }}
</style>

We have seen in this article how easy it is to use CSS to create dynamic “typewriter” text. This typing effect can definitely increase the interest and happiness in your web pages. Anyway, I hope you enjoyed this article, and that it made you think of other great things you can do with CSS animation to get your web pages interested. And may happiness increase.

DEMO

Create a typewriter using HTML and CSS:

Leave a Reply Cancel reply