The biggest nightmare for a website owner is that his site is not loading up fast or is not cross browser compatible, because slow websites take up more maintenance and drive away visitors. According to researches and survey results the page loading time is very important aspect of the user experience. If a website takes so much time to load, visitors will start getting frustrated which makes a very bad impression and it results in ‘less traffic’.
You must be thinking that how fast the load time should really be. Well, the answer is you need to make fast things faster. Currently even 400 milliseconds — literally the blink of an eye — is too long, as Google engineers have discovered. That barely perceptible delay causes people to search less. Actually people don’t like to wait. It is human nature to be impatient. According to recent research ‘47% of consumers expect a web page to load in 2 seconds or less’ and ‘40% of people abandon a website that takes more than 3 seconds to load’.
There are several things which make your page load slowly. We are going to talk about how to use CSS to make text effects instead of using heavy images produced by Photoshop or other editing programs.
I have collected some tutorials which demonstrate the astonishing pure css text effects and animations.
1 – Rotating Text with CSS Animations
This tutorial covers the complete guideline to animate certain parts of the sentence using css or even to change words without external sources. View the demo here.
2 – CSS Gradient Text Effect
This tutorial guides webmasters on how to make text shiny and add gradients to headings using css. View demo here.
3 – Letter Cards Text Effect
Create cool letter cards text effects without using a single image.
4 – Subtle CSS3 Typography
With the help of transitions, outlines, text shadows and text gradients, create cool typography that you’d swear is a image.
5 – 3D Text Effects
Create awesome 3D text effects on any html element using multiple text-shadows. No extra headaches, just awesomeness.
6 – Letterpress Effect
An excellent post by Chris Spooner, explaining how to create letterpress effects with css using text shadow.
7 – Glass Effect
Make your text transparent like it’s a glass using this great technique.
8 – Relief shade Text effects
An awesome tutorial to make relief shade effects in headings and banners using css.
9 – Two-Color Three-Dimensional blocks and text
Create Three Dimensional blocks and text using box-shadow and text-shadow properties of css.
10 – Neon Text Effects
A great tutorial to create neon light effects on text using different layers of text-shadow property in css.
Stay tunned for more tips to decrease page load time of your site.