Total Followers 132,503
CSS3 with it’s possibilities is a revolution in web development. The new CSS3 properties give developers a wonderful chance to enhance their designs in a way that’s quick and easy, yet visually impressive. What’s more, almost all of the major browsers now support most of the CSS3 features so that’s another reason for mastering the new techniques. One of the spheres CSS3 has changed dramatically is web typography. Text styling and neat effects can now be achieved without using any Javascript or images at all. This article presents 30 useful and cutting edge CSS3 text effect and web typography tutorials that will take your designs to the next level.
In this tutorial you are going to use the text-shadow property that is currently supported by most of the major browsers to create the appearance of inset text. Inset text being text that has been pushed into the background, almost like a reverse embossed effect.
This is an example of 3D text created merely with CSS3. Use multiple text-shadows to create 3D text on any HTML element.
No extra HTML, no extra headaches, just awesomesauce.
This tutorial shows you how to create some really cool and inspiring text effects using text shadows in CSS3.
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.
Letterpress effect looks good in modern websites, letterpress effect can be gain using Photoshop and also using text-shadow property of CSS. This tutorial will show you how to achieve letterpress effect with Photoshop and also with pure CSS.
Text embossing has become a huge trend in last couple of years. This tutorial describes how to implement this effect with CSS.
Learn to use CSS3 text shadows, outlines, transitions, and even text gradients to create cool typography that you’d swear had to be made with a program like Photoshop.
This tutorial shows you how to add an outline, or stroke, to your text using the CSS3 text-stroke property.
In this tutorial you’ll create a cool transparency overlay effect that closely resembles anaglyph stereoscopic 3D images. To use the effect in web designs you’ll of course build it with CSS, but the main consideration is to keep everything neat and true in our markup.
Whilst this CSS3 declaration might not be crucial to your project or design and is not supported by all browsers, it’s a fantastic effect that really takes your design one step further.
This post covers eight cool text effects you can achieve using CSS3 text-shadow property only .
In this tutorial you’ll learn to rotate text without images using the transform property.
Create a fun flaming text effect simply by using some JavaScript and the good old CSS2 property text-shadow and shining text using CSS3 properties and animation.
This tutorial will teach you how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic.
In this tutorial you’ll find seven fun and attractive CSS tricks that you can grab and insert right into your own projects and customize at will. Keep in mind that since this stuff is still cutting edge, older browsers won’t support most of it.
Learn how to create multiple text shadows using CSS3 text shadow property.
Replace programs like Adobe Illustrator and learn how to add stroke to web texts using WebKit.
IE9 does support the majority of the CSS3 properties, however it doesn’t support image-border and text-shadow properties. This article will deal with text-shadow: how it works in browsers that support it, and strategies developers can use today to emulate some of its functionality in IE.
It ain’t exactly a tutorial, however you should check out the code used to create this stunning effect to learn how to add blur to text without using bunch of text-shadow properties.
In this tutorial, you’ll learn to create inset type, a popular text treatment, using only CSS.
In this short video tutorial you’ll learn how to apply gradients to texts using webkit.
Learn to apply CSS transition on a selectable text.
CSS3 presents many new possibilities when it comes to text effects on websites. The text-shadow property is one of these awesome abilities. This article covers 5 great effects you can achieve using CSS3 text-shadow.
An experiment showing the power of CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa. You can check out the code to discover these impressive features.
This inset text tutorial differs from others because besides default text-shadow it also uses inner shadow property.
This easy CSS text shadow tutorial will show you step by step how to create 3D font with multiple css shadows by stacking multiple CSS3 text shadow properties, then go a step further and use the CSS text transform and CSS transition properties to make the 3D text pop out / zoom on hover.
Learn how we create 3D text using CSS3 text-shadow to heading and paragraph tags.
CSS3 introduces a few new units in font sizing, including the rem unit, which stands for “root em”. Take a look at it’s features and learn how to create resizable text in all major browsers.
In this tutorial, you’ll look at how to take basic markup and transform it into an attractive typographical design using only minimum images, pure CSS3 magic and we will spice things up with lettering.js – a jQuery plugin for radical web typography.
Another tutorial taking you through all the advantages CSS3 text-shadow can give.
Get The Only Freelancer crash course you will ever need to read!
chilling, living, dreaming. you can check out my blog, find me on flickr and follow me on twitter.
Wednesday, February 1st, 2012 21:43
Hello Daniel :)
Nice collection mate, I liked the gradient text effect which exactly looks like photoshopped.
Thanks for sharing!
Wednesday, January 25th, 2012 11:35
Great post here, with some lovely techniques displayed. Some outdated but this blog post is quite old now none the less has given me some inspiration for my website! Thanks
Monday, January 23rd, 2012 06:17
Hey Thankx , That was wonderful piece of work.. I loved the EMBOSSED CSS effect.. planning to use it but the link is not opening :-(
Wednesday, January 11th, 2012 07:22
Nice effects, especially the more subtle ones that can degrade nicely. Can’t wait until css3 is usable in everyones browsers.
Friday, October 14th, 2011 19:04
Hey There. I discovered your blog the use of msn. This is an extremely neatly written article. I’ll make sure to bookmark it and come back to read extra of your helpful info. Thanks for the post. I will definitely comeback.
Monday, September 19th, 2011 22:13
The inset tutorial #25 is amazing, too bad it’s only supported by Chrome and Safari. Great list to learn very useful css3 tricks, thanks !
Saturday, July 23rd, 2011 10:02
Nice List. thank you for your reference, this is very helpful for me
Monday, June 6th, 2011 20:13
A nice list, however, some of these CSS3 effects will be overdone (as always). I shutter as I think about the new crops of ridiculous website designs in the coming year. The nice CSS3 subtleties will be lost on the majority of sites unfortunately.
Friday, May 27th, 2011 11:59
These are really good tips and resources. Letterpress Text Effect Using Photoshop and CSS is my favorite!
Tuesday, May 24th, 2011 22:23
I have not had time to deal with html5, and has already entered CSS3. Life is not enough to explore it all. It is a pity that the article does not mention what features appear in the new version.
Saturday, May 21st, 2011 14:44
This is not working at my end? You put very good tips about CSS Web Typography. Can someone please help me how to fix it? I have tried bit I can’t.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Tommaso
Friday, May 27th, 2011 11:59
These are really good tips and resources. Letterpress Text Effect Using Photoshop and CSS is my favorite!
Nathan
Wednesday, January 11th, 2012 07:22
Nice effects, especially the more subtle ones that can degrade nicely. Can’t wait until css3 is usable in everyones browsers.
James Ballard
Monday, June 6th, 2011 20:13
A nice list, however, some of these CSS3 effects will be overdone (as always). I shutter as I think about the new crops of ridiculous website designs in the coming year. The nice CSS3 subtleties will be lost on the majority of sites unfortunately.
Ethan
Saturday, July 23rd, 2011 10:02
Nice List. thank you for your reference, this is very helpful for me
Antown
Tuesday, May 24th, 2011 22:23
I have not had time to deal with html5, and has already entered CSS3. Life is not enough to explore it all. It is a pity that the article does not mention what features appear in the new version.
John
Monday, September 19th, 2011 22:13
The inset tutorial #25 is amazing, too bad it’s only supported by Chrome and Safari. Great list to learn very useful css3 tricks, thanks !
Poul Harris
Saturday, May 21st, 2011 14:44
This is not working at my end? You put very good tips about CSS Web Typography. Can someone please help me how to fix it? I have tried bit I can’t.
Rahul
Wednesday, February 1st, 2012 21:43
Hello Daniel :)
Nice collection mate, I liked the gradient text effect which exactly looks like photoshopped.
Thanks for sharing!
Ben Clarke
Wednesday, January 25th, 2012 11:35
Great post here, with some lovely techniques displayed. Some outdated but this blog post is quite old now none the less has given me some inspiration for my website! Thanks
Saurav Chatterjee
Monday, January 23rd, 2012 06:17
Hey Thankx , That was wonderful piece of work.. I loved the EMBOSSED CSS effect.. planning to use it but the link is not opening :-(
Jason
Friday, October 14th, 2011 19:04
Hey There. I discovered your blog the use of msn. This is an extremely neatly written article. I’ll make sure to bookmark it and come back to read extra of your helpful info. Thanks for the post. I will definitely comeback.