Beautiful texts and typography makes web pages look attractive. In web design & development, with CSS we can add various effects in text or typography of your website. With CSS, you can use text clipping and add effects & animation to text to spice things up a little and make them interesting.
To illustrate the same we have brought 10 different examples which you can use in your web pages to beautify your texts. Let’s get started.
Table of Contents
Demo 1 (Pure CSS)
In this demo, the text is displayed as with an animation. It’s one of the most widely used animations by web developers. It’s not responsive. It’s a challenge for the readers to make it responsive with the CSS knowledge that you have.
See the Pen CSS Typing Effect by Marko (@denic) on CodePen.
Demo 2 (with JS)
This has some JavaScript code too. With the use of keyframe animations we can create a pure CSS typing animation. The code creates a responsive design.
See the Pen Pure CSS Typing Animation by Stephanie Eckles (@5t3ph) on CodePen.
Demo 3 (Pure CSS)
This has a gradient typing effect. Such animated texts can be used when your website has used some sort of color combinations. It’s made with pure HTML and CSS.
See the Pen Gradient typing effect in CSS by Jasmine G (@ladyjellington) on CodePen.
Demo 4 (Pure CSS)
You will be amazed to see that this demo contains only CSS. This is SCSS-POWERED ANIMATED TEXT. It’s responsive in nature.
See the Pen Typed.scss: CSS-powered animated text by Brandon McConnell (@brandonmcconnell) on CodePen.
Demo 5 (Pure CSS)
This is the editor’s illustration. No JS has been used here. Just with HTML and CSS we can create this kind of amazing text effect. Try it out on your own.
See the Pen Editor Illustration by Klare (@klare) on CodePen.
Demo 6 (Pure CSS)
Typewriter’s animation is a very popular animation that is seen on every website that we come across. With a few lines of code we can create this animation.
See the Pen CSS Typewriter Animation by Geoff Graham (@geoffgraham) on CodePen.
Demo 7 (Pure CSS)
Text slider with typing animation is also one of the most extensively used text animations. The code given above is not responsive. We can add more code and make it responsive. The idea here is to create the animation and that was the primary focus of the demo.
See the Pen Text slider with typing animation in pure CSS by Adam Lewiński (@alewinski) on CodePen.
Demo 8 (Pure CSS)
This is another example of typing animation. This code is responsive. Feel free to use this in your projects and above that try to understand the CSS code used to create this effect.
See the Pen CSS Typing animation by Raúl Barrera (@raubaca) on CodePen.
Demo 9 (Pure CSS)
Auto type using CSS is also one of the examples of typing animations. Check the code and try to improvise the code from your end.
See the Pen Auto Type CSS ! by CSS Support (@css-support) on CodePen.
Demo 10 (Pure CSS)
One last demo of typing animation is given above to give you more knowledge on how CSS is used to create these animations. A good understanding of Keyframes and animations is required to write these code from the scratch.
See the Pen Typing Text Animation by Will Moyer (@moyer) on CodePen.
Hope all the given 10 demos were useful to you and you learnt something new and had an amazing experience. Comment below your queries and our team will get back to you as soon as possible.